Cursor

Magnetic Button

Also called Magnetic target, Magnetic hover

The element is pulled toward the pointer as it comes close, then snaps back when it leaves.

CTA buttons, nav icons

  • Magnetic Button
  • Cursor: Magnetic target
  • Codrops magnetic buttons

View demo source

Prompt

Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.

Add a "Magnetic Button" effect (also called a magnetic target or magnetic hover) to [where].
As the pointer comes close, the button should be pulled a little toward it with its label moving slightly further, and when the pointer leaves it should spring back to its place with a small bounce.
Keep the surrounding layout from shifting, and turn the pull off on touch devices and for users who prefer reduced motion.

Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.