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

Как сделать интерактивную карту на Tilda

По умолчанию кнопки на Tilda статичны — пользователь подводит курсор, кнопка просто меняет цвет. Этого достаточно, но кнопку с эффектом «магнита» (она тянется к курсору) пользователи замечают чаще и кликают по ней охотнее.
Эффект работает только на компьютерах, где есть курсор. На телефонах ничего не сломается — скрипт там просто не сработает.
Важно: скрипт применится ко всем элементам с классом "cta" на странице, где он добавлен.

Создайте кнопку в Zero Block
Нажмите на нее правой кнопкой мыши
В поле CSS Class Name в настройках напишите cta
Сохраните блок

Как добавить код:
Откройте нужную страницу в редакторе Tilda
Добавьте блок Т123 (HTML-код)
Вставьте в него скрипт (см. ниже)
Сохраните страницу

<script>
// gsp development
document.addEventListener('DOMContentLoaded', function() {
  var selector = '.cta';   // класс кнопок, на которые вешаем эффект
  var radius = 120;        // радиус притяжения, px
  var strength = 0.4;      // сила (0.1–0.8)

  var buttons = document.querySelectorAll(selector);
  buttons.forEach(function(btn) {
    btn.style.transition = 'transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1)';
    btn.style.willChange = 'transform';
  });

  document.addEventListener('mousemove', function(e) {
    buttons.forEach(function(btn) {
      var r = btn.getBoundingClientRect();
      var dx = e.clientX - (r.left + r.width / 2);
      var dy = e.clientY - (r.top + r.height / 2);
      if (Math.hypot(dx, dy) < radius) {
        btn.style.transform = 'translate(' + dx * strength + 'px,' + dy * strength + 'px)';
      } else {
        btn.style.transform = 'translate(0,0)';
      }
    });
  });

  document.addEventListener('mouseleave', function() {
    buttons.forEach(function(btn) { btn.style.transform = 'translate(0,0)'; });
  });
});
</script>