CSS:
input[type=checkbox].switch{
outline: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
position: relative;
width: 5rem;
height: 2.7rem;
border-radius: 50px;
border: 1px solid #ccc;
background-color: #ccc;
}
input[type=checkbox].switch::after{
content: '';
display: inline-block;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 2px #999;
transition: left 0.1s linear;
position: absolute;
top: 0;
left: 0;
}
input[type=checkbox].switch:checked{
background-color: #1ab394;
}
input[type=checkbox].switch:checked::after{
position: absolute;
top: 0;
left: 50%;
}
HTML:
<input type="checkbox" class="switch">