Magnetic hover
A button that drifts a few pixels toward the nearby cursor, as though the pointer is gently pulling it.
See it
What it is
Magnetic hover makes a control drift toward the pointer before the pointer reaches its center, as if the two attract each other. Pointer distance supplies the direction and strength; a spring or eased transform softens the movement, and the control returns to rest when the pointer leaves its activation radius.
Reach for it on one or two prominent calls to action, icon buttons, or portfolio navigation where a tactile cursor response fits the tone. The best version moves only a few pixels and may shift an inner label a little more than its background, creating depth without making the target hard to catch.
Gotcha: moving the actual hit target creates a button that runs away from the cursor. Keep the outer interactive box stationary and transform an inner visual layer. Enable it only for hover-capable fine pointers, preserve normal focus and keyboard behavior, and disable the attraction under prefers-reduced-motion.
Ask AI for it
Add a magnetic hover to this button with the Pointer Events API. Listen for pointermove on a stationary wrapper that extends 48px around the button, keep the actual hit area fixed, and translate only an inner visual layer by 20% of the pointer's delta from center, capped at 10px per axis. Smooth it with requestAnimationFrame, return to translate(0, 0) on pointerleave, and run it only inside (hover: hover) and (pointer: fine), with no movement under prefers-reduced-motion.