Loading…
Live component · try it
Freebutton · hover · dark
Magnetic Button
A pill button that leans toward the pointer once it comes within 120 px, its label sliding a little further than the pill so the two layers part, with a soft accent glow bleeding out behind it. Leave the radius and both spring home on a long elastic ease. Touch and reduced-motion users get the plain button with its hover colour.
The mechanic
Inside the radius the pill translates by 35 % of the pointer offset and scales up to 5 %; the label translates by 12 %, so it lags behind the pill and the button feels like two layers of different weight. Outside the radius both snap to zero through a 0.9 s `cubic-bezier(0.16, 1, 0.3, 1)` transition, which overshoots once and settles: the spring is the CSS easing, not a physics loop. While near, the transition shortens to 0.12 s linear so the pull tracks the pointer without lag.
How to use it
From prompt to a block in your page.
- 01Try the component
The preview is the shipped element inside a neutral demo page. Hover, click, focus: the one interaction it is about is live.
- 02Pick a palette
Token sets re-tint it live. The prompt carries the one you chose.
- 03Pick your stack
A paste-in snippet, or a component for Next.js, React, Vue, Astro, WordPress, Shopify or Webflow.
- 04Copy the prompt
It quotes the markup, styles and script verbatim with the tokens and the rules that keep it self-contained.
- 05Mount it in your layout
It inherits your page's font and width; the tokens live on :root; several instances share one script.
