How to create a toggle switch with CSS?
The switch button can be used to represent the on and off state for some functionalities. Sometimes the switch button can be used instead of radio buttons or checkboxes. In this tutorial, we will learn to create a toggle switch using CSS.
Toggle switch using CSS
To create a toggle switch first add an HTML checkbox using <input> tag with type="checkbox". Now we need to add the CSS properties to create it as a toggle switch. We will hide the default checkbox and add a slider to it.
- Use the
position property to position the slider with respect to the switch.
- Add the
height and width to the switch.
- Add a different
background-color to the slider to display the on-off state.
- Use the
transform property to add slide effect to the slider
We can use other CSS properties to customize the switch accordingly.
Example: Creating a toggle switch using CSS
In this example, we have created a toggle switch combining various CSS properties.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* CSS for switch*/
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hiding the default checkbox*/
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #cccccc;
-webkit-transition: .3s;
transition: .3s;
}
/* Before sliding */
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .3s;
transition: .3s;
}
input:checked + .slider {
background-color: #234567;
}
input:focus + .slider {
box-shadow: 0 0 1px #564311;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
</style>
</head>
<body>
<h1>Toggle Switch </h1>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</body>
</html>
Output
Here is the output of the above program.
Example: Toggle switch variations
We can add CSS property to add variation in switch buttons. Here, we have used border-radius property for the rounded switch.
Conclusion
In this tutorial, we have learned to create a toggle switch using CSS. The checkbox is modified using Various CSS properties to create a switch. We can add variations in the switch button too.
