Как сделать CSS-анимацию блика на кнопке

Привет, друзья. В одной из прошлых статей я обещал, что расскажу, как сделать анимацию блика на кнопке. В этом году меня уже более 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;
  }
}

В результате получилось так.

CSS анимация блика на кнопке

Конечно же вы можете поработать над формой градиента и его наклоном для того, чтобы добиться более реального блика. Из основных настроек, которые вам могу понадобиться, это:

  • Толщина блика. Задается свойством "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 кнопки.

Блик на кнопке html

Исходник кнопки с анимацией блика

Размер: 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 комментария

  1. ruFri

    Хорошая шпора :)
    Только в исходниках ошибка в пути к стилям :(
    Ну и анимацию можно поинтереснее прикрутить :)

    1. Дмитрий Давыдов

      ruFri, где же тут ошибка?

      <link rel="stylesheet" href="/css/style.css" />

      Я работаю на сервере и подключаю от корня сайта...

Добавить комментарий