Как сделать кастомную анимацию кнопки в Тильде #тильда #shorts #дизайн #разработкасайта #design

Оставляем краткую инструкцию: 1. Переходим в Zero Block, добавляем кнопку и удаляем её текст. Отдельно размещаем текстовый блок, в нём прописываем нужный текст кнопки. Надпись накладываем на кнопку и выравниваем по центру. Также добавляем иконку и располагаем её в нужном месте кнопки. 2. Выбираем текст и переходим в Step-by-step анимацию.Задаём в настройке EVENT — on Hover, а TRIGGER устанавливаем по кнопке. 3. Далее настраиваем анимацию кнопки. В Step 1 смещаем кнопку вправо: DURATION 0,3 s, EASING — Ease In Out. 4. Добавляем анимацию иконке. Задаём в настройке EVENT — on Hover, а TRIGGER устанавливаем по кнопке. Чтобы в начале иконка была не видна, в Step 1 выставляем DURATION 0 s; OPACITY — 0%. А в Step за 0,3 s делаем OPACITY — 100% и поворачиваем иконку ROTATE −90. Смещаем вправо и устанавливаем EASING — Ease In Out. 5. Очень важно и кнопке, и иконке поставить POINTER EVENTS — None. Готово! Опубликовываем и проверяем анимацию по наведению. Б
Back to Top