Анимированный блик у кнопки на чистом CSS
Различные hover эффекты на кнопках служат для привлечения внимания пользователей, чтобы побудить их к активным действиям. Сегодня мы рассмотрим, как создать анимированный блик при наведении на кнопку.
Позиция кнопки на экране
Как всегда начнем с создания контейнера, куда и поместим нашу кнопку. Обратите внимание, что я не использую тег button, а сразу прописываю ссылку с классом button. Дабы избежать лишнего кода (кнопка + ссылка) в HTML разметке.
<div class="container">
<a href="#" class="button">Button</a>
</div>
По умолчанию кнопка прижата к левому верхнему углу браузера, чтобы расположить ее по центру экрана, зададим следующие CSS свойства контейнеру.
.container {
width: 100%; /* ширина на всю ширину браузера */
height: 100vh; /* на всю высоту первого экрана */
display: flex; /* делаем контейнер гибким */
justify-content: center; /* по центру по горизонтали */
align-items: center; /* вертикальное центрирование */
}
Создание кнопки
Теперь с помощью CSS стилей создадим саму кнопку. Для разметки кнопки мы использовали строчный элемент a и чтобы иметь возможность применять к кнопке блочные CSS свойства (отступы, рамки), отобразим кнопку как строчно-блочный элемент.
button{
display: inline-block;/* отображать как строчно-блочный элемент*/
text-decoration: none;/* убираем дефолтное подчеркивание у ссылки*/
font-family: 'Roboto Condensed';/*название шрифта*/
text-transform: uppercase;/*трансформация в заглавные буквы */
font-weight: 900;/*толщина шрифта*/
color: #fff;/*цвет текста на кнопке*/
font-size: 30px;/*размер шрифта*/
background-color: darkred;/* цвет кнопки */
padding: 20px 60px;/* расстояние от текста до края кнопки */
position: relative;/* относительное позиционирование */
border-radius: 10px;/* радиус скругления углов*/
overflow: hidden;/* спрятать все лишнее за пределами кнопки*/
}
CSS оформление блика
Для создания блика не нужно создавать новый элемент, а воспользуемся псевдоэлементом before. Наложим сверху полупрозрачную псевдокнопку с шириной на одну треть меньше оригинальной кнопки.
button:before {
content: ""; /* отображает псевдоэлемент */
position: absolute; /* абсолютное позиционирование */
top: 0; /* верхняя координата */
left: 0; /* левая координата */
width: 2em; /* относительная ширина */
height: 100%; /* высота как у оригинала */
background-color: rgba(255, 255, 255, 0.3); /* белый цвет с полупрозрачностью */
}
Блик создан и теперь его нужно повернуть по диагонали. За это отвечает свойства: transform: skew. Повернем блик на -45 градусов.
transform: translateX(-0.5em) skewX(-45deg);
Если мы хотим, чтобы блик появлялся при наведении, то изначально нужно его скрыть, изменив значение у translateX.
transform: translateX(-4em) skewX(-45deg);
Анимация блика
Анимация создается при помощи ключевого слова @keyframes. Придумаем название для анимации, пусть это будет moveLight. Для движения блика по кнопке из одной точки в другую (from...to), достаточно создать два кадра с разными значениями у translateX. И последнее, осталось повесить созданную анимацию на псевдоэлемент before с указанием скорости анимации. Чем меньше число, тем быстрее будет мелькать блик. При наведении на кнопку, блик проскользит по всей длине кнопки.
.button:hover:before {
animation: moveLight 0.5s;
}
@keyframes moveLight {
from {
transform: translateX(-4em) skewX(-45deg);
}
to {
transform: translateX(10em) skewX(-45deg);
}
}
Посмотрите пример на CodePen
-
Создано 04.06.2021 10:38:56
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.