Pure CSS3 On-Off Switch
css turns a checkbox into an on-off slider.
css turns a checkbox into an on-off slider.
<ul id="sliders">
<ul id="sliders">
<li>
<input type="checkbox" id="slider1" checked="checked" /><label for="slider1"></label>
</li>
<li>
<input type="checkbox" id="slider2" /><label for="slider2"></label>
</li>
</ul>
: 120;
120;:
0;:
body {
background-image: linear-gradient(#eee, #aaa);
}
#sliders {
margin: 40% 40%;
list-style: none;
}
li { margin-bottom: .5em; }
input[type=checkbox] {
visibility: hidden;
}
label {
border: 1px solid #666;
display: inline-block;
width: 4em;
height: 1.5em;
border-radius: .5em;
background: #ccd;
box-shadow: .2em .2em .3em #aab inset, -.2em -.2em .3em #eef inset;
}
label:hover {
border-color: #66d;
}
label:after{
content: '';
display: block;
background: #333;
border-radius: .3em;
height: .3em;
width: 2.5em;
margin-left: .75em;
margin-top: -.95em;
}
label:before {
content: '';
display: inline-block;
border-radius: 50%;
width: 1.25em;
height: 1.25em;
margin-top: .15em;
margin-left: .15em;
background: hsl( , 100%, 40%);
box-shadow: .1em .1em .1em hsl( , 100%, 90%) inset, -.1em -.1em .1em hsl( , 100%, 10%) inset;
transition: all .5s ease;
}
input:checked + label:before {
background: hsl( , 100%, 40%);
box-shadow: .1em .1em .1em hsl( , 100%, 90%) inset, -.1em -.1em .1em hsl( , 100%, 10%) inset;
margin-left: 2.6em;
}