<div class="container">
<input type="checkbox" id="switch"/>
<label for="switch" class="switch">
<div>
<ul class="top">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="bottom">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<span class="button"></span>
</div>
<span class="on"></span>
<span class="off"></span>
</label>
</div>
body {
background : #1b1b1b;
}
.container {
width : 400px;
height : 150px;
margin : 10px auto;
padding-top: 100px;
}
#switch {
position: absolute;
left: -9999px;
}
.switch {
display : block;
position : relative;
width : 190px;
height : 52px;
margin : auto;
border-radius : 25px;
box-shadow : 0 -2px 3px 0px rgba(0, 0, 0, 0.5) , 0 2px 3px 0px rgba(100, 100, 100, 0.5);
}
.switch > div {
overflow : hidden;
position : absolute;
width : inherit;
height : inherit;
border-radius: inherit;
}
.switch .top , .switch .bottom {
list-style-type : none;
position : absolute;
left : 7px;
width : 200px;
transition : all .5s linear;
}
.switch .top {
top : -5px;
transform : rotate(4deg);
}
.switch .bottom {
bottom : -5px;
transform : rotate(-4deg);
}
.switch li {
width : 15px;
height : 10px;
background : #fff;
float : left;
margin-left: 5px;
border-radius : 3px;
}
.top li {
box-shadow : inset 0 0 10px 1px rgba(0, 0, 0, 0.8),0 0 10px 2px #000;
}
.bottom li {
box-shadow : inset 0 0 10px 1px rgba(0, 0, 0, 0.3),0 0 10px 2px #000;
}
label .button {
display : block;
position : absolute;
width : 50px;
height : 50px;
top : 1px;
left : 0;
cursor : pointer;
border-radius : 50%;
background : #1b1b1b;
background-image : -webkit-linear-gradient(top, #32393a 10% , #1b1b1b 60% , ,#101718 100%);
box-shadow : inset 0 1px 1px 0 #999 , inset 0 -1px 1px 0 #000,inset 0 0 15px 0 rgba(0,255, 0, 0.2);
transition : left .5s linear , box-shadow .3s .2s linear;
}
label .button:after {
display : block;
content : '|||';
text-align : center;
line-height : 44px;
color : #000;
text-shadow : 1px 0 0 rgba(200, 200, 200, 0.2);
font-size : 25px;
font-weight : bold;
letter-spacing : 3px;
}
.on , .off {
display : block;
position: absolute;
width : 20px;
height : 20px;
border-radius : 50%;
top : -35px;
transition : all .2s .3s linear;
}
.on {
left : 20px;
background : #0F0;
box-shadow : inset 0 0 10px 2px #000,0 -1px 1px 1px #000,0 1px 1px 1px #333,0 0 30px 0 #0F0;
}
.off {
right : 20px;
background : #500;
box-shadow : inset 0 0 10px 2px #000,0 -1px 1px 1px #000,0 1px 1px 1px #333;
}
.on:before , .off:before {
position : absolute;
top : -30px;
font-size: 20px;
font-family : corbel;
transition : all .2s .3s linear;
}
.on:before {
content : 'on';
color : #FFF;
}
.off:before {
content : 'off';
color : rgba(250, 250, 250, 0.3);
}
#switch:checked + label .button {
left : 140px;
box-shadow : inset 0 1px 1px 0 #999 , inset 0 -1px 1px 0 #000,inset 0 0 15px 0 rgba(255, 0, 0, 0.2);
transition : left .5s linear , box-shadow .3s .2s linear;
}
#switch:checked + label .top {
transform : rotate(-4deg);
transition : all .5s linear;
}
#switch:checked + label .bottom {
transform : rotate(4deg);
transition : all .5s linear;
}
#switch:checked + label .on {
background : #050;
box-shadow : inset 0 0 10px 2px #000,0 -1px 1px 1px #000,0 1px 1px 1px #333;
transition : all .2s .3s linear;
}
#switch:checked + label .off {
background : #F00;
box-shadow : inset 0 0 10px 2px #000,0 -1px 1px 1px #000,0 1px 1px 1px #333,0 0 30px 0 #F00;
transition : all .2s .3s linear;
}
#switch:checked + label .on:before {
color : rgba(250, 250, 250, 0.3);
transition : all .2s .3s linear;
}
#switch:checked + label .off:before {
color : #FFF;
transition : all .2s .3s linear;
}
Also see: Tab Triggers