Magnetic Pull

<button class="nuda-btn-magnetic-pull">
  <span class="nuda-btn-magnetic-pull__label">Pull me</span>
</button>

/* Magnetic Pull — content leans toward the cursor via CSS vars.
   Respects prefers-reduced-motion. */
(function () {
  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
  var strength = 0.4;
  document.querySelectorAll(".nuda-btn-magnetic-pull").forEach(function (btn) {
    btn.addEventListener("mousemove", function (e) {
      var r = btn.getBoundingClientRect();
      btn.style.setProperty("--mpx", (e.clientX - r.left - r.width / 2) * strength + "px");
      btn.style.setProperty("--mpy", (e.clientY - r.top - r.height / 2) * strength + "px");
    });
    btn.addEventListener("mouseleave", function () {
      btn.style.setProperty("--mpx", "0px");
      btn.style.setProperty("--mpy", "0px");
    });
  });
})();

.nuda-btn-magnetic-pull {
  --mpx: 0px;
  --mpy: 0px;
  position: relative;
  padding: 12px 30px;
  background: #e4ff54;
  color: #09090b;
  border: 0;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  transform: translate(var(--mpx), var(--mpy));
  transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.25s;
  will-change: transform;
}

.nuda-btn-magnetic-pull:hover {
  box-shadow: 0 12px 30px -10px rgba(228, 255, 84, 0.6);
}

.nuda-btn-magnetic-pull__label {
  display: inline-block;
  /* label leans a little further than the button itself */
  transform: translate(calc(var(--mpx) * 0.4), calc(var(--mpy) * 0.4));
  transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}

.nuda-btn-magnetic-pull:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .nuda-btn-magnetic-pull,
  .nuda-btn-magnetic-pull__label {
    transform: none !important;
    transition: none;
  }
}