∞ forever components

Buttons & Toggles

Sliding Fill

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

csslight complexitymoderate motionhover

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, hero sections, or any action button needing tactile hover feedback with strong color contrast.

When not to

Auto-cycle demo mode ships as-is — remove the setTimeout loop before production use. Avoid on light backgrounds without color adjustments.

Working with an AI agent

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

Change the gradient to a rose-to-orange sweep by setting --grad-iris-cyan to linear-gradient(120deg,#f43f5e,#fb923c), and slow the fill transition by changing --dur-slow to 800ms. 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

  • gradient colors (--grad-iris-cyan)
  • transition duration (--dur-slow: 520ms)
  • button padding and font size
  • filled text color (#0b0c12)
  • idle demo cadence (FILL_MS=1500 filled / REST_MS=1500 empty, first sweep after 300 ms)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • ::before pseudo-element slide pattern (translateX)
  • IIFE wrapper
  • prefers-reduced-motion guard
  • visibilitychange pause
  • .is-filled demo class sharing the :hover 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
  • Light re-theme via the [data-theme=light] token block; catalog bg/accent describe the dark default

buttongradientfillhoverslideui-controltransition

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.