How to design css3 toggle switch button
In this post, we will discuss How to design css3 toggle switch button. sometimes we use JavaScript to make a custom toggle switch button, checkbox, etc. In this tutorial, we have made a toggle switch button using the HTML input checkbox and CSS. we can not use JavaScript for the switch button. It’s an example of working with checkbox functionality.
Now, we will start the tutorial and make your one good custom switch button using checkbox and CSS.
Demo
How to design css3 toggle switch button
- Simple Switch
- Switch Left to Right
- Only switch Flat
- Switch Yes No
- Switch Slide
- Switch Light
- conclusion
1. Simple Switch
Output
Simple Switch
Example
<!DOCTYPE html>
<html>
<head>
<title>How to design css3 toggle switch button - devnote.in </title>
<style>
.switch_btn {
position: relative;
display: block;
vertical-align: top;
width: 100px;
border-radius: 18px;
margin: 0 10px 10px 0;
height: 30px;
cursor: pointer;
padding: 3px;
box-sizing:content-box;
}
.switch_input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
box-sizing:content-box;
}
.switch_label {
position: relative;
display: block;
font-size: 10px;
text-transform: uppercase;
border-radius: inherit;
height: inherit;
background: #eceeef;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing:content-box;
}
.switch_label:before, .switch_label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
box-sizing:content-box;
}
.switch_label:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch_label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch_input:checked ~ .switch_label {
background: #00ff37;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch_input:checked ~ .switch_label:before {
opacity: 0;
}
.switch_input:checked ~ .switch_label:after {
opacity: 1;
}
.switch_handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch_handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch_input:checked ~ .switch_handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch_label, .switch_handle {
transition: All 0.5s ease;
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
}
</style>
</head>
<body>
<h2>Simple Switch</h2>
<label class="switch_btn">
<input class="switch_input" type="checkbox" />
<span class="switch_label" data-on="On" data-off="Off"></span>
<span class="switch_handle"></span>
</label>
</body>
</html>2. Switch Left to Right
Output
Switch Left to Right
Example
<!DOCTYPE html>
<html>
<head>
<title>How to design css3 toggle switch button - devnote.in </title>
<style>
.switch_btn {
position: relative;
display: block;
vertical-align: top;
width: 100px;
border-radius: 18px;
margin: 0 10px 10px 0;
height: 30px;
cursor: pointer;
padding: 3px;
box-sizing:content-box;
}
.switch_input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
box-sizing:content-box;
}
.switch_label {
position: relative;
display: block;
font-size: 10px;
text-transform: uppercase;
border-radius: inherit;
height: inherit;
background: #eceeef;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing:content-box;
}
.switch_label:before, .switch_label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
box-sizing:content-box;
}
.switch_label:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch_label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch_input:checked ~ .switch_label {
background: #00ff37;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch_input:checked ~ .switch_label:before {
opacity: 0;
}
.switch_input:checked ~ .switch_label:after {
opacity: 1;
}
.switch_handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch_handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch_input:checked ~ .switch_handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch_label, .switch_handle {
transition: All 0.5s ease;
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
}
/* Switch left to right */
.switch_left_to_right .switch_label {
overflow: hidden;
}
.switch_left_to_right .switch_label:before, .switch_left_to_right .switch_label:after {
width: 20px;
height: 20px;
top: 4px;
left: 0;
right: 0;
bottom: 0;
padding: 11px 0 0 0;
text-indent: -12px;
border-radius: 20px;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1);
}
.switch_left_to_right .switch_label:before {
background: #eceeef;
text-align: left;
padding-left: 80px;
}
.switch_left_to_right .switch_label:after {
text-align: left;
text-indent: 9px;
background: #00ff37;
left: -100px;
opacity: 1;
width: 100%;
}
.switch_left_to_right .switch_input:checked ~ .switch_label:before {
opacity: 1;
left: 100px;
}
.switch_left_to_right .switch_input:checked ~ .switch_label:after {
left: 0;
}
.switch_left_to_right .switch_input:checked ~ .switch_label {
background: inherit;
}
</style>
</head>
<body>
<h2>Switch Left to Right</h2>
<label class="switch_btn switch_left_to_right">
<input class="switch_input" type="checkbox" />
<span class="switch_label" data-on="On" data-off="Off"></span>
<span class="switch_handle"></span>
</label>
</body>
</html>3. Only switch Flat
Output
Only switch Flat
Example
<!DOCTYPE html>
<html>
<head>
<title>How to design css3 toggle switch button - devnote.in </title>
<style>
.switch_btn {
position: relative;
display: block;
vertical-align: top;
width: 100px;
border-radius: 18px;
margin: 0 10px 10px 0;
height: 30px;
cursor: pointer;
padding: 3px;
box-sizing:content-box;
}
.switch_input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
box-sizing:content-box;
}
.switch_label {
position: relative;
display: block;
font-size: 10px;
text-transform: uppercase;
border-radius: inherit;
height: inherit;
background: #eceeef;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing:content-box;
}
.switch_label:before, .switch_label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
box-sizing:content-box;
}
.switch_label:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch_label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch_input:checked ~ .switch_label {
background: #00ff37;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch_input:checked ~ .switch_label:before {
opacity: 0;
}
.switch_input:checked ~ .switch_label:after {
opacity: 1;
}
.switch_handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch_handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch_input:checked ~ .switch_handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch_label, .switch_handle {
transition: All 0.5s ease;
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
}
/* Only switch Flat */
.switch_flat {
padding: 0;
background: #FFF;
background-image: none;
}
.switch_flat .switch_label {
background: #FFF;
border: solid 2px #eceeef;
box-shadow: none;
}
.switch_flat .switch_label:after {
color: #00ff37;
}
.switch_flat .switch_handle {
top: 6px;
left: 6px;
background: #dadada;
width: 22px;
height: 22px;
box-shadow: none;
}
.switch_flat .switch_handle:before {
background: #eceeef;
}
.switch_flat .switch_input:checked ~ .switch_label {
background: #FFF;
border-color: #00ff37;
}
.switch_flat .switch_input:checked ~ .switch_handle {
left: 72px;
background: #00ff37;
box-shadow: none;
}
</style>
</head>
<body>
<h2>Only switch Flat</h2>
<label class="switch_btn switch_flat">
<input class="switch_input" type="checkbox" />
<span class="switch_label" data-on="On" data-off="Off"></span>
<span class="switch_handle"></span>
</label>
</body>
</html>4. Switch Yes No
Output
Switch Yes No
Example
<!DOCTYPE html>
<html>
<head>
<title>How to design css3 toggle switch button - devnote.in </title>
<style>
.switch_btn {
position: relative;
display: block;
vertical-align: top;
width: 100px;
border-radius: 18px;
margin: 0 10px 10px 0;
height: 30px;
cursor: pointer;
padding: 3px;
box-sizing:content-box;
}
.switch_input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
box-sizing:content-box;
}
.switch_label {
position: relative;
display: block;
font-size: 10px;
text-transform: uppercase;
border-radius: inherit;
height: inherit;
background: #eceeef;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing:content-box;
}
.switch_label:before, .switch_label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
box-sizing:content-box;
}
.switch_label:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch_label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch_input:checked ~ .switch_label {
background: #00ff37;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch_input:checked ~ .switch_label:before {
opacity: 0;
}
.switch_input:checked ~ .switch_label:after {
opacity: 1;
}
.switch_handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch_handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch_input:checked ~ .switch_handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch_label, .switch_handle {
transition: All 0.5s ease;
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
}
/* Switch Yes No */
.switch_yes_no {
padding: 0;
margin: 15px 0 0;
background: #FFF;
border-radius: 0;
background-image: none;
}
.switch_yes_no .switch_label {
box-shadow: none;
background: none;
}
.switch_yes_no .switch_label:after, .switch_yes_no .switch_label:before {
width: 100%;
height: 70%;
top: 5px;
left: 0;
text-align: center;
padding-top: 10%;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1);
}
.switch_yes_no .switch_label:after {
color: #FFFFFF;
background: #32CD32;
backface-visibility: hidden;
transform: rotateY(180deg);
}
.switch_yes_no .switch_label:before {
background: #eceeef;
backface-visibility: hidden;
}
.switch_yes_no .switch_handle {
display: none;
}
.switch_yes_no .switch_input:checked ~ .switch_label {
background: #FFF;
border-color: #0088cc;
}
.switch_yes_no .switch_input:checked ~ .switch_label:before {
transform: rotateY(180deg)
}
.switch_yes_no .switch_input:checked ~ .switch_label:after {
transform: rotateY(0)
}
</style>
</head>
<body>
<h2>Switch Yes No</h2>
<label class="switch_btn switch_yes_no">
<input class="switch_input" type="checkbox" />
<span class="switch_label" data-on="On" data-off="Off"></span>
<span class="switch_handle"></span>
</label>
</body>
</html>5. Switch Slide
Output
Switch Slide
Example
<!DOCTYPE html>
<html>
<head>
<title>How to design css3 toggle switch button - devnote.in </title>
<style>
.switch_btn {
position: relative;
display: block;
vertical-align: top;
width: 100px;
border-radius: 18px;
margin: 0 10px 10px 0;
height: 30px;
cursor: pointer;
padding: 3px;
box-sizing:content-box;
}
.switch_input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
box-sizing:content-box;
}
.switch_label {
position: relative;
display: block;
font-size: 10px;
text-transform: uppercase;
border-radius: inherit;
height: inherit;
background: #eceeef;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing:content-box;
}
.switch_label:before, .switch_label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
box-sizing:content-box;
}
.switch_label:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch_label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch_input:checked ~ .switch_label {
background: #00ff37;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch_input:checked ~ .switch_label:before {
opacity: 0;
}
.switch_input:checked ~ .switch_label:after {
opacity: 1;
}
.switch_handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch_handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch_input:checked ~ .switch_handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch_label, .switch_handle {
transition: All 0.5s ease;
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
}
/* Switch Slide */
.switch_slide {
padding: 0;
margin: 15px 0 0;
background: #FFF;
border-radius: 0;
background-image: none;
}
.switch_slide .switch_label {
box-shadow: none;
background: none;
overflow: hidden;
}
.switch_slide .switch_label:after, .switch_slide .switch_label:before {
width: 100%;
height: 65%;
top: 5px;
left: 0;
text-align: center;
padding-top: 10%;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1);
}
.switch_slide .switch_label:after {
color: #FFFFFF;
background: #00ff37;
left: -100px;
}
.switch_slide .switch_label:before {
background: #eceeef;
}
.switch_slide .switch_handle {
display: none;
}
.switch_slide .switch_input:checked ~ .switch_label {
background: #FFF;
border-color: #00ff37;
}
.switch_slide .switch_input:checked ~ .switch_label:before {
left: 100px;
}
.switch_slide .switch_input:checked ~ .switch_label:after {
left: 0;
}
</style>
</head>
<body>
<h2>Switch Slide</h2>
<label class="switch_btn switch_slide">
<input class="switch_input" type="checkbox" />
<span class="switch_label" data-on="On" data-off="Off"></span>
<span class="switch_handle"></span>
</label>
</body>
</html>6. Switch Light
Output
Switch Light
Example
<!DOCTYPE html>
<html>
<head>
<title>How to design css3 toggle switch button - devnote.in </title>
<style>
.switch_btn {
position: relative;
display: block;
vertical-align: top;
width: 100px;
border-radius: 18px;
margin: 0 10px 10px 0;
height: 30px;
cursor: pointer;
padding: 3px;
box-sizing:content-box;
}
.switch_input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
box-sizing:content-box;
}
.switch_label {
position: relative;
display: block;
font-size: 10px;
text-transform: uppercase;
border-radius: inherit;
height: inherit;
background: #eceeef;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing:content-box;
}
.switch_label:before, .switch_label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
box-sizing:content-box;
}
.switch_label:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch_label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch_input:checked ~ .switch_label {
background: #00ff37;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch_input:checked ~ .switch_label:before {
opacity: 0;
}
.switch_input:checked ~ .switch_label:after {
opacity: 1;
}
.switch_handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch_handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch_input:checked ~ .switch_handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch_label, .switch_handle {
transition: All 0.5s ease;
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
}
/* Switch Light */
.switch_light {
padding: 0;
background: #FFF;
background-image: none;
}
.switch_light .switch_label {
background: #FFF;
border: solid 2px #eceeef;
box-shadow: none;
}
.switch_light .switch_label:after {
color: #00ff37;
}
.switch_light .switch_label:before {
right: inherit;
left: 11px;
}
.switch_light .switch_handle {
top: 6px;
left: 72px;
background: #dadada;
width: 22px;
height: 22px;
box-shadow: none;
}
.switch_light .switch_handle:before {
background: #eceeef;
}
.switch_light .switch_input:checked ~ .switch_label {
background: #FFF;
border-color: #00ff37;
}
.switch_light .switch_input:checked ~ .switch-handle {
left: 72px;
box-shadow: none;
background: #00ff37
}
.switch_light .switch_input:checked ~ .switch-handle:before {
background: rgba(255,255,255,0.7);
}
</style>
</head>
<body>
<h2>Switch Light</h2>
<label class="switch_btn switch_light">
<input class="switch_input" type="checkbox" />
<span class="switch_label" data-on="On" data-off="Off"></span>
<span class="switch_handle"></span>
</label>
</body>
</html>7. Conclusion
CSS3 Toggle Switch Button is beautiful without bootstrap use and Good working in all the latest browsers like Firefox, Chrome, Safari, IE 10.0+, Opera, etc…
