arrow-left
Вернуться к продуктам
Кратко о видео
В уроке разобраны три варианта кнопок с анимацией: кнопка с фоновым блоком и трансформацией (фон сдвигается при наведении), иконки соцсетей с изменением цвета и масштабирования, кнопка с вращающимся элементом внутри. Для каждой — состояние Hover в панели UI State, transition для плавности переходов, Z-index для управления слоями. Hover в Taptop — отдельное состояние элемента. Переходишь в панель UI State, выбираешь Hover и задаёшь нужные параметры: цвет, размер, трансформацию. Transition добавляется в основном состоянии (не в Hover) — оно управляет плавностью перехода между состояниями. Урок для тех, кто знает базовую вёрстку в Taptop и хочет добавить профессиональную интерактивность. Понимание работы с классами поможет грамотно применить transition без дублирования стилей.

Как сделать анимацию кнопки при наведении в Taptop

Кнопка на странице выглядит статично — хочется анимацию при наведении. Как добавить hover-эффект? Почему анимация резкая, а не плавная? Куда нужно добавлять transition?
Hover в Taptop — отдельное состояние в панели UI State. Переключаешься на Hover и задаёшь параметры: цвет, размер, трансформацию. Для плавности — transition добавляешь в оба состояния: Hover и базовое. Для новичков. После просмотра делаешь плавную hover-анимацию на любой кнопке.
Тайминги видео
00:00 — Структура первой кнопки: div + link block + фоновый блок 03:00 — Hover-состояние: трансформация фона и настройка transition 06:30 — Кнопки соцсетей: иконки с индивидуальным цветом при наведении 10:00 — Дублирование класса для разных hover-цветов 12:30 — Кнопка с вращением: transform rotate и transition по времени

Другие продукты академии

Как выйти на фриланс
Разберётесь, как брать первые проекты, называть цену и общаться с клиентами
Для кого
Специалистов
Направление
Фриланс
Формат
Мини-курс
Длительность
13 уроков
Taptop с нуля: сайт-портфолио
Осваиваете базу Taptop и собираете сайт-портфолио, который можно оставить себе
Для кого
Новичков
Направление
Вёрстка
Формат
Мини-курс
Длительность
9 уроков
Как дизайнеру понять вёрстку
Разберётесь, как устроены сайты, чтобы увереннее работать с ними дальше
Для кого
Новичков
Направление
Вёрстка
Формат
Интенсив
Длительность
2 урока
Как собрать сложную анимацию
Собираете сложную анимацию и плавный переход между страницами
Для кого
Для тех, кто в теме
Направление
Анимации
Формат
Интенсив
Длительность
2 урока