Buttons that earn the click.
Seven buttons translated from the curated reference list to vanilla HTML, CSS, and GSAP. Flip the theme at the top right to see every button reskin to the active palette.
Hold and Release Confirm
Use for destructive actions. The label is locked, the press fills the bar, and the action only fires when the bar completes. Built so the text cannot be selected on any device.
When to use. Anywhere a misclick would cost the user. Delete account, cancel subscription, sign a contract.
Why it works. The press is intentional, not accidental. The label cannot be selected, copied, or dragged. The bar reads as progress, not as a target.
Glow Button
A primary call to action that broadcasts importance. The halo breathes, the conic ring rotates, and a click ripple confirms the press.
When to use. The single primary action on a hero or a paid offer. Never more than one per viewport.
Why it works. Always in motion, always reads as the answer. The ripple confirms the press without waiting on the network.
Bookmark with Particle Burst
A delight micro interaction. Click to save, the icon fills, a halo flashes, and seven particles fly out radially. Click again to unsave.
When to use. Anywhere the user collects, follows, or favorites. Article saves, product wishlists, course tracking.
Why it works. The burst is a tiny reward. It tells the user the system heard them without a toast or a sound.
Animated Hamburger
A three line icon that morphs into an X. Three SVG paths driven entirely by aria-expanded, no JS keyframing.
When to use. Mobile and desktop nav toggles. Drawer triggers. Anywhere the same control opens and closes.
Why it works. One control, two clearly different states. The transition makes the open and close action feel committed.
Animated Generate Button
A primary action with a rotating gradient ring. Click to flip into a busy state, the ring keeps spinning, and a shimmer sweeps the label.
When to use. AI primary actions, video renders, async jobs. Anywhere the user kicks off a longer task.
Why it works. The ring already promises work in progress before the request lands. The shimmer absorbs latency.
Bluetooth Style Key Button
A retro chunky physical button. The cap depresses on press, the LED lights up gold, and a soft halo blooms under it.
When to use. Smart home toggles, hardware controls, kiosk inputs, anywhere a chunky tactile cap reads as a real switch.
Why it works. The depth and the LED give the user mechanical feedback. The state is unmistakable.