Loading...
Creates a toggle switch with CSS only.
HTML
<input type="checkbox" class="off" id="toggle"/>
<label for="toggle" class="switch"></label>
CSS
.switch {
background-color: rgba(0, 0, 0, 0.25);
border-radius: 22px;
display: inline-block;
height: 22px;
position: relative;
transition: all 0.5s;
width: 42px;
}
.switch::after {
background-color: white;
border-radius: 20px;
content: '';
height: 20px;
left: 1px;
position: absolute;
top: 1px;
transition: all 0.3s;
width: 20px;
}
input[type='checkbox']:checked + .switch::after {
transform: translateX(20px);
}
input[type='checkbox']:checked + .switch {
background-color: green;
}
.off {
left: -9999px;
position: absolute;
}CodePen link here: https://codepen.io/criscond/pen/mdPmZZP