Magnetic button

<button class="magnet" type="button">
  <span class="magnet-label">
    <b class="for-mouse">Hover near me</b>
    <b class="for-touch">Press and drag</b>
  </span>
</button>

/* The button itself. JavaScript only sets `transform`; the easing lives here. */
.magnet {
  border: 0;
  cursor: pointer;
  padding: 18px 30px;
  border-radius: 999px;
  font: 600 16px system-ui, sans-serif;
  color: #fff;
  background: var(--brand);
  touch-action: none;            /* a touch drag moves the button instead of scrolling the page */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* The label moves half as far as the button, which gives a little depth. */
.magnet-label {
  display: inline-block;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.magnet b { font-weight: inherit; }

/* Show the right hint for the device: "hover" for mouse, "press and drag" for touch. */
.for-touch { display: none; }
@media (hover: none) {
  .for-mouse { display: none; }
  .for-touch { display: inline; }
}

// Magnetic button: when the pointer comes near, the button moves a fraction of
// the distance toward it. When the pointer leaves, it springs back to its place.

const prefersReducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;

// How far the button follows the pointer (0 = not at all, 1 = all the way).
// Reduced motion keeps the effect, just calmer.
const pullStrength = prefersReducedMotion ? 0.12 : 0.35;

// Extra space around the button (in px) where the pull starts.
const attractionZone = 90;

document.querySelectorAll('.magnet').forEach((button) => {
  const label = button.querySelector('.magnet-label');

  function moveBack() {
    button.style.transform = '';
    label.style.transform = '';
  }

  function pullToward(pointerX, pointerY) {
    const box = button.getBoundingClientRect();
    const offsetX = pointerX - (box.left + box.width / 2);
    const offsetY = pointerY - (box.top + box.height / 2);

    const isOutsideZone =
      Math.abs(offsetX) > box.width / 2 + attractionZone ||
      Math.abs(offsetY) > box.height / 2 + attractionZone;
    if (isOutsideZone) return moveBack();

    button.style.transform = `translate(${offsetX * pullStrength}px, ${offsetY * pullStrength}px)`;
    label.style.transform = prefersReducedMotion
      ? ''
      : `translate(${offsetX * pullStrength * 0.5}px, ${offsetY * pullStrength * 0.5}px)`;
  }

  // Mouse and pen: follow the pointer whenever it's close.
  window.addEventListener('pointermove', (event) => {
    if (event.pointerType !== 'touch') pullToward(event.clientX, event.clientY);
  }, { passive: true });
  document.addEventListener('pointerleave', moveBack);

  // Touch has no hover, so the button follows your finger while you press and drag.
  button.addEventListener('pointerdown', (event) => {
    if (event.pointerType === 'touch') button.setPointerCapture(event.pointerId);
  });
  button.addEventListener('pointermove', (event) => {
    if (event.pointerType === 'touch') pullToward(event.clientX, event.clientY);
  });
  for (const eventName of ['pointerup', 'pointercancel']) {
    button.addEventListener(eventName, (event) => {
      if (event.pointerType === 'touch') moveBack();
    });
  }
});