Switch Button dengan CSS dan Jquery

Kode Htmlnya :
<label>
<input type="checkbox" name="checkboxName" class="checkbox"/>
<div class="switch"></div>
</label>


Switch Containernya :
.switch 
{
width: 62px;
height: 32px;
background: #E5E5E5;
z-index: 0;
margin: 0;
padding: 0;
appearance: none;
border: none;
cursor: pointer;
position: relative;
border-radius:16px; //IE 11
-moz-border-radius:16px; //Mozilla
-webkit-border-radius:16px; //Chrome and Safari
}


.switch:before 
{
content: ' ';
position: absolute;
left: 1px;
top: 1px;
width: 60px;
height: 30px;
background: #FFFFFF;
z-index: 1;
border-radius:16px; //IE 11
-moz-border-radius:16px; //Mozilla
-webkit-border-radius:16px; //Chrome and Safari
}


.switch:after 
{
content: ' ';
height: 29px;
width: 29px;
border-radius: 28px;
z-index: 2;
background: #FFFFFF;
position: absolute;
-webkit-transition-duration: 300ms;
transition-duration: 300ms;
top: 1px;
left: 1px;
-webkit-box-shadow: 0 2px 5px #999999;
box-shadow: 0 2px 5px #999999;
}


Jika dijalankan, tampilannya sebagai berikut :

Download kode lengkapnya 
disini



Selesai
Semoga bermanfaat

sumber : http://9lessons.info