<html> <label class="container"> <input type="checkbox"> <span class="background"></span> <span class="mask"></span> </label> </html>
.container { display: block; position: relative; width: 55px; height: 30px; margin: 50px auto; } .container > input[type = checkbox] { display: none; } .background { display: block; position: absolute; width: 100%; height: 100%; background-color: white; border-radius: 30px; transition: 0.25s; border: 2px solid #eeeeee; } .mask { display: block; position: absolute; width: 30px; height: 30px; background-color: white; box-shadow: 1px 1px 3px silver; border-radius: 50%; left: 2px; top: 2px; transition: 0.25s; cursor: pointer; } .container > input[type = checkbox]:checked + .background { background-color: #4cd964; border-color: #4cd964; } .container > input[type = checkbox]:checked ~ .mask { left: 27px; }