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>/ Установка
Четыре шага.
- 01
В Zero Block откройте настройки нужной кнопки и укажите CSS-класс js-magnetic-button.
- 02
Добавьте блок T123 ниже Zero Block и вставьте код.
- 03
Если движение слишком сильное, уменьшите коэффициент 0.18 в двух местах.
- 04
Опубликуйте страницу и проверьте эффект мышью. На сенсорных устройствах он отключён.
/ Настройки
Подстройте под себя.
- Сила движения
- Коэффициент 0.18. Для спокойного эффекта используйте 0.1–0.16.
- Скорость возврата
- Первое значение transition: сейчас 0.28s.
- Несколько кнопок
- Один класс можно назначить любому количеству элементов.
/ Нужна доработка
Не нашли нужное?
Соберём под ваш сайт.
Опишите задачу и пришлите ссылку на страницу. Посмотрим, можно ли решить её готовым кодом или нужна индивидуальная разработка.
Обсудить в Telegram ↗