Creating an iOS like switch-toggle button in pure CSS

The sexy and elegant iOS switch button <3

Hey guys, today a co-worker asked me to teach him to create an iOS switch-toggle button style using just CSS.

So I decided to write about it because I have seen these switch-style everywhere and some people think that this is hard to do... but it's not :D

1 - Build your markup

The first thing to do is to build your block for the switch button. A simple div, a label and of course our checkbox.

<div class="container">
  <input type="checkbox" name="toggle" id="toggle" class="hide-toggle">
  <label for="toggle" class="switch-button"></label>
</div>

See that the label comes after our input. That's because we will use the CSS selector + to make it work.

So let's make it pretty, right :D ? Now we need to hide the default checkbox. That's because each browser has their own style, and if you want to control of the block, you have to hide it :D

Then, we'll make it transparent and put out of the screen. It's pretty important that the checkbox stays functional, not visible, but functional :)

2 - Styling like iOS and creating the elements

You have a lot of ways to hide it, here is the CSS that we will use to do it today

/* Say good bye ;* */
.hide-toggle {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

Cool. Now that we've got our guy out of the screen, we can style the switch. We're using the checkbox's label for this.

There are two parts of the switch:

1. The container (this uses the actual label)
2. The switch itself (this uses the :before pseudo-element)

/* The container */
.switch-button {
  position: relative;
  display: block;
  width: 50px;
  height: 25px;
  border-radius: 25px;
  background-color: #fff;
  box-shadow: inset 0 0 0px 1px #d5d5d5;
  transition: transform .25s ease-in-out;
}

/* The switch itself */
.switch-button:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), 0 2px 4px rgba(0, 0, 0, .2);
  transition: transform .25s ease-in-out;
  will-change: transform;
}

Yeaaah dude, now you already have a sexy and pretty button in your screen. But it's still not doing anything :P

3 - All the magic

For the "black magic" we'll use the CSS selector + to get the element after our checkbox is checked.

/* all magic here using :checked and the selector + */
.hide-toggle:checked + .switch-button {
  background-color: rgba(19, 191, 17, 1);
}
.hide-toggle:checked + .switch-button:before {
  transform: translate3d(100%,0,0);
}

As you can see, we use the state :checked to make our toggle button and the CSS selector + to capture and animate the very first element after our input, in this case, our label, and make all the stuffs happen :D

Aaaannnnd that's all folks :D this is the elegant and sexy iOS button that we built <3

See the Pen iOS style switch toggle in pure CSS by Andr Mendes (@andremendes) on CodePen.