20 Pure CSS Toggles & Switches
Advertisement
A CSS toggle (or switch) is the binary on/off control most often used for settings — distinct from a checkbox by its visual emphasis on the current state. These 20 hand-coded toggles are accessible, keyboard-friendly, and zero-JS — copy the markup, label the state, and ship.
01 / 20
Haptic Keys
Pure CSS 
Chunky square key with a 3D press-depth shadow and a glowing accent ring on activate. Pressing literally sinks the button 3px while the hard bottom shadow collapses — pure tactile button metaphor for tactile UI trends.
02 / 20
Waveform Toggle
Pure CSS 
Static audio bars spring to life with staggered breathing animations when toggled on. The track border and indicator dot pulse with an ice-cyan glow. Audio-visual data physicality — toggle = sound on/off.
03 / 20
Timed Toggle
Pure CSS 
An SVG arc fills around a circle when the toggle activates, visualising session time. Temporal UI for progress-aware states — users see state over time, not just on/off. The ember glow signals an active countdown.
04 / 20
Biometric Scan
Pure CSS 
A scanline sweeps top-to-bottom, corner brackets glow lilac, and the icon ring lights up when activated. Identity-first UI for auth flows — the toggle becomes a scan target instead of a switch.
05 / 20
Split-Flap Board
Pure CSS 
A retro-mechanical airport departure board built from CSS-only rotateX flips. Toggling cycles both rows simultaneously — OFFLINE flips to ONLINE, STANDBY flips to ACTIVE — with each character flipping in sequence for the cascading split-flap feel.
06 / 20
Permission Stack
Pure CSS 
Grouped consent UI with mini pill toggles inside stacked bordered rows. Each row independently grants or revokes a permission — the icon and label brighten and the pill switches to brand-green when granted. The dominant trust-first UI pattern replacing modal popups.
07 / 20
iOS
Pure CSS 
The reference iOS-style pill toggle — translucent track, white thumb with a subtle drop shadow, smooth slide on toggle. Honors prefers-reduced-motion.
08 / 20
Material Design
Pure CSS 
Google Material Design 3 switch — track with rounded thumb that lifts and changes colour on toggle. Active state shows a filled icon-style indicator.
09 / 20
Skeuomorphic Light Switch
Pure CSS 
A physical rocker light switch — brushed metal bezel, plastic rocker that tilts on toggle, subtle shadow that deepens when pressed. Heavy realism, satisfying click.
10 / 20
Neon Cyber
Pure CSS 
A glowing neon outline toggle — dark track with a cyan thumb that pulses with a soft glow when active. Futuristic dashboard aesthetic.
11 / 20
Brutalist
Pure CSS 
Hard edges, no shadows, monospace label, raw markup feel. The track and thumb are pure rectangles. A counterpoint to polished SaaS-style toggles.
12 / 20
Day / Night
Pure CSS 
A dark-mode toggle that morphs from a sun in a sky-blue track to a crescent moon over a deep night track. The most "what does this control" pattern in the bunch.
13 / 20
Flip Card
Pure CSS 
A 3D flip toggle — front face shows OFF, back face shows ON. Rotates around the Y axis on toggle. Showcases transform-style: preserve-3d.
14 / 20
Sliding Pill with Label
Pure CSS 
A track containing both labels (ON / OFF) with a thumb that slides over the active one. Common SaaS-dashboard pattern — the label IS the indicator.
15 / 20
Glassmorphism
Pure CSS 
A frosted-glass pill with a backdrop-blurred thumb. The colored backdrop tints the glass; the thumb floats above it. Modern dark-mode aesthetic.
16 / 20
Skeuomorphic Knob
Pure CSS 
A brushed-metal rotary knob that physically rotates 90 degrees on toggle. Different motion type from the sliding switches — rotation as the state signal. Tick marks anchor the dial.
17 / 20
iOS Light Mode
Pure CSS 
The iOS toggle in its light-theme presentation — clean white card backdrop, soft gray off-state, signature green on-state. Counterpart to demo 1.
18 / 20
Outline
Pure CSS 
A pure-stroke toggle — track and thumb are outlines only, no fills. When toggled on, the thumb fills with brand color. Minimalist; pairs with the brutalist demo.
19 / 20
Bouncy Pebble
Pure CSS 
A chunky outlined toggle with an organic "pebble" thumb shape built from 8-value border-radius syntax. Bouncy springy transition with anticipation + overshoot. Track and thumb swap colors on each state. The reference for hand-crafted, designer-drawn toggles — distinctive from every other demo in the collection.
Advertisement
FAQ
Frequently asked questions
How do I make a toggle switch in pure CSS?
Start from a real input type=checkbox — visually hide it but keep it in the DOM — and style a sibling label as the track, with a ::before or ::after pseudo-element as the sliding knob. The :checked pseudo-class moves the knob and recolours the track. All 20 switches here use this checkbox-driven pattern, so they stay accessible while looking fully custom.
What's the difference between a toggle switch and a checkbox?
Functionally they're the same control — both are an input type=checkbox under the hood. The difference is meaning and visuals: a checkbox suits 'select this option' choices, often in a group you submit later; a toggle switch suits an instant on/off setting (like dark mode or notifications) that takes effect immediately. A switch is just a checkbox styled to look like a physical switch.
Can a CSS toggle switch work without JavaScript?
Yes — all 20 toggles here are 100% pure CSS, zero JavaScript. The hidden checkbox's :checked state drives the entire animation: the knob slide, track colour, and any glow or bounce all come from input:checked ~ label rules.
Are these CSS toggle switches accessible?
Yes. Every switch keeps the real input type=checkbox (visually hidden, never display:none, so it stays focusable), tied to a label. Keyboard users Tab to it and toggle with Space, a visible focus state is provided, and continuous motion honours prefers-reduced-motion. For a true switch role, add role='switch' and aria-checked on real applications.
Can I use these toggle switches in React or other frameworks?
Yes. Each toggle is plain HTML and CSS — no dependencies, no build step. Drop the markup into React (use className and htmlFor), Vue, Svelte, Astro or static HTML and it works unchanged. All 20 designs are MIT licensed and free for commercial use.
Related collections
22 CSS Button Group Designs
22
22 dynamic CSS button groups with motion-driven interactions — plasma loops, holographic gradients, magnetic discs, wormhole tabs, particle aurora. Pure CSS or light JS, copy-paste ready.
button group css button group segmented control
Responsive
43 CSS Button Designs
43
43 hand-coded CSS buttons — real-world materials like brushed brass and vinyl, interactive use-case buttons (add-to-cart, download, like, delete), and click-effect studies: magnetic mercury ripple, brutalist glitch, neon plasma burst, clay press, ink spread, and particle shards.
buttons hover animation
Responsive
20 CSS Cards with Animations
20
20 hand-crafted CSS card components — aurora glow, 3D tilt, glassmorphism, neon borders, flip card, pricing, terminal, music player, weather widget and more.
cards components animation
Responsive