How To Create Toggle Switch by using HTML and CSS?
A toggle switch allows users to switch between two states, typically “on” and “off,” and is commonly used in forms and interactive elements. To create a toggle switch, we will use HTML and CSS. We can add different styles to the checkbox element to create a toggle switch.
1. Basic Circular Toggle Switch
The simplest way to create a toggle switch is to use an HTML checkbox input and style it with CSS to look like a switch.
<h2>Basic Toggle Switch</h2>
<label class="toggle-switch">
<input type="checkbox" />
<span class="slider"></span>
</label>
/* Container for the toggle */
.toggle-switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
/* Hide default checkbox */
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The track */
.slider {
position: absolute;
cursor: pointer;
background-color: #ccc;
border-radius: 24px;
width: 100%;
height: 100%;
transition: background-color 0.3s;
}
/* The circular slider */
.slider::before {
content: "";
position: absolute;
height: 20px;
width: 20px;
left: 4px;
bottom: 2px;
background-color: white;
border-radius: 50%;
transition: transform 0.3s;
}
/* Toggled state */
.toggle-switch input:checked+.slider {
background-color: #4caf50;
}
.toggle-switch input:checked+.slider::before {
transform: translateX(26px);
}
Output: Using transform and translateX, we can shift the circular slider when the checkbox is checked.
Create Toggle Switch by using HTML and CSS
2. Square Toggle Switch
For a modern look, let’s create a square toggle switch by adjusting the border-radius properties.
<h3>Square Toggle Switch</h3>
<label class="toggle-switch square">
<input type="checkbox">
<span class="slider"></span>
</label>
.toggle-switch {
position: relative;
display: inline-block;
width: 60px;
height: 30px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.square .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.4s;
border-radius: 4px;
}
.square .slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 2px;
bottom: 2px;
background-color: white;
transition: 0.4s;
border-radius: 0;
}
.square input:checked+.slider {
background-color: #4caf50;
}
.square input:checked+.slider:before {
transform: translateX(30px);
}
Explanation
- .square .slider: Removes full rounding from the switch track and gives a slight rounding of 4px for a softer square.
- .square .slider:before: Makes the toggle button a square with border-radius: 0
Output
Create Toggle Switch by using HTML and CSS
HTML and CSS both are foundation of webpages. HTML is used for webpage development by structuring websites, web apps and CSS used for styling websites and webapps. You can learn more about HTML and CSS from the links given below:
