HTML
<div class="toggle-container green">
<input class="toggle-checkbox" type="checkbox">
<div class="toggle-track">
<div class="toggle-thumb"></div>
</div>
</div>
<div class="toggle-container blue">
<input class="toggle-checkbox" type="checkbox">
<div class="toggle-track">
<div class="toggle-thumb"></div>
</div>
</div>
<div class="toggle-container boo">
<input class="toggle-checkbox" type="checkbox">
<div class="toggle-track">
<div class="toggle-thumb"></div>
</div>
</div>
CSS
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1em;
min-height: 100vh;
font-size: 2em;
}
@function em($pixels) {
@if not (unit($pixels) == 'px') {
@error 'Property #{$pixels} must have `px` unit.';
}
@return $pixels / 16px * 1em;
}
.toggle-container {
position: relative;
border-radius: em(50px);
width: em(52px);
height: em(30px);
}
.toggle-checkbox {
-webkit-appearance: none;
appearance: none;
position: absolute;
z-index: 1;
border-radius: inherit;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.toggle-track {
display: flex;
align-items: center;
position: relative;
border-radius: inherit;
padding: em(4px);
width: 100%;
height: 100%;
background-color: #aeaeae;
box-shadow: inset 0 em(1px) em(2px) rgb(0 0 0 / .2);
transition: background-color .4s linear;
.toggle-container.green > .toggle-checkbox:checked + & {
background-color: #4ccf59;
}
.toggle-container.blue > .toggle-checkbox:checked + & {
background-color: #3384fb;
}
.toggle-container.boo > .toggle-checkbox:checked + & {
background-color: #ff3372;
}
}
.toggle-thumb {
position: relative;
border-radius: em(11px);
transform-origin: left;
width: em(22px);
height: em(22px);
background-color: #fff;
box-shadow:
0 em(4px) em(4px) rgb(0 0 0 / .2),
inset 0 em(-2px) em(4px) rgb(0 0 0 / .2),
;
.toggle-checkbox.toggled-once + .toggle-track > & {
animation-name: grow-out, bounce-out;
animation-duration: .2s;
animation-timing-function: cubic-bezier(.75, 0, 1, 1), cubic-bezier(0, 0, 0.3, 1.5);
animation-delay: 0s, .2s;
animation-fill-mode: forwards;
}
.toggle-checkbox.toggled-once:checked + .toggle-track > & {
animation-name: grow-in, bounce-in;
}
.toggle-container.boo & {
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
border-radius: inherit;
width: 100%;
height: 100%;
background-image: url('https://assets.codepen.io/4175254/boo-face.png');
background-size: (14 * 100 / 22 * 1%) (12 * 100 / 22 * 1%);
background-position: center;
background-repeat: no-repeat;
box-shadow: inset 0 em(-2px) em(4px) rgb(0 0 0 / .2);
image-rendering: pixelated;
opacity: 0;
transition: opacity .2s linear;
@at-root {
.toggle-container.boo > .toggle-checkbox:checked + .toggle-track > .toggle-thumb::after {
opacity: 1;
}
@media (hover: hover) {
.toggle-container.boo > .toggle-checkbox:hover + .toggle-track > .toggle-thumb::after {
opacity: 1;
}
}
}
}
}
}
@keyframes grow-in {
0% {
border-radius: em(11px);
transform: translateX(0) scale(1);
}
100% {
border-radius: em(1 / (34 / 22) * 11px) #{'/'} em(1 / (16 / 22) * 11px);
transform: translateX(em(8px)) scale((34 / 22), (16 / 22));
}
}
@keyframes bounce-in {
0% {
border-radius: em(1 / (34 / 22) * 11px) #{'/'} em(1 / (16 / 22) * 11px);
transform: translateX(em(8px)) scale((34 / 22), (16 / 22));
}
100% {
border-radius: em(11px);
transform: translateX(100%) scale(1);
}
}
@keyframes grow-out {
0% {
border-radius: em(11px);
transform: translateX(100%) scale(1);
}
100% {
border-radius: em(1 / (34 / 22) * 11px) #{'/'} em(1 / (16 / 22) * 11px);
transform: translateX(em(2px)) scale((34 / 22), (16 / 22));
}
}
@keyframes bounce-out {
0% {
border-radius: em(1 / (34 / 22) * 11px) #{'/'} em(1 / (16 / 22) * 11px);
transform: translateX(em(2px)) scale((34 / 22), (16 / 22));
}
100% {
border-radius: em(11px);
transform: translateX(0) scale(1);
}
}
JavaScript
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const detectToggleOnce = (e) => {
e.target.classList.add('toggled-once');
};
checkboxes.forEach(checkbox => {
checkbox.addEventListener('click', detectToggleOnce, { once: true });
});