2019-11-23
Perfect toggle switch
There are many toggle switches out there built with pure CSS but often they are really fancy with animations and a long code. I made a minimal "perfect" toggle switch with just the basics.
HTML
<label for="switch">
<input type="checkbox" id="switch">
<div></div>
</label>
CSS
label {
background: #ddd;
display: inline-flex;
width: 4rem;
height: 2rem;
border-radius: 100vh;
}
input {
display: none;
}
label div {
width: calc(50% - 8px);
background: #0056de;
border-radius: 100vh;
margin: 4px;
}
input:checked + div {
margin-left: auto;
}
Sources
Comments