Live preview Checkboxes
Paw Print Toggle
A grayscale paw-print emoji fills in and pads down with a warm glow when toggled on.
#switch CSS effects
19 free, pure-CSS effects match the "switch" tag. Each is copy-ready and needs no library or build step.
Live preview Checkboxes
X Mark Toggle
A square that reveals a red X mark when toggled on — the inverse of a checkmark.
Live preview Toggles
Airplane Mode
Signal bars disappear and an airplane swoops in when airplane mode is on.
Live preview Toggles
Battery Charge Level
Battery fill bar collapses to a low red sliver when off, full green when on.
Live preview Toggles
Binary 0 / 1
Terminal-style toggle highlighting the active digit in green monospace.
Live preview Toggles
Bluetooth On / Off
Slide knob with a Bluetooth rune; a red slash cuts through it when disabled.
Live preview Toggles
Blur Filter Toggle
Text label behind the knob blurs out of focus when the filter is enabled.
Live preview Toggles
Live preview Toggles
Circle Expand Fill
A circle expands from the knob to fill the entire track when toggled.
Live preview Toggles
Eye Open / Closed
An eyelid slides down to close the eye when toggled off, with pupil shift.
Live preview Toggles
Follow / Unfollow Heart
A gray heart pulses red and scales up with a glow when you follow.
Live preview Toggles
Minimal Line Toggle
Ultra-minimal outline toggle where only the knob border and track line shift.
Live preview Toggles
Pill Morph Toggle
Track morphs from pill to square corners and changes color when toggled.
Live preview Toggles
Live preview Toggles
Smooth iOS Slide
Classic iOS-style toggle with a smooth knob slide and color fade.
Live preview Toggles
True / False Boolean
Monospace T/F letters light up in red or green as the knob slides.
Live preview Toggles
Volume Knob Bars
Knob slides across an equalizer-style track; bars gray out when muted.
Live preview Toggles
Live preview Toggles
Yes / No Switch
Green YES and red NO labels flank a sliding knob that changes color.