CSS Toggles & Switches Effects

iOS-style toggle that slides a knob and lights up blue when on. Shown in both ON and OFF states with labels.

Square-edged switch with an ocean gradient knob that slides horizontally. Shown in both states with labels.

Round toggle whose blue knob glows and emits a halo when on. Shown in both states with labels.

Two-position light/dark switch with an ocean thumb that springs between the sun and moon.

Real <input type="checkbox"> styled with a blue fill and a checkmark that springs in — keyboard focus included.

Light / Auto / Dark segmented control with an ocean pill that springs between radios.

Track carrying its own ON and OFF words, cross-faded rather than translated, with a real checkbox behind it so it keeps focus and keyboard toggling.

Plan picker where the whole card is the label and the radio dot scales in on an overshoot, so the selection has weight without a layout change.

Track carrying a tick and a cross drawn from borders, cross-faded so state is legible without relying on colour alone.

IEC power glyph as the control itself, the broken ring and its stem lighting together and the housing picking up an ambient glow so the off state is unmistakably dead.

Hardware-style control turning through 240 degrees of its detent ring, the pointer riding the body so the value is read where the mark meets the ticks.

Show/hide password toggle where a closed eyelid opens and an indigo pupil pops in when checked.

Wide switch that carries the words ON and OFF inside its track, each sliding out of view as the knob takes its place.

A ceiling lamp with a beaded pull chain that stretches downward when you take hold of it, lighting the bulb to amber and dropping a soft cone of light onto the floor below.

Three exclusive options as real radios, so arrow keys move between segments — a row of buttons would need a Tab stop each.

Toggle whose knob carries a spinner once flipped, for settings that persist over the network and are not actually on until the server says so.

Grouped options under a select-all whose indeterminate state is a bar rather than a tick, the one case a checkbox has three readings.

Parent control in the mixed state its children actually put it in — the tick collapsed to a dash rather than swapped for a different glyph — with the tally spelled out beside it.

Preference rows where the whole line is the target and the thumb stretches under the pointer before it travels, so the switch feels pressed rather than clicked.

Physical O/I rocker switch that tips over in perspective and lights its orange side when checked.

Speaker control whose equaliser bars bounce while sound is on, then flatten as a red slash strikes across on mute.

A hazard-striped guard hinged along its top edge that swings up and away before the lever underneath can throw, at which point the lever rides to the top of its slot and the status lamp goes green.

A square thumb in a square track that slides across, spins and morphs into a circle inside a fuchsia pill when checked.

Checkbox that floods with teal liquid rising on a curved surface, the tick springing in once the box is full.

Two toothed wheels sitting idle in grey until the switch engages, when they take on cyan and turn against each other, the smaller one running faster as their teeth interlock.

Favorite toggle whose star fills amber, spins into place and fires an expanding ring when checked.

Row of filter chips that flip to a solid green pill and grow a tick from nothing as each one is selected.

A deliberate confirmation control whose knob has to travel the full length of the track, dragging a green fill behind it while the shimmering prompt gives way to the completed label.

A grey padlock whose shackle lifts and swings open, turning the body emerald when unlocked.

Hollow outline switch that ignites like a cyan neon tube, with a glowing thumb, when checked.