ButtonsPointer

Magnetic Buttons

Buttons that subtly pull toward the pointer for tactile calls to action.

Effect guide

Copy the magnetic buttons effect

What it is: Buttons that subtly pull toward the pointer for tactile calls to action.

Where to use it: Use this motion pattern for calls to action, sign-up flows, command buttons, and compact product moments.

Supported formats: React, Vue, Vanilla JS.

Explore Button Effects

"use client";

import { useEffect, useRef } from "react";

export default function MagneticButton() {
  const buttonRef = useRef(null);
  const targetRef = useRef({ x: 0, y: 0 });
  const currentRef = useRef({ x: 0, y: 0 });

useEffect(() => {
    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduceMotion) return;
    const button = buttonRef.current;
    if (!button) return;

const config = {
      label: "Explore effect",
      bgColor: "#3b82f6",
      textColor: "#ffffff",
      radius: 220,
      strength: 0.35,
      smoothing: 0.16
    };

const onMove = (event) => {
      const rect = button.getBoundingClientRect();
      const centerX = rect.left + rect.width / 2;
      const centerY = rect.top + rect.height / 2;
      const distance = Math.hypot(event.clientX - centerX, event.clientY - centerY);

if (distance > config.radius) {
        targetRef.current = { x: 0, y: 0 };
        return;
      }

const influence = 1 - distance / config.radius;
      targetRef.current = {
        x: (event.clientX - centerX) * config.strength * influence,
        y: (event.clientY - centerY) * config.strength * influence
      };
    };

const onLeave = () => {
      targetRef.current = { x: 0, y: 0 };
    };

window.addEventListener("pointermove", onMove);
    window.addEventListener("pointerleave", onLeave);
    let frame = requestAnimationFrame(animate);

return () => {
      cancelAnimationFrame(frame);
      window.removeEventListener("pointermove", onMove);
      window.removeEventListener("pointerleave", onLeave);
    };
  }, []);

return (
    <button
      ref={buttonRef}
      style={{
        background: "#3b82f6",
        color: "#ffffff",
        border: 0,
        borderRadius: 999,
        cursor: "pointer",
        font: "600 16px system-ui",
        padding: "16px 28px",
        willChange: "transform"
      }}
    >
      Explore effect
    </button>
  );
}