In this tutorial, we will create some flat style toggle switches purely using CSS. Those switches could be used instead of the generic, dull looking, checkboxes.
Usually, while we are creating new websites, we use checkboxes to give users the option to select certain things on the site. Most of the time those standard checkboxes look dull: they just don’t fit in the websites’ modern and clean design. So, designers create their own stylish checkboxes or, in other words, toggle switches.
There’s no pure CSS way to style a generic checkbox. It’s an element whose style is managed by the browser engine, so different browsers would display the checkboxes differently. Wouldn’t it be nice to have smoother. cleaner checkboxes? Using some CSS tricks can easily solve that problem, and by combining the :checked, :before, and :after pseudo classes with our checkbox input, you can achieve beautiful toggle switches with smooth transition effects. So let’s get started!
Flat Switch
Flip Switch
Setting the Basics:
We’ll use the standard checkbox input with a label, and then we’ll wrap those label/input combinations inside a div. Each style will be targeted by a class that is attached to the input element. Labels will be targeted using the input + label selector targeting so they don’t need class names of their own.
<div class="block-switch">
<input id="toggle-flat" class="toggle toggle-flat" type="checkbox">
<label for="toggle-flat"></label>
<h4>Flat Switch</h4>
</div>
<div class="block-switch">
<input id="toggle-flip" class="toggle toggle-flip" type="checkbox">
<label for="toggle-flip" data-on="Yes" data-off="No"></label>
<h4>Flip Switch</h4>
</div>
For the CSS, we want the actual checkbox to be hidden, so, w’ll apply all the styling we want on the label. So clicking on the label will actually “check” or “uncheck” the checkbox. Here’s what we will achieve:
input.toggle {
position: absolute;
visibility: hidden;
}
input.toggle + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Writing the style for the switch (Flat):
The label will be the container of the style so we give it a background color, width and height to simulate the border. Then we use the :before pseudo element to simulate the inner background of the switch which switches from red to green depending on the state. The :after pseudo element will be the white button that sits on top and slides from left to right on click. We’ll change the background color of the :before pseudo element and the position of the :after pseudo element when the input takes on the pseudo class :checked, and everything will transition smoothly. Just as follows:
input.toggle-flat + label:before,
input.toggle-flat + label:after{
display: block;
position: absolute;
content: "";
}
input.toggle-flat + label {
width: 100px;
height: 20px;
background-color: #BF2A23;
-webkit-transition: background 0.5s;
-moz-transition: background 0.5s;
-o-transition: background 0.5s;
transition: background 0.5s;
}
input.toggle-flat + label:before{
top: 2px;
left: 2px;
bottom: 2px;
right: 2px;
-webkit-transition: background 0.5s;
-moz-transition: background 0.5s;
-o-transition: background 0.5s;
transition: background 0.5s;
}
input.toggle-flat+label:after{
top: 4px;
left: 4px;
bottom: 4px;
width: 45px;
background-color: #fff;
-webkit-transition: margin 0.5s, background 0.5s;
-moz-transition: margin 0.5s, background 0.5s;
-o-transition: margin 0.5s, background 0.5s;
transition: margin 0.5s, background 0.5s;
}
input.toggle-flat:checked+label {
background-color:#00C176;
}
input.toggle-flat:checked+label:after {
margin-left: 47px;
background-color:#fff;
}
Result:
Flat Switch
Writing the style for the switch (Flip):
Now that we’re done with the flat boxed switch. We’re going to create flip switch. The default view will be red with “OFF” text, and the checked view will be green with “ON” text. When the label is clicked, the switch will flip over, spinning 180 degrees on its x-axis, revealing the opposite side. We’re going to populate the content of the unchecked/checked switch by using data-attributes. These data-attributes were specified in the HTML by data-on and data-off, each of which will populate the :after and :before pseudo elements respectively. We’ll use backface-visibility property on the :after element, which initially hides its back side due to its starting point at -180 degrees. Just as follows:
input.toggle-flip + label {
height: 20px;
}
input.toggle-flip + label:before, input.toggle-flip + label:after {
position: absolute;
left: 0;
bottom: 0;
right: 0;
width: 100px;
height: 20px;
color: #fff;
text-align: center;
line-height: 20px;
}
input.toggle-flip + label:before {
background-color: #BF2A23;
content: attr(data-off);
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
-o-transition: -o-transform 0.5s;
transition: transform 0.5s;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
input.toggle-flip + label:after {
background-color: #00C176;
color:#fff;
content: attr(data-on);
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
-o-transition: -o-transform 0.4s;
transition: transform 0.4s;
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
input.toggle-flip:checked + label:before {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
input.toggle-flip:checked + label:after {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0);
}
Result:
Flip Switch
Here is a codepen preview of everything put together!
That’s it! Now we created two flat design hope you enjoyed this tutorial.