This guide will show you exactly the code you’ll need to create a cool toggle switch that sort of resembles the ones used on iOS devices. The toggle switch is interactive, so that when the user clicks on the switch, it actually changes positions (and reveals a color on the toggle bar that signifies whether or not the switch is “active”). The toggle is actually created by adding some serious styling to your average checkbox input HTML tag. To start building this effect, all you really need are a few lines of HTML.
The HTML
<div class="container"> <input type="checkbox" name="toggle" id="toggle"> <label for="toggle"></label> </div>
As you can see, all we really need is a standard input tag to get the ball rolling. The real magic happens when we add the CSS, but make sure you don’t forget to include the label tag! See the CSS below to find out just how handy that label tag becomes.
The CSS
body{
background-color: #d9d9d9;
}
input#toggle {
max-height: 0;
max-width: 0;
opacity: 0;
}
input#toggle + label {
display: block;
position: relative;
box-shadow: inset 0 0 0px 1px #a6a6a6;
height: 30px;
width: 50px;
border-radius: 15px;
margin: 100px auto;
background-color: rgba(255, 255, 255, .3);
}
input#toggle + label:before {
content: "";
display: block;
height: 30px;
width: 30px;
top: 0;
left: 0;
border-radius: 15px;
background: rgba(172, 230, 0, 0);
-moz-transition: .3s ease-in-out;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
input#toggle + label:after {
content: "";
position: absolute;
display: block;
height: 30px;
width: 30px;
top: 0;
left: 0px;
border-radius: 15px;
background: white;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), 0 2px 4px rgba(0, 0, 0, .2);
-moz-transition: .3s ease-in-out;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
input#toggle:checked + label:before {
width: 50px;
background: #ace600;
}
input#toggle:checked + label:after {
left: 20px;
box-shadow: inset 0 0 0 1px rgba(172, 230, 0, 1), 0 2px 4px rgba(0, 0, 0, .2);
}
One little toggle switch takes about 60 lines of CSS to create, which is quite a lot, but once you see the final effect (image below), you’ll see that it’s totally worth it. Below is an image of the toggle switch in the “off” position.
Some things of note in the CSS: the box-shadow property is one that is used often to create that 3D look. The border-radius property is used to give the input tag that oblong, rounded corner shape we’re so used to seeing on our mobile devices. The CSS also makes use of the label input and the :checked, :before and :after pseudo-selectors to create the toggle functionality and control the movements of the rounded “toggle”. See the image below of the toggle in the switched on position (this is the default).
