We will turn this:
using only CSS and a little bit of html.
The markup is straighforward. A
<label> and an
<input> element. The only addition is a
<span> after the checkbox, used to catch the
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
name will also work.
First we hide the checkbox, using
opacity so it still receives focus and keyboard input.
We use the pseudo selector
::before to style the
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.
This works on chrome, firefox and IE11.