What the Frontend? Open the interactive gallery →
Cursor & Pointer

Magnetic button

A button that moves to follow the cursor as it hovers nearby — snapping back on leave.

What you're seeing

Hover close to a CTA and the button slides toward you.

Where you'll see it

Primary CTAs, nav items, social icons.

Difficulty

Medium — 3/5

Libraries that build it

GSAPcustom JS

From the toolbox

React BitsThis gallery's effects as drop-in React components — split text, counters, auroras, magnets — free, animated, and pasteable.

Ready to prompt — paste this into your AI coding tool

"On mousemove within [threshold]px of button, offset button position toward cursor by 0.4× the distance, GSAP quickTo"

Related Cursor & Pointer effects

Magnetic cursorCustom cursorCursor trailCursor distortionHover tilt (3D card)Cursor spotlight
See the animated preview in the dictionary →