Живые кнопки в Tilda: магнит, заливка от курсора и анимация стрелки

У кнопки уже есть цвет, подпись и действие. Чтобы она ощущалась живее, можно добавить небольшую реакцию на курсор: лёгкое движение, заливку или стрелку. Главное — сохранить удобное нажатие.

В моде «Живые кнопки» выбирается один эффект для списка кнопок. Обычную ссылку, форму или попап вы продолжаете настраивать в Tilda. Разберём, как добавить движение и не превратить главную кнопку в ускользающую цель.

Начните с основного действия: записи, перехода к работам или открытия формы. Если анимировать каждую маленькую ссылку, посетителю станет сложнее понять, какая из них важнее. Хороший первый тест — одна кнопка в свободном месте.

Добавьте нужные кнопки из каталога блоков или укажите CSS-селекторы по одному в строке. Общий .t-btn охватывает много элементов. Если эффект нужен только одной секции, ограничьте список её блоком. После установки проверьте и второстепенные кнопки: они могли попасть под слишком широкую настройку.

Магнитная реакция слегка следует за курсором. Заливка показывает движение внутри кнопки, а стрелка делает направление перехода заметнее. Также доступны неоновая обводка и пульсация. В одном наборе настроек выбирается один тип эффекта.

Не пытайтесь получить сложную комбинацию несколькими копиями мода на одной кнопке. Сначала выберите реакцию, которая подходит её задаче и размеру. Маленькой кнопке рядом с текстом обычно нужно меньше движения, чем крупному действию на первом экране. Основной вид должен быть понятен и до наведения.

Подберите параметры выбранного режима: силу магнита и смещение, цвет заливки, обводку, стрелку или пульсацию. Начните с небольших значений и несколько раз быстро наведите курсор и уберите его.

Оставьте место для движения. Если кнопка сдвигается вплотную к соседней ссылке или краю карточки, эффект начинает мешать чтению и нажатию. Проверьте длинную подпись, особенно если сама кнопка меняет размер на разных экранах. Не сокращайте важное название действия только ради анимации, которую посетитель увидит на долю секунды.

При необходимости включите режим «Только на десктопе (мышь)». Он ориентируется на наличие точного указателя и наведения, поэтому на сенсорном устройстве сохраняется обычная кнопка.

Проверьте её исходный вид отдельно: подпись читается, цвет различим на фоне, область нажатия удобна пальцем. Нельзя прятать объяснение действия в эффекте, который появляется только при наведении. Даже если посетитель ни разу не увидел анимацию, он должен понимать, куда ведёт кнопка и что произойдёт после нажатия.

Разместите полученный код в T123 после выбранных блоков и опубликуйте страницу. Код использует GSAP и подгружает библиотеку, если её ещё нет. При отсутствии реакции проверьте, что загрузка библиотеки не блокируется, а кнопки действительно попадают в выбранный список.

Нажмите на каждую кнопку обычным способом. Переход, открытие формы или попапа должны работать по прежним настройкам Tilda. Для нескольких кнопок в одном списке применяются общие параметры эффекта. Если им требуется разное поведение, сначала разделите области, чтобы один элемент не оказался сразу в нескольких наборах.

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

• Двигаются только нужные кнопки.
• При уходе курсора возвращается нормальный вид.
• Текст остаётся читаемым во всех состояниях.
• Действие кнопки работает мышью и пальцем.
• На сенсорном экране исходное оформление выглядит завершённым.

Если анимация мешает нажать, уменьшите силу или выберите более спокойный режим.

Читайте также: Как сделать кнопку из текстовой ссылки в Tilda · Кастомный курсор в Tilda: эффект и подсказки над ссылками.