What is a magnetic button?

A button that eases toward the pointer and returns when you leave.

How far should it move?

A few pixels. If it leaves its slot, people miss.

Does it work on touch?

No. Hover never arrives. Keep the still state honest.

Should the label move too?

The whole control, as one piece. Split the label and it reads as a glitch.

If a new page loads, it is a link. The pull does not change that. Read Button.

Magnetic button

A magnetic button eases a little toward the pointer, then settles back when you leave.

Buttons and controlsBuild difficulty: Easygsap.quickTo

Also called Magnetic hover, Button magnetism, Cursor attract button.

Here it is working.

Move over the pill. It leans, then comes home.

For designers

The label still does the work. The pull is a hint, not a grab. If the button has to chase the pointer across the card, you have gone too far.

Use this when

There is one primary action on a quiet hero.
The button already has room around it.
Hover can exist. This is a pointer trick.

Reach for something else when

The click loads another page and the control is really a link. Style a link. See the Button page on 02ui.com/components/button/.
You have a row of actions. Magnetism on every one is noise.
The action is delete, pay, or send. Do not make those playful.
The person is on a phone. There is no hover. Ship the still button.

How to build it

Track the pointer while it is over the button. Move the button a few pixels toward that point, with a short ease. On leave, ease it home. Cap the travel. If reduced motion is on, skip the pull.

Official GSAP

gsap.quickTo.

const xTo = gsap.quickTo(btn, 'x', { duration: 0.4, ease: 'power3' });
const yTo = gsap.quickTo(btn, 'y', { duration: 0.4, ease: 'power3' });
xTo((pointerX - centerX) * 0.35);

Every plugin ships in the public GSAP package. Nothing here is copied from a paid pack.

Common questions

What is a magnetic button?: A button that eases toward the pointer and returns when you leave.
How far should it move?: A few pixels. If it leaves its slot, people miss.
Does it work on touch?: No. Hover never arrives. Keep the still state honest.
Should the label move too?: The whole control, as one piece. Split the label and it reads as a glitch.
Button or link?: If a new page loads, it is a link. The pull does not change that. Read Button.

Save as skill

A SKILL.md for this one animation: what it is, the official docs link, and a copy-paste block with the reduced-motion branch already in it. Copy gives you the same words.

Use this with your AI

Save the skill, drop it into Cursor, Claude, or whatever you use, and ask for this motion. That is all. The skill tells the agent to open this page, watch the working demo, and match it.

Last reviewed 26 AUG 2026

Next: Background fill button