∞ forever components

Buttons & Toggles

3D Push Button

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

csslight complexitysubtle 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

CTAs, form submit buttons, or any action trigger that benefits from tactile physical feedback.

When not to

Passive display contexts — remove the auto-cycle setTimeout 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 'Subscribe', update the gradient to linear-gradient(120deg,#f97316,#ec4899), and increase the idle press interval from 1800ms to 3000ms. 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 (Push down text)
  • gradient colors (--grad-iris-cyan)
  • press depth (translateY -7px face / 8px shadow)
  • edge background color (#A18794 / #C0B459)
  • idle demo cadence (DEMO_EVERY=3000 ms between presses, HOLD_MS=450 ms depressed)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion guard (transition-duration:.001ms)
  • visibilitychange pause
  • three-layer structure (shadow / edge / face)
  • .is-pressed demo class sharing the :active rules + takeover on real hover/press/focus
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Idle demo cycle runs by default (real input takes over, resumes after a few idle seconds) — remove the demo block for purely on-demand interaction
  • Edge color is a static dusty-mauve/gold pair and must be updated manually if gradient changes

button3dpresstactilemicrointeractiongradientui-control

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; auto-cycles idle squish every 2.1s to stay alive at rest.