Create a checkbox toggle switch

An checkbox toggle switch is an extremely popular element I see on many websites these days. I get asked a lot about how to create these and see so many plugins used to achieve this. Let me tell you now a plugin is not needed and in fact no JS is needed at all!

For this small tutorial I will show you 2 very simple toggle switches with simple HTML and CSS. It is just a simple label with an input and span inside.

Let’s begin with our basic HTML:

<label class="switch">
    <input type="checkbox" />
     <span class="slider"></span>
</label>

Nothing too special right!

To begin the styling of this we need to relatively position the switch so the inner elements can be position inside of that to be able to animate. We will also give a width and height so it can be contained, of course you can adjust them as you see fit. We also need this to display as a block or inline-block.

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

We also need to hide the standard input field.

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

Now for the slider part itself. Nothing too major here either. We absolutely position it so it starts “switched off” on the left, we add our transitions so it animates nicely, then add a :before pseudo selector with some dimensions, a colour (to actually show a switch) and the transition timing set.

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

Then finally we add our styles for once it is checked or “switched on” to animate and change colour.

input:checked + .slider {
  background-color: #D6EFEE;
}

input:focus + .slider {
  box-shadow: 0 0 1px #D6EFEE;
}

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

Then, hey presto! you have a working toggle switch!

Now I said we would create 2, that is kind of a lie as the second is just a rounded version which you simply can add a class and some extra styles ;)

<-- Rounded switch -->
<label class="switch">
    <input type="checkbox" />
     <span class="silder  round"></span>
</label>

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

It really is that simple to achieve a nice effect on your checkboxes and of course the more you experiment the more whacky versions you can create, so go have some fun! Feel free to play and take the code from my Codepen too.

See the Pen Checkbox toggle switch by steven hoskins (@hoskinshozzy) on CodePen.