How to Make a Switch Button with CSS

A switch button—as made popular by the iOS operating system— makes it easy to toggle between two different options, such as on or off.

We can recreate this type of button with pure CSS. We don’t need any JavaScript, we can use the :checked state of a checkbox to change the styles when you click on it.

The HTML part consists of just a checkbox and a label:

<input type="checkbox" id="cb">
<label for="cb"></label>

It’s important that the two elements are associated, since we’re going to click on the label to toggle the checkbox on or off.

First, we hide the checkbox, since we don’t want it to show:

input[type="checkbox"] {
  display: none;
}

Even though it is hidden from the page, it will still be triggered when we click on the associated label.

Next, we style the label, which is going to be the background of our switch button:

label {
  display: block;
  width: 100px;
  height: 50px;
  background: #F0F0F0;
  padding: 2px;
  border-radius: 25px;
  cursor: pointer;
  transition: 0.4s;
}

Then we make the circle, using the ::after pseudo-element:

label::after {
  content: '';
  display: block;
  width: 50%;
  height: 100%;
  background: white;
  border-radius: 50%;
  position: relative;
  left: 0;
  transition: 0.2s;
}

When the checkbox is in a :checked state, we change the background color of the label, and move the circle to the right:

input[type="checkbox"]:checked + label {
  background: #48D562;
}

input[type="checkbox"]:checked + label::after {
  left: 50%;
}

Clicking again moves the circle back to its starting position.

The final result looks like this:

See the Pen QNZYJm by Magnus (@magnusb) on CodePen.