buttonsIntermediatehover

Magnetic Button

A button that drifts toward the cursor on hover. Subtle and tactile.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a magnetic hover button: when the cursor moves inside it, the button (and its label) drift toward the cursor by ~25% of the offset, easing back when the cursor leaves. Pill shape, gradient background, single span inside.

Code

html

<!--
  Source: Tomas Pietravallo
  https://codepen.io/
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/magnetic-button
-->
<button class="magnetic"><span>Hover me</span></button>