Create a switch (checkbox) : Web development Tutorials

Learn the easiest way to make a working pure case checkbox which is Microsoft inspired. Created with css library  pure css.
The codepen project is here

<input type="checkbox" class="c"/>

.c{
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
width:60px;
height:30px;
background:#ddd;
border-radius:30px;
transition:background 0.09s ease-in-out;
color:#fff;
outline: none;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
.c:checked {
background:#3af;
}
.c::after {
content:'';
width:30px;
height:30px;
background:#fff;
border-radius:50%;
transform:scale(0.8);
position:absolute;
left:0;
top:0;
transition:left 0.09s ease-in-out;
box-shadow:1px 1px #ccc;
}
.c:checked::after{
left:30px;
}