∞ forever components

Buttons & Toggles

Magnetic Button

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

cssmedium complexitysubtle motionpointer

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 on dark hero sections or landing pages where tactile interactivity signals quality.

When not to

Dense form layouts or light backgrounds — glow and drift assume a dark surface and open space around the button.

Working with an AI agent

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

Change the idle drift amplitude from 14/9 to 6/4 for a subtler float, and set accent color to #ff6b6b by replacing #2BAB6B throughout. 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

  • magnetic pull strength (strength = 0.4)
  • idle orbit amplitude (cos/sin multipliers 14, 9, 5, 3)
  • orbit speed (e*0.9, e*0.7, e*0.37, e*1.3)
  • gradient accent colors (--grad-iris-cyan)
  • button label text ('Hover me')
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion guard (reduce check before apply)
  • visibilitychange stop/start loop
  • label inner-parallax (separate transform on .c01-mag__label)
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • CSS transition on transform fights the rAF loop when exiting hover — works fine visually but two systems control transform simultaneously
  • Magnetic effect applies only within the button bounding box, not a wider attraction radius

buttonmagnetichovergloworbitalui-controlpointer

More Buttons & Toggles components

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