magnetic-button

Magnetic button

The primary CTA leans toward the cursor with its label moving a bit further, then springs back — playful, physical, and only where it matters.

All modern browsers. Mouse and pen only; touch devices get a normal button.

Use it for

The single most important CTA on the page
Playful or crafted brands where a bit of physics fits the voice

Don't — this is how it turns into slop

Every button or nav link — then nothing stands out and everything feels jittery
Serious flows (checkout, forms, destructive actions)

Accessibility

Disabled for prefers-reduced-motion and coarse pointers
The click target never moves away from the pointer — it moves toward it

Performance

One passive pointermove listener, work batched per animation frame, transform only

The code

/* Magnetic button — it drifts toward the cursor and its label drifts a
   little further, then springs back. One of these per page, max. */
.magnetic {
  --mx: 0px;
  --my: 0px;
  display: inline-block;
  transform: translate(var(--mx), var(--my));
  transition: transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.magnetic__label {
  display: inline-block;
  transform: translate(calc(var(--mx) * 0.4), calc(var(--my) * 0.4));
  transition: transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.magnetic.is-pulling,
.magnetic.is-pulling .magnetic__label {
  transition-duration: 0.12s;
  transition-timing-function: ease-out;
}

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .magnetic,
  .magnetic__label {
    transform: none !important;
  }
}

Which of these fit your site?

Scan your URL for free. The full review picks recipes for each section and hands your AI a complete design kit.

Check my site ↑