Как сделать кастомную анимацию кнопки в Тильде #тильда #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.
Готово! Опубликовываем и проверяем анимацию по наведению.
Б
1 view
142
31
5 months ago 00:20:22 1
МАКИЯЖ ДЛЯ НАЧИНАЮЩИХ 💄ЧТО, КАК, ЗАЧЕМ ? ПОЛЕЗНО ВСЕМ
5 months ago 00:05:49 1
🔞Новая порция РАЗВРАТА‼️Кто продвинул Instasamka на федеральный канал Россия 1?
5 months ago 00:31:52 1
Как делать поддельные доллары в домашних условиях НО ВЫ ТАК НЕ ДЕЛАЙТЕ!
5 months ago 00:21:13 1
Чёлка Какую Чёлку выбрать | Какая форма Чёлки подойдет по форме лица | Чёлки 2023 | Стрижки с челкой
5 months ago 00:15:45 1
Хроническая УСТАЛОСТЬ: причины и ЛЕЧЕНИЕ. / Вечно нет сил, утомляемость или сонливость – что делать?
5 months ago 00:19:25 1
Как сделать ланчматы из ничего? Отходы в доходы! // Лоскутный эфир 216. Печворк 16+