Кнопка со сложной анимацией при наведении
В этой демонстрации вы узнаете, как создать интерактивную кнопку с эффектом иллюзии подъёма и вращения при наведении.
Начнём с базовой разметки страницы. Разметим кнопку с помощью тега <a> и назначим ей класс button. Так как внутри будет только иконка, добавим описание с помощью aria-label.
Вставим внутрь кнопки SVG-иконку в виде встроенного кода и присвоим тегу svg класс button__icon.
Немного стилизуем страницу, добавив фон с градиентом и настроив основные параметры отображения.
Определим размеры кнопки и центрируем её с помощью автоматических внешних отступов.
Установим белый цвет текста для кнопки, что перекрасит встроенный SVG, так как его заливка равна currentColor. Добавим градиентный фон.
Используем флексы для центрирования SVG внутри кнопки.
Скруглим кнопку с помощью border-radius: 50%; и добавим ей тень.
Зададим размеры для SVG внутри кнопки. После этого стилизация завершена, можно переходить к созданию эффекта при наведении.
При наведении увеличим смещение и размытие тени, так мы сделаем её более заметной. Это создаст эффект «поднятия над страницей». Попробуйте навести курсор на кнопку.
Также при наведении повернём кнопку на 90 градусов и немного её увеличим. Наведите курсор ещё раз.
Добавим плавный переход для свойств transform и box-shadow для более мягкого эффекта. Попробуйте навести курсор ещё раз.
Для полной иллюзии поворота добавим эффект вращения на 90 градусов в противоположную сторону для .button__icon.
В заключение добавим плавный переход для иконки. Теперь кнопка и иконка плавно вращаются в противоположные стороны. А благодаря анимации тени создаётся впечатление, что кнопка поднимается над поверхностью.
