Toggle switch
A switch whose knob slides and squishes slightly, with the track colour easing between states.
CSSBeginner
<label class="switch"><input type="checkbox"><span class="track"><span class="knob"></span></span>Notifications</label>.switch{display:inline-flex;align-items:center;gap:14px;cursor:pointer;font-size:1.1rem}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.track{position:relative;width:64px;height:36px;border-radius:999px;background:#4a2e2a;transition:background .3s}
.knob{position:absolute;left:4px;top:4px;width:28px;height:28px;border-radius:50%;background:#fff;
transition:transform .4s cubic-bezier(.34,1.56,.64,1),width .2s}
.switch:active .knob{width:36px}
input:checked+.track{background:#f08a5d}
input:checked+.track .knob{transform:translateX(28px)}
.switch:active input:checked+.track .knob{transform:translateX(20px)}
input:focus-visible+.track{outline:2px solid #f08a5d;outline-offset:4px}<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Toggle switch</title>
<style>
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{display:grid;place-items:center;background:#140807;color:#fffffc;font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
.switch{display:inline-flex;align-items:center;gap:14px;cursor:pointer;font-size:1.1rem}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.track{position:relative;width:64px;height:36px;border-radius:999px;background:#4a2e2a;transition:background .3s}
.knob{position:absolute;left:4px;top:4px;width:28px;height:28px;border-radius:50%;background:#fff;
transition:transform .4s cubic-bezier(.34,1.56,.64,1),width .2s}
.switch:active .knob{width:36px}
input:checked+.track{background:#f08a5d}
input:checked+.track .knob{transform:translateX(28px)}
.switch:active input:checked+.track .knob{transform:translateX(20px)}
input:focus-visible+.track{outline:2px solid #f08a5d;outline-offset:4px}
</style></head>
<body>
<label class="switch"><input type="checkbox"><span class="track"><span class="knob"></span></span>Notifications</label>
</body></html>Good for
Settings screens and on/off controls. Built on a real checkbox so it works with keyboards and screen readers.
Watch out for
Hide the checkbox visually, never with display none, so it stays focusable.
Accessibility
Wrap motion in @media (prefers-reduced-motion: reduce) and switch it off or shorten it for people who ask for less movement.