∞ forever components

Buttons & Toggles

Jelly Press

Aurora-gradient button squashes and stretches with a spring keyframe animation on click; auto-cycles idle squish every 2.1s to stay alive at rest.

csslight complexitymoderate motionclick

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

CTA buttons, interactive demos, any UI needing tactile press feedback with lively personality.

When not to

Forms where animation distracts from input focus; remove the idle auto-cycle loop before shipping in production.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Change the button label to 'Get Started', swap the gradient to linear-gradient(135deg,#E8AB30,#C08459), and slow the squish duration to 0.7s. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

  • button label text ('Press me')
  • aurora gradient (--grad-aurora)
  • squish duration (0.5s)
  • idle loop interval (2100ms)
  • border-radius (--r-md: 14px)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • void btn.offsetWidth restart trick (forces animation restart)
  • IIFE wrapper
  • prefers-reduced-motion guard
  • visibilitychange stop/start
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Auto-cycles idle squish by default — remove loop() call before production use
  • Gradient is CSS background so no direct text contrast check; dark text (#0b0c12) may fail on pale gradient ends

buttonjellysquishspringauroragradientmicrointeraction

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.
  • 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.