Simple CSS3 Toggle Switch Button
CSS Simple Toggle Switch Button: some time we use JavaScript to make custom checkbox, toggle switch button etc.. here I have made good tutorial of toggle switch button using HTML input Checkbox and css, we do not need to use JavaScript for switch button. It’s working with checkbox functionality.
Now enjoy the this tutorial and make your one good custom switch button using with input checkbox and css.
Demo
Common Switch Demo
The HTML Common Markup
<label class="switch"> <input class="switch-input" type="checkbox" /> <span class="switch-label" data-on="On" data-off="Off"></span> <span class="switch-handle"></span> </label>
The Common CSS
<style>
.switch {
position: relative;
display: block;
vertical-align: top;
width: 100px;
height: 30px;
padding: 3px;
margin: 0 10px 10px 0;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
box-sizing:content-box;
}
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
box-sizing:content-box;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
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: #E1B42B;
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);
}
/* Transition
========================== */
.switch-label, .switch-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>
Example 1 - Switch Left Right Demo
The HTML Markup
<label class="switch switch-left-right"> <input class="switch-input" type="checkbox" /> <span class="switch-label" data-on="On" data-off="Off"></span> <span class="switch-handle"></span> </label>
The CSS
<style>
/* Switch Left Right
==========================*/
.switch-left-right .switch-label {
overflow: hidden;
}
.switch-left-right .switch-label:before, .switch-left-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-right .switch-label:before {
background: #eceeef;
text-align: left;
padding-left: 80px;
}
.switch-left-right .switch-label:after {
text-align: left;
text-indent: 9px;
background: #FF7F50;
left: -100px;
opacity: 1;
width: 100%;
}
.switch-left-right .switch-input:checked ~ .switch-label:before {
opacity: 1;
left: 100px;
}
.switch-left-right .switch-input:checked ~ .switch-label:after {
left: 0;
}
.switch-left-right .switch-input:checked ~ .switch-label {
background: inherit;
}
</style>
Example 2 - Switch Flat Demo
The HTML Markup
<label class="switch 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>
The CSS
<style>
/* 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: #0088cc;
}
.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: #0088cc;
}
.switch-flat .switch-input:checked ~ .switch-handle {
left: 72px;
background: #0088cc;
box-shadow: none;
}
</style>
Example 3 -Switch Yes No Demo
The HTML Markup
<label class="switch switch-yes-no"> <input class="switch-input" type="checkbox" /> <span class="switch-label" data-on="Yes" data-off="No"></span> <span class="switch-handle"></span> </label>
The CSS
<style>
/* 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>
Example 4 -Switch Slide Demo
The HTML Markup
<label class="switch switch-slide"> <input class="switch-input" type="checkbox" /> <span class="switch-label" data-on="Yes" data-off="No"></span> <span class="switch-handle"></span> </label>
The CSS
<style>
/* 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: #87CEEB;
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: #0088cc;
}
.switch-slide .switch-input:checked ~ .switch-label:before {
left: 100px;
}
.switch-slide .switch-input:checked ~ .switch-label:after {
left: 0;
}
</style>
Example 5 -Switch Light Demo
The HTML Markup
<label class="switch 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>
The CSS
<style>
/* 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: #9370DB;
}
.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: #9370DB;
}
.switch-light .switch-input:checked ~ .switch-handle {
left: 72px;
box-shadow: none;
background: #9370DB
}
.switch-light .switch-input:checked ~ .switch-handle:before {
background: rgba(255,255,255,0.7);
}
</style>
CSS3 Toggle Switch Button is a Good working in all most latest browser like Chrome, Safari, Firefox, IE 10.0+, Opera etc..