Magnetic Button

A playful magnetic button that gently pulls toward your cursor as you move nearby, then springs back with a bouncy ease when you leave. Adjustable pull strength included.

magnetic-button-preview

Magnetic pull: 40%

Why it helps: Magnetic hover effects are a signature move on award-winning sites. This gives you the pointer-tracking math and spring-back easing pre-built, with zero extra dependencies.

Source

components/live/MagneticButton.tsx

Usage

example.tsx

Props

className

string

Optional CSS class to add to the root container

initialStrength

number

Initial magnetic pull strength (0.1–0.8)

label

string

Button label before click

clickedLabel

string

Button label after click