Power Icon Toggle Switch
A dark hardware switch whose knob carries the power symbol. Switch it on and the knob slides over, the symbol redraws in the accent with a glow, and a soft bloom of light rings out once.
Also known as: power toggle, power toggle switch css, on off power switch, power icon switch.
HTML
<label class="tgl-power-switch-toggle">
<input type="checkbox" role="switch" aria-label="Power">
<span class="tgl-power-switch-toggle-track" aria-hidden="true">
<span class="tgl-power-switch-toggle-knob">
<svg viewBox="0 0 24 24"><path class="tgl-power-switch-toggle-arc" pathLength="100" d="M7.05 6.46a8 8 0 1 0 9.9 0"/><path d="M12 3.5v8"/></svg>
</span>
</span>
</label>CSS
.tgl-power-switch-toggle {
--c: var(--tgl-color, #3b82f6);
font-size: var(--tgl-size, 24px);
position: relative;
display: inline-flex;
align-items: center;
vertical-align: middle;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
font-family: system-ui, sans-serif;
line-height: 1.2;
}
.tgl-power-switch-toggle input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.tgl-power-switch-toggle-track {
position: relative;
display: block;
width: 4.4em;
height: 2.2em;
border-radius: 99em;
background: linear-gradient(#202024, #121214);
box-shadow: inset 0 0.1em 0.25em rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.06), 0 0.3em 0.6em -0.3em rgb(0 0 0 / 0.4);
}
/* the lit groove */
.tgl-power-switch-toggle-track::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 0.09em var(--c), inset 0 0 0.9em color-mix(in srgb, var(--c) 55%, transparent), 0 0 0.8em color-mix(in srgb, var(--c) 35%, transparent);
opacity: 0;
transition: opacity 0.35s ease;
}
.tgl-power-switch-toggle-knob {
position: absolute;
top: 0.2em;
left: 0.2em;
display: grid;
place-items: center;
width: 1.8em;
height: 1.8em;
border-radius: 50%;
background: linear-gradient(160deg, #5b5b63, #34343a 70%);
box-shadow: inset 0 0.07em 0.05em rgb(255 255 255 / 0.25), 0 0.15em 0.3em rgb(0 0 0 / 0.5);
transition: transform 0.5s cubic-bezier(0.34, 1.3, 0.5, 1);
}
/* the bloom that rings out once on */
.tgl-power-switch-toggle-knob::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
border: 0.12em solid var(--c);
opacity: 0;
}
.tgl-power-switch-toggle-knob svg {
width: 1em;
height: 1em;
fill: none;
stroke: #8f8f98;
stroke-width: 2.6;
stroke-linecap: round;
transition: stroke 0.3s ease, filter 0.3s ease;
}
.tgl-power-switch-toggle-arc {
stroke-dasharray: 100;
}
.tgl-power-switch-toggle:active .tgl-power-switch-toggle-knob {
scale: 0.92;
}
.tgl-power-switch-toggle input:checked + .tgl-power-switch-toggle-track::before {
opacity: 1;
}
.tgl-power-switch-toggle input:checked + .tgl-power-switch-toggle-track .tgl-power-switch-toggle-knob {
transform: translateX(2.2em);
}
.tgl-power-switch-toggle input:checked + .tgl-power-switch-toggle-track .tgl-power-switch-toggle-knob::after {
animation: tgl-power-switch-toggle-bloom 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}
.tgl-power-switch-toggle input:checked + .tgl-power-switch-toggle-track svg {
stroke: color-mix(in srgb, var(--c) 70%, #fff);
filter: drop-shadow(0 0 0.15em var(--c));
}
.tgl-power-switch-toggle input:checked + .tgl-power-switch-toggle-track .tgl-power-switch-toggle-arc {
animation: tgl-power-switch-toggle-draw 0.7s cubic-bezier(0.6, 0, 0.2, 1) 0.15s both;
}
.tgl-power-switch-toggle input:focus-visible + .tgl-power-switch-toggle-track {
outline: 0.12em solid var(--c);
outline-offset: 0.2em;
}
@keyframes tgl-power-switch-toggle-bloom {
from { opacity: 0.9; transform: scale(1); }
to { opacity: 0; transform: scale(2.4); }
}
@keyframes tgl-power-switch-toggle-draw {
from { stroke-dashoffset: 100; }
to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
.tgl-power-switch-toggle *,
.tgl-power-switch-toggle *::before,
.tgl-power-switch-toggle *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-delay: 0s !important;
animation-iteration-count: 1 !important;
}
}
@media (prefers-reduced-motion: reduce) {
.tgl-power-switch-toggle, .tgl-power-switch-toggle *, .tgl-power-switch-toggle::before, .tgl-power-switch-toggle::after, .tgl-power-switch-toggle *::before, .tgl-power-switch-toggle *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--tgl-coloron the element or a parent. Currently previewing#3b82f6. - Size: set
--tgl-size. Every other dimension is inem, so the whole thing scales together. Currently previewing24px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.