<div class="checkBox">
<input type="checkbox" id="check1">
<label for="check1"></label>
</div>
*{
padding:;
margin:;
}
.checkBox{
width:20px;
margin:20px;
position:relative;
}
.checkBox label{
position:absolute;
left:;
top:;
width:20px;
height:20px;
cursor:pointer;
background:linear-gradient(to top,# %,#45484d %);
border-radius:4px;
box-shadow: inset 0px 1px 1px rgba(,,,0.5), 0px 1px 0px rgba(,,,.);
}
.checkBox label:after{
position:absolute;
top:4px;
left:4px;
content:'';
width:9px;
height:5px;
background:transparent;
border:3px solid #fcfff4;
transform:rotate(-45deg);
border-top:;
border-right:;
opacity:;
}
input[type=checkbox]:checked +label:after{
opacity:;
}
<div class="checkbox2">
<input type="checkbox" id="check2">
<label for="check2"></label>
</div>
.checkbox2{
width:80px;
height:26px;
background:#;
margin:20px;
position:relative;
border-radius:50px;
box-shadow:inset 0px 1px 1px rgba(,,,0.4),0px 1px 0px rgba(,,,0.2);
}
.checkbox2:after{
content:'OFF';
color:#;
position:absolute;
right:10px;
z-index:;
font-size:12px;
line-height:26px;
text-shadow:1px 1px 0px rgba(,,,.);
}
.checkbox2:before{
content:'ON';
color:#27ae60;
position:absolute;
left:10px;
z-index:;
font-size:12px;
line-height:26px;
}
.checkbox2 label{
display:block;
width:34px;
height:20px;
cursor:pointer;
position:absolute;
top:3px;
left:3px;
z-index:;
background:#fcfff4;
background: linear-gradient(top, #fcfff4 %, #dfe5d7 %, #b3bead %);
border-radius: 50px;
box-shadow: 0px 2px 5px 0px rgba(,,,0.3);
trnasition:all .4s ease;
}
.checkbox2 input[type=checkbox]{
visibility:hidden;
}
.checkbox2 input[type=checkbox]:checked +label{
left:43px;
}
