Magnetic Button
磁吸按钮
Aliases:磁吸按钮磁性按钮按钮被鼠标吸过去鼠标靠近按钮偏移magnetic effect磁力吸附
What is it
As the cursor approaches, the button is pulled toward it like iron to a magnet, then springs home on leave. The offset is computed from cursor-to-center distance and usually clamped to 8–20px. A tactile desktop flourish common on portfolios and creative sites.
Interactive playground
Try it. Make an informed choice.Loading demo…
✓ When to use
- A few key targets — landing-page CTAs, nav icons
- Creative or portfolio sites leaning into personality
- Desktop-first layouts with room to move
✕ When not to use
- Touch devices — no hover, no effect
- Form controls and dense toolbars — offset ruins aiming
- Magnetizing every button on the page — dizzying and cheap
Variants
Translate follow
平移跟随
The whole button translates toward the cursor
Layered follow
按钮与文字分层跟随
The label travels further than the shell — parallax
Magnet + tilt
磁吸 + 微倾斜
Adds subtle rotateX/Y for depth
Implementation
transform: translatetransitionmousemovegetBoundingClientRectListen for mousemove on a hotspot wrapping the button; derive the cursor's offset ratio from center via getBoundingClientRect, multiply by max travel (e.g. 0.3 × 40px) and write it to `transform: translate`. On mouseleave, return to zero with a springy 300–500ms transition (cubic-bezier(.2,.8,.3,1.2)); shorten to ~100ms while inside so the follow feels sticky. Disable on touch behind @media (hover:hover).
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Add a magnetic interaction to the project's primary CTA buttons. Confirm button component structure and accent tokens first; stay consistent. Requirements: - Hotspot 1.5x button size; offset capped at 12px; 100ms follow, 400ms spring - Keyboard focus and touch behavior unaffected - Respect prefers-reduced-motion - No new dependencies Run existing checks when done and list modified files. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
On hover, a card or button lifts slightly (translateY -2–6px) while its shadow deepens — as if raised by an invisible hand. The most common desktop affordance for "this is clickable": nearly free, instantly adds depth and life.
MotionSimilarWhen users press a clickable element it scales down slightly (typically 0.95–0.98) and springs back on release. A few tens of milliseconds that make a UI feel like physical buttons instead of flat web pages.
MotionSimilarOn hover, a soft glow blooms around the element's edges — an outer box-shadow or radial gradient tinted with the brand accent. Unlike a shadow's physical lift, glow signals energy and interactivity; common on dark UIs, gaming products and neon-style buttons.
MotionSimilarThe element overshoots its resting point and oscillates once or twice before settling — a springy "boing". It injects physics and playfulness, best saved for success states, reward moments and branded entrances.
MotionSimilar