← All effects
Magnetic Button
-- fps
prefers-reduced-motion detected — button stays put
X-ray · layers
button leans toward cursor
label moves a bit further
bouncy snap-back
Parameters
Strength0.35
Radius140 px
Text shift0.50
Bounciness0.85
your version · updates as you tinker
How this effect works
A magnetic button is a button with a target position that follows your cursor. Every frame it measures the distance between the cursor and its own center; if you're inside the RADIUS (the dashed ring above), the target moves toward you by STRENGTH — a fraction of that distance. Outside the ring, the target snaps back to zero.
The trick that makes it feel expensive is the spring return layer: instead of teleporting to the target, the button carries velocity and overshoots a little before settling — classic spring physics in four lines of code. The text parallax layer moves the label slightly further than the button itself, which fakes depth, like the label is floating above the surface. Turn each layer off above and feel the difference.
Production notes: respects prefers-reduced-motion (button stays static) · negligible cost — one element, one transform per frame · works on any element, not just buttons: try it on icons or cards · on touch screens there is no hover, so the effect simply does nothing — safe by default · the copied snippet is self-contained HTML + CSS + JS.