Магнитная кнопка

Кнопка тянется за курсором, текст внутри — с меньшим множителем. Отпустили — пружиной назад.

Поводите курсором по кнопкам.

Код

<button class="magnetic"><span>Кнопка</span></button>

<script>
var btn = document.querySelector(".magnetic");
var span = btn.querySelector("span");
btn.addEventListener("pointermove", function (e) {
  var r = btn.getBoundingClientRect();
  var dx = e.clientX - r.left - r.width / 2;
  var dy = e.clientY - r.top - r.height / 2;
  btn.style.transform = "translate(" + dx * .35 + "px," + dy * .35 + "px)";
  span.style.transform = "translate(" + dx * .12 + "px," + dy * .12 + "px)";
});
btn.addEventListener("pointerleave", function () {
  btn.style.transition = "transform .5s cubic-bezier(.16,1,.3,1)";
  btn.style.transform = ""; span.style.transform = "";
  setTimeout(function () { btn.style.transition = ""; }, 500);
});
</script>

Промпт для ИИ

Сделай магнитную кнопку: на pointermove внутри кнопки считай смещение курсора от её центра и сдвигай кнопку translate(dx*0.35, dy*0.35), а текст внутри — с меньшим множителем 0.12 (двухслойность даёт объём). На pointerleave возвращай на место с transition 0.5s cubic-bezier(0.16,1,0.3,1) (во время движения transition отключён). На тач-устройствах (hover: none) не включать.