Оставляем краткую инструкцию:
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.
Готово! Опубликовываем и проверяем анимацию по наведению.
Больше полезного в тг-канале: [ Ссылка ]
