Привет, друзья. В одной из прошлых статей я обещал, что расскажу, как сделать анимацию блика на кнопке. В этом году меня уже более 5 раз просили реализовать этот эффект на разных сайтах, от лендингов на конструкторе, до сайтов-каталогов на CMS. Решил удобно оформить в заметку, чтобы в следующий раз просто копировать код отсюда.
В статье рассмотрим несколько вариантов:
- Когда кнопка оформлена в виде ссылки или тега button.
- Когда кнопка оформлена в виде тега input с атрибутом submit. В том числе посмотрим как это реализовать при помощи javascript, чтобы даже, например, на каком-нибудь конструкторе лендингов у вас получилось внедрить этот эффект, когда нет физического доступа к html настройкам кнопки.
Повторяющаяся анимация блика
Сначала разберем простой случай, когда кнопка оформлена при помощи тега "button" или "a". На самом деле никакой сложности в реализации эффекта - нет. Суть заключается в том, чтобы дать кнопке "overflow: hidden" и "position: relative", а затем, внутри нее создать псевдоэлемент (сам блик) и зациклить его анимацию перемещения. Давайте займемся этим.
Для начала создадим кнопки в html сами кнопки.
<button class="flare-button">Кнопка с бликом</button>
<a class="flare-button" href="https://smartlanding.biz">Ссылка с бликом</a>
А теперь добавим базовые стили в CSS.
.flare-button {
width: 100%;
max-width: 280px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
padding-top: 2px;
margin: 0 auto 30px;
border: none;
border-radius: 3px;
font-size: 16px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
color: #fff;
background: #eb9f11;
box-shadow: 0 3px 3px #be8316;
cursor: pointer;
text-decoration: none;
}
У меня получилось так:
Теперь давайте добавим сам блик. Как я уже говорил, делать его будем при помощи псевдоэлемента, а именно при помощи "after" c абсолютным позиционированием, но сначала давайте добавим нашим кнопкам "position" и "ovefflow".
.flare-button {
width: 100%;
max-width: 280px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
padding-top: 2px;
margin-bottom: 30px;
border: none;
border-radius: 3px;
font-size: 16px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
color: #fff;
background: #eb9f11;
box-shadow: 0 3px 3px #be8316;
cursor: pointer;
text-decoration: none;
/* Важные стили для анимации */
position: relative;
overflow: hidden;
}
Добавляем псевдоэлемент и свойства анимации:
.flare-button:after {
content: "";
display: block;
width: 20px;
height: 200px;
margin-left: 50px;
background: #fff;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.5) 0%,
rgba(255, 255, 255, 1) 50%,
rgba(255, 255, 255, 0.5) 100%
);
left: -40px;
top: -100px;
z-index: 1;
transform: rotate(45deg);
position: absolute;
animation: movingFlare 3s ease-in-out 0.05s infinite;
}
@keyframes movingFlare {
0% {
left: -30px;
margin-left: 0px;
}
30% {
left: 110%;
margin-left: 80px;
}
100% {
left: 110%;
margin-left: 80px;
}
}
В результате получилось так.
Конечно же вы можете поработать над формой градиента и его наклоном для того, чтобы добиться более реального блика. Из основных настроек, которые вам могу понадобиться, это:
- Толщина блика. Задается свойством "width". В моем случае это 20 пикселей.
- Наклон блика. Задается свойством transform. В моем случае 45 градусов.
- Свойства анимации. Задаются при помощи "annimation". Подробнее тут.
Анимация блика у тега input
Иногда кнопка для отправки формы обратной связи оформлены не тегом button, а при помощи тега input. В таком случае не получится воспользоваться способом, описанным выше, ведь у инпута невозможно задать псевдоэлемент "after" или "before". В таком случае можно просто обернуть его, например, в "div" и применить тот же подход, что и для элементов выше. Давайте займемся этим.
<div class="flare-input__wrapper">
<input class="flare-input" type="submit" value="Input с бликом" />
</div>
Теперь займемся стилями:
.flare-input {
width: 100%;
height: 50px;
border: none;
font-size: 16px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
color: #fff;
background: #eb9f11;
padding: 3px 15px 0;
cursor: pointer;
text-decoration: none;
}
.flare-input__wrapper {
width: 100%;
max-width: 280px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 30px;
border-radius: 3px;
overflow: hidden;
position: relative;
box-shadow: 0 3px 3px #be8316;
}
.flare-input__wrapper:after {
content: "";
display: block;
width: 20px;
height: 200px;
margin-left: 50px;
background: #fff;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.7) 0%,
rgba(255, 255, 255, 1) 50%,
rgba(255, 255, 255, 0.7) 100%
);
left: -40px;
top: -100px;
z-index: 1;
transform: rotate(45deg);
position: absolute;
animation: movingFlare 3s ease-in-out 0.05s infinite;
}
@keyframes movingFlare {
0% {
left: -30px;
margin-left: 0px;
}
30% {
left: 110%;
margin-left: 80px;
}
100% {
left: 110%;
margin-left: 80px;
}
}
В итоге у меня получись таких 3 кнопки.
Исходник кнопки с анимацией блика
Размер: 0,004 мб
Если нет доступа к html
Тут все было достаточно просто. Теперь давайте разберемся как сделать такой же эффект, когда у нас нет доступа к html коду, чтобы обернуть тег input.
Задачу решим при помощи javascript. Как правило эффект нужен у всех кнопок, отправляющих форму, поэтому сделаем перебор всех элементов с атрибутом type="submit" и обернем их в div как в примере выше.
Сначала разметка. Давайте предоставим, что на странице есть два элемента, отвечающие за отправки форм. Не буду помещать каждый инпут в отдельную форму для экономии времени.
<input
class="flare-input flare-input_1"
type="submit"
value="Input с бликом"
/>
<input
class="flare-input flare-input_2"
type="submit"
value="Input 2 с бликом"
/>
Эти инпуты уже имеют какие-то стили, аналогичные примеру выше:
.flare-input {
width: 100%;
height: 50px;
border: none;
font-size: 16px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
color: #fff;
background: #eb9f11;
padding: 3px 15px 0;
cursor: pointer;
text-decoration: none;
}
Как и в прошлый раз оборачивать инпут будем в div с классом "flare-input__wrapper". Напишем стили ему и псевдоэлементу.
.flare-input {
width: 100%;
height: 50px;
border: none;
font-size: 16px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
color: #fff;
background: #eb9f11;
padding: 3px 15px 0;
cursor: pointer;
text-decoration: none;
}
.flare-input__wrapper {
width: 100%;
max-width: 280px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 30px;
border-radius: 3px;
overflow: hidden;
position: relative;
box-shadow: 0 3px 3px #be8316;
}
.flare-input__wrapper:after {
content: "";
display: block;
width: 20px;
height: 200px;
margin-left: 50px;
background: #fff;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.7) 0%,
rgba(255, 255, 255, 1) 50%,
rgba(255, 255, 255, 0.7) 100%
);
left: -40px;
top: -100px;
z-index: 1;
transform: rotate(45deg);
position: absolute;
animation: movingFlare 3s ease-in-out 0.05s infinite;
}
@keyframes movingFlare {
0% {
left: -30px;
margin-left: 0px;
}
30% {
left: 110%;
margin-left: 80px;
}
100% {
left: 110%;
margin-left: 80px;
}
}
Теперь наша задача при помощи js обернуть каждый такой элемент в тег div, задать ему стили и добавить псевдоэлемент отвечающий за блик. Все как делали уже ранее.
Перед закрывающем тегом body или в файле со скриптами добавим следующий код:
document.addEventListener("DOMContentLoaded", () => {
let inputFlare = document.querySelectorAll('input[type = "submit"]'),
length = inputFlare.length,
i,
wrapper;
for (i = 0; i < length; i++) {
wrapper = document.createElement("div");
wrapper.setAttribute("class", "flare-input__wrapper");
inputFlare[i].parentNode.insertBefore(wrapper, inputFlare[i]);
wrapper.appendChild(inputFlare[i]);
}
});
На этом - все. Теперь вы знаете, как создать кнопку с анимацией блика. Если возникнут вопросы, то обязательно пишите в комментариях. Будем разбираться.
2 комментария
Хорошая шпора :)
Только в исходниках ошибка в пути к стилям :(
Ну и анимацию можно поинтереснее прикрутить :)
ruFri, где же тут ошибка?
Я работаю на сервере и подключаю от корня сайта...