03 · Визуал

Магнитная кнопка в Tilda
готовый код.

Кнопка мягко смещается вслед за курсором и возвращается на место после наведения.

Забрать код ↓
Технология
CSS + JavaScript
Установка
7 минут
Куда вставлять
Zero Block + T123
Обновлено
08.09.2026

Сначала посмотрите,
как это работает.

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

Скопируйте.
Вставьте. Опубликуйте.

Код не требует сборки или установки библиотек. Перед запуском замените значения, отмеченные в инструкции ниже.

Готовый код
<style>
.js-magnetic-button {
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .js-magnetic-button { transition: none; }
}
</style>

<script>
(function () {
  if (!window.matchMedia('(pointer: fine) and (prefers-reduced-motion: no-preference)').matches) return;

  document.querySelectorAll('.js-magnetic-button').forEach(function (button) {
    button.addEventListener('mousemove', function (event) {
      var rect = button.getBoundingClientRect();
      var x = event.clientX - rect.left - rect.width / 2;
      var y = event.clientY - rect.top - rect.height / 2;
      button.style.transform = 'translate(' + x * 0.18 + 'px,' + y * 0.18 + 'px)';
    });
    button.addEventListener('mouseleave', function () {
      button.style.transform = 'translate(0,0)';
    });
  });
})();
</script>

Четыре шага.

  1. 01

    В Zero Block откройте настройки нужной кнопки и укажите CSS-класс js-magnetic-button.

  2. 02

    Добавьте блок T123 ниже Zero Block и вставьте код.

  3. 03

    Если движение слишком сильное, уменьшите коэффициент 0.18 в двух местах.

  4. 04

    Опубликуйте страницу и проверьте эффект мышью. На сенсорных устройствах он отключён.

Подстройте под себя.

Сила движения
Коэффициент 0.18. Для спокойного эффекта используйте 0.1–0.16.
Скорость возврата
Первое значение transition: сейчас 0.28s.
Несколько кнопок
Один класс можно назначить любому количеству элементов.

Не нашли нужное?
Соберём под ваш сайт.

Опишите задачу и пришлите ссылку на страницу. Посмотрим, можно ли решить её готовым кодом или нужна индивидуальная разработка.

Обсудить в Telegram ↗