CSS
body {
background: #bdc3c7;
}
.toggle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.toggle input[type="checkbox"] {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
z-index: -2;
border: none;
outline: none;
}
.toggle label {
width: 90px;
height: 50px;
border-radius: 50px;
position: absolute;
top: 0;
left: 0;
background: #fff;
transition: background .2s ease-in-out;
}
.toggle label:after {
content: '';
width: 50px;
height: 50px;
background: #3F4A63;
border-radius: 50%;
position: absolute;
top: 0;
left: -1px;
transition: all .2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.toggle input[type="checkbox"]:checked + label:after {
left : 42px;
}
.toggle input[type="checkbox"]:checked + label {
background: #3498db;
}
