Component theme

Buttons & Toggles

11 components, each a single self-contained HTML file — no frameworks, no build step. Preview them here, or see them live on the canvas.

• Magnetic ButtonDark pill button drifts in an idle orbital float; cursor proximity pulls it magnetically with a label inner-parallax and emerald-to-copper glow on hover.
• Gooey Liquid TogglePill toggle where an SVG goo-filtered blob stretches and merges as it slides from off to on, shifting grey to magenta. Auto-cycles as demo.
• Morphing Action FABGradient FAB whose plus icon rotates 135° to an X on click, fanning six icon buttons outward in a staggered radial spring animation. Auto-cycles in demo mode.
• Material RippleDark rounded button that spawns an expanding ink ripple from the tap point; idles by firing ripples from random positions every 1.5 s.
• Neon Glow PulseAmber pill button on near-black that breathes a bright neon bloom via opacity pulse on a pseudo-element; hover shifts background and text color.
• Jelly PressAurora-gradient button squashes and stretches with a spring keyframe animation on click; auto-cycles idle squish every 2.1s to stay alive at rest.
• Stroke-Draw OutlineGhost button whose rounded-rect SVG border self-draws via stroke-dashoffset on hover; an idle loop auto-cycles draw/erase every ~2s.
• Sliding FillOutlined button where a copper-to-emerald gradient sweeps in from the left on hover, filling the button and flipping text dark. Auto-cycles as idle demo.
• Confetti BurstMagenta pill button fires 26 colorful confetti squares and circles in a physics arc on click; auto-bursts every 2.3 s as an idle demo loop.
• 3D Push ButtonMagenta-to-gold gradient button with a layered edge and drop shadow that depresses on press and springs back, mimicking a physical key. Auto-cycles as demo.
• Thanos Snap DeleteRed DELETE button that disintegrates into ~200 drifting dust particles on click. Particles drift right and fade; a Restore link resets the state.