console
<label class="checkbox">
<input checked type="checkbox">
<div></div>
</label>
.checkbox{
display: block;
width: 63px;
height: 32px;
position: relative;
}
.checkbox input{
opacity: 1;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.checkbox div{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 16px;
border: 1px solid #DFDFDF;
position: relative;
background: #ffff;
-webkit-transition: background-color .1s, border 0.1s;
transition: background-color .1s, border 0.1s;
}
.checkbox div:after{
display: block;
content: "";
width: 32px;
height: 32px;
background: #fff;
border-radius: 15px;
position: absolute;
top: 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
}
.checkbox input:checked ~ div{
border-color: #008fd0;
background-color: #00b0ff;
}
.checkbox input:checked ~ div:after{
-webkit-transform: translateX(31px)
}