Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create Toggle Switch Using HTML and CSS
To create toggle switch by using HTML and CSS, we will be using simple HTML input elements and CSS for styling the toggle box to make it user intercative. A toggle switch is a graphical user interface element that allows users to toggle between two states, usually 'on' and 'off'. In this article we are going to understand how to create toggle switch by using HTML and CSS.
We are having an input tag with type attribute value as checkbox. Our task is to design this checkbox and create a toggle switch by using HTML and CSS. We will be following two step process for this:
- Creating structure of checkbox using HTML
- Adding CSS to design and style checkbox to create toggle button
Step 1 - Add HTML
We have added a checkbox using input tag with type attribute value as checkbox. We have also added two span tags in which span tag with class name toggle-label acts as background of toggle switch showing on and off labels. The other span tag with class name toggle-handle is used for movable knob of the switch.
<html>
<head>
<title>
Create toggle switch by using HTML and CSS
</title>
<body>
<h3>
Toggle Switch by using HTML and CSS
</h3>
<p>
</p>
<label class="toggle">
<input class="toggle-input" type="checkbox"/>
<span class="toggle-label" data-off="OFF"
data-on="ON">
</span>
<span class="toggle-handle"></span>
</label>
</body>
</html>
Step 2 - Add CSS
We have used following steps to design toggle button:
- We have used toggle class to design the toggle button container by setting it's dimension using height and width, changing cursor to pointer, setting the padding and using display property to display as block element.
- We have used toggle-input class to hide checkbox using opacity property and set it's position using top, left and position property.
- We have used toggle-label class to style label and switch's background by setting it's color, size and border radius.
- We have used before and after psuedo elements to set the margin and show the off and on states using data-off and data-on value using content property and attr() function.
- We have used toggle-input:checked~.toggle-label class to change the background-color when switch is toggled and used psuedo elements on it to set opacity to show on and off when toggled.
- We have used toggle-handle class to design the circular handle of switch and used psuedo- elements to set it's style before and after toggling on and off.
- We have used toggle-label,toggle-handle classes to set the transition while switching between on and off using transition property.
Here is the CSS code implementing above mentioned steps.
body {
text-align: center;
}
.toggle {
position: relative;
display: block;
width: 80px;
height: 40px;
padding: 3px;
margin: auto;
border-radius: 50px;
cursor: pointer;
}
.toggle-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.toggle-label {
position: relative;
display: block;
height: inherit;
font-size: 14px;
background: #3c024a;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12),
inset 0 0 3px rgba(0, 0, 0, 0.15);
}
.toggle-label:before, .toggle-label:after {
position: absolute;
top: 50%;
color: black;
margin-top: -.5em;
line-height: 1;
}
.toggle-label:before {
content: attr(data-off);
right: 10px;
color: #fff;
}
.toggle-label:after {
content: attr(data-on);
left: 12px;
color: #fff;
opacity: 0;
}
.toggle-input:checked~.toggle-label {
background: green;
}
.toggle-input:checked~.toggle-label:before {
opacity: 0;
}
.toggle-input:checked~.toggle-label:after {
opacity: 1;
}
.toggle-handle {
position: absolute;
top: 4px;
left: 4px;
width: 38px;
height: 38px;
background: linear-gradient(to bottom,
#FFFFFF 40%, #f0f0f0);
border-radius: 50%;
}
.toggle-handle:before {
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 16px;
height: 16px;
}
.toggle-input:checked~.toggle-handle {
left: 43.5px;
box-shadow: -1px 1px 5px
rgba(0, 0, 0, 0.2);
}
.toggle-label,
.toggle-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
Complete Example Code
Here is the complete code To create toggle switch by using HTML and CSS.
<html>
<head>
<title>
Create toggle switch by using HTML and CSS
</title>
<style>
body {
text-align: center;
}
.toggle {
position: relative;
display: block;
width: 80px;
height: 40px;
padding: 3px;
margin: auto;
border-radius: 50px;
cursor: pointer;
}
.toggle-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.toggle-label {
position: relative;
display: block;
height: inherit;
font-size: 14px;
background: #3c024a;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12),
inset 0 0 3px rgba(0, 0, 0, 0.15);
}
.toggle-label:before, .toggle-label:after {
position: absolute;
top: 50%;
color: black;
margin-top: -.5em;
line-height: 1;
}
.toggle-label:before {
content: attr(data-off);
right: 10px;
color: #fff;
}
.toggle-label:after {
content: attr(data-on);
left: 12px;
color: #fff;
opacity: 0;
}
.toggle-input:checked~.toggle-label {
background: green;
}
.toggle-input:checked~.toggle-label:before {
opacity: 0;
}
.toggle-input:checked~.toggle-label:after {
opacity: 1;
}
.toggle-handle {
position: absolute;
top: 4px;
left: 4px;
width: 38px;
height: 38px;
background: linear-gradient(to bottom,
#FFFFFF 40%, #f0f0f0);
border-radius: 50%;
}
.toggle-handle:before {
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 16px;
height: 16px;
}
.toggle-input:checked~.toggle-handle {
left: 43.5px;
box-shadow: -1px 1px 5px
rgba(0, 0, 0, 0.2);
}
.toggle-label,
.toggle-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
</style>
</head>
<body>
<h3>
Toggle Switch by using HTML and CSS
</h3>
<label class="toggle">
<input class="toggle-input" type="checkbox" />
<span class="toggle-label" data-off="OFF"
data-on="ON">
</span>
<span class="toggle-handle"></span>
</label>
</body>
</html>
Conclusion
To create toggle switch by using HTML and CSS is a simple process that can add a lot of value to your website or application. By following these steps and experimenting with different CSS properties, we can create a toggle switch that is unique, visually appealing, and easy to use.
17K+ Views
