Buttons & Toggles
Crate Magnetic Button
Call-to-action pill with damped-spring pointer attraction, specular glare sweep, and subtle idle attract orbit.
csslight complexitymoderate motionpointermobile-readyaccessible
Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited
1
When to use it
Hero CTAs, primary playback triggers, and tactile action buttons.
When not to
Dense icon toolbars or crowded data tables.
Working with an AI agent
Every component ships agent-ready metadata. An example instruction for this one:
Edit --b/--i/--c/--l tokens in :root and [data-theme="light"].
Safe to edit
- theme CSS tokens (--b/--i/--c/--l), data arrays & timings
Keep intact
- IIFE + crNN- prefix, reduced-motion, visibilitychange, theme/demo-v1
Known limitations
- Demo state resets on remount
More Buttons & Toggles components
- 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; cycles autonomously until first deliberate input idle squish…