∞ forever components

Buttons & Toggles

Magnet Family

Five wordless disc buttons in matte clay, sand, sage, slate and dusty blue that lean toward the pointer or finger and toward each other, then spring home; a press squashes and settles.

cssmedium complexitymoderate motionpointer+keyboardmobile-readyaccessible

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 →
1

When to use it

Landing heroes and first-screen rows where icon actions should feel alive on first hover or touch.

When not to

Dense toolbars, forms or anywhere buttons must not move under the pointer.

Working with an AI agent

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

Matte paper register (clay, sand, sage, slate, dusty blue on #1C1B18 / #F4F1EA). Edit --mf-* tokens and the five icon SVGs; radius() and the 0.42 neighbour pull tune the magnet.

Safe to edit

  • --mf-* tokens
  • icon SVGs
  • radius() and neighbour pull

Keep intact

  • IIFE + prefix, reduced-motion, visibilitychange, theme hook, demo-v1

Known limitations

  • Demo state resets on remount

magneticspring-physicsicon-buttonstouchfirst-touch

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; cycles autonomously until first deliberate input idle squish…