debugger;

Make the world a better place, one bug at a time.

CSS-Only Material Design Switch Button
Saturday, 13 June 2015

We will turn this:

into this

using only CSS and a little bit of html.

Variants

HTML

The markup is straighforward. A <label> and an <input> element. The only addition is a <span> after the checkbox, used to catch the :focus and :checked states.

Since we are using a label, clicking on it will also change the status of the switch. The checked attribute can also be used in the input to set the initial state of the button to "on". Other attributes like value and name will also work.

CSS

First we hide the checkbox, using opacity so it still receives focus and keyboard input.

We use the pseudo selector ::before to style the switch button.

The span will become the slide.

And finally we use CSS3 transitions to animate the button based on the status of the checkbox. This is where the magic happens.

More

This works on chrome, firefox and IE11.

material-design switch toggle button