How To Create HTML Toggle Switch Button? (Switchary)

Switcharys (HTML Toggle Switch Button) are part of the modern UX and are getting more and more popular every day. Create your own 1 kb switches by using these 3 steps fast.

The HTML


<label class="switch" for="switch">
  <input type="checkbox" id="switch">
  <div class="slider"> </div>
</label>

The switches are technically form input fields in the form of checkboxes. To manipulate the look and feel of the checkbox we have to use input type checkbox with rounded borders and create a circle that floats on top. The key is to define two states of css and then create a transition on a click event. We have animated the button in direct css and used jQuery to define the state using class. You can also create data variables and other attributes to post if needed. But I like to keep it as clean as possible.

On click we need to change class from switch on to switch off and create a css transition in between.

The CSS


.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 33px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: all .4s ease 0s;
  -moz-transition: all .4s ease 0s;
  transition: all .4s ease 0s;
  border-radius: 34px;
  -moz-border-radius: 34px;
  -webkit-border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 25px;
  width: 25px;
  left: 5px;
  bottom: 4px;
  background-color: #fff;
  -webkit-transition: all .4s ease 0s;
  -moz-transition: all .4s ease 0s;
  transition: all .4s ease 0s;

  border-radius: 90%;
  -moz-border-radius: 90%;
  -webkit-border-radius: 90%;
}

.on .slider {
  background-color: #2196F3;
}

.on .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

The jQuery

First you need to import the jQuery library form google


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>

Then check if checkbox is checked change the class "on" OR "off" in jQuery


<script type="text/javascript">
  $('.switch').click(function() {
    var thisVal = $(this).children('input[type="checkbox"]');
    if(thisVal.is(':checked')) {
      $(this).removeClass('off');
      $(this).addClass('on');
    }else{
      $(this).addClass('off');
      $(this).removeClass('on');
    }
    });  
</script>

note : you need to have the Jquery library installed to ensure this works simply add it from the CDN below


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>

The Final Code


<!DOCTYPE html>
<html>
<head>

<style type="text/css">
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 33px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: all .4s ease 0s;
  -moz-transition: all .4s ease 0s;
  transition: all .4s ease 0s;
  border-radius: 34px;
  -moz-border-radius: 34px;
  -webkit-border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 25px;
  width: 25px;
  left: 5px;
  bottom: 4px;
  background-color: #fff;
  -webkit-transition: all .4s ease 0s;
  -moz-transition: all .4s ease 0s;
  transition: all .4s ease 0s;
  border-radius: 90%;
  -moz-border-radius: 90%;
  -webkit-border-radius: 90%;
}

.on .slider {
  background-color: #2196F3;
}

.on .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
</style>
</head>
<body>

<label class="switch" for="switch">
  <input type="checkbox" id="switch">
  <div class="slider"> </div>
</label>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script type="text/javascript">
  $('.switch').click(function() {
    var thisVal = $(this).children('input[type="checkbox"]');
    if(thisVal.is(':checked')) {
      $(this).removeClass('off');
      $(this).addClass('on');
    }else{
      $(this).addClass('off');
      $(this).removeClass('on');
    }
    });  
</script>

</body>
</html>

Result

The working demo along with some fun variations can be seen below.

Default Demo:

iPhone Classic Demo:

Arrow Demo:

Related Articles

Create IAM User with full Access s3

Switcharys (HTML Toggle Switch Button) are part of the modern UX and are...

Read More
  • 360 Degree View video of the belaire

    DLF Belaire is one the finest properties on DLF phase 5 . Mindmyweb worked with pickahome to create...

    Read More
  • Balloon design for pickahome

    This is a virtually edited video we made just for fun. Designed with a Read More

  • Indian Guys Try girly drinks

    Funny alcohol review video created by coctail crew...

    Read More
  • Joininghands Donation Poster

    Quick promotional poster for joining hands India Read More

  • Shooting DLF Pinnacle on iphone 6

    I was just passing DLF pinnacle gurgaon when I decided to shoot a very unique view of this lovely...

    Read More
  • Arial Panorama For MGF Villas | pickahome

    A look at some stunning Arial time laps photos of Read More

  • Arial Panorama for DLF phase 2 | Real Estate

    DLF phase 2 is a residential...

    Read More
  • Arial Panoramic images for DLF phase 5

    Arial Panoramics were one of the biggest challenges for the Read More

  • How to install Pokémon go on iphone from India / Singapore / Japan

    The world is going Pokémon go crazy and there is a good reason for that. ITs a revolutionary game...

    Read More
  • How to display Indian rupees symbol in modern browser

    As a web developer when I see errors on the web it hits me immediately. I am seeing large...

    Read More
  • Deference Between @media OR @media screen OR @media only screen

    How to write a media query to target specific...

    Read More

  • 5 experiential tips for aspiring entrepreneurs

    Respect is important

     

    Over the years I have met a lot of...

    Read More
  • Life Lesson's – Does your startup have the right gear?

    Life Lesson’s – Does your startup have the right gear?

    I remember...

    Read More
  • 5 startup lessons from counter strike

    I have been a gamer for as long as I remember – I always wanted to be a game designer as a...

    Read More
  • -->