Кнопка с бликом: как сделать анимированный блик на чистом CSS

В этой статье вы узнаете, как сделать анимированный блик на кнопке. Делать это будем с помощью css-анимации, используя keyframes. Без JS, только HTML и CSS.

Демо

А теперь давайте по порядку. Для начала создадим кнопку в html:

<div class="btn">Кнопка с бликом</div>

Затем добавим ей немного стилей в css:

.btn {
  display: inline-block;
  position: relative;
  color: #fff;
  font-size: 1.5rem;
  background: linear-gradient(to right, #0162c8, #55e7fc);
  padding: 1rem 1.75rem;
  border-radius: 0.5rem;
  overflow: hidden;
}

Что мы здесь сделали и зачем? Во-первых, мы прописали position: relative, так как в дальнейшем будем использовать псевдоэлемент (наш блик) и ему нужно будет брать родителя (кнопку) за ориентир. Также мы задали линейный градиент для фона, изменили размеры и цвет текста, закруглили края и добавили отступы. Но главное, мы добавили overflow: hidden — это значит, что все, что будет выходить за пределы этого элемента будет скрыто.

В итоге, у нас получилась вот такая кнопка:

Но она пока без блика. Давайте добавим его.

Как это будет реализовано? Мы создадим псевдоэлемент, которому зададим css свойства, которые сделают его похожим на блик. А затем, каждые пять секунд, мы будем запускать анимацию, которая будет передвигать наш псевдоэлемент (блик). Таким образом мы создадим эффект блика на кнопке.

Приступим.

Создадим псевдоэлемент :before и пропишем для него некоторые css свойства:

.btn:before {
  content: '';
  width: 100%;
  height: 200%;
  position: absolute;
  top: 0; left: 0;
  opacity: 0.5;
  filter: blur;
  background: linear-gradient(to left, transparent 0%, #fff 40%, #fff 60%, transparent 100%);
  transform: translate(-100%, -25%) rotate(10deg);
  animation: blick 5s infinite;
}

В первых строках мы задали размеры и координаты нашего блика. Он будет в два раза больше кнопки по высоте и находится с левой стороны. Далее, мы добавили небольшое размытие и сделали более прозрачным.

Обратите внимание на фон, который мы прописали. С нуля до 40% ширины блика (а он занимает 100% ширины кнопки) фон будет прозрачным, затем с 40% ширины до 60% фон будет белым. И соответственно с 60% до 100% ширины — прозрачный фон.

С помощью transform мы его подвинули за пределы нашей кнопки, а также немного повернули.

А с помощью свойства animation мы указали, какую анимацию будем применять к этому псевдоэлементу. Также указали время, за которое должна быть выполнена анимация и задали значение infinite, что означает бесконечная анимация.

Теперь пришло время прописать keyframes для анимации.

Keyframes – ключевые точки анимации. Keyframes помогает нам управлять промежуточными этапами во время анимации.

@keyframes blick {
  0% {
    transform: translate(-100%, -25%) rotate(10deg);
  }
  20% {
    transform: translate(100%, -25%) rotate(10deg);
  }
  100% {
    transform: translate(100%, -25%) rotate(10deg);
  }
}

Давайте здесь подробнее остановимся.

Мы задали, что наш блик будет начинать анимацию находясь за пределами кнопки по оси X (translate(-100%, -25%)). Через 20% (20 процентов от 5 секунд — одна секунда) блик (псевдоэлемент) будет уже в своем изначальном положении по оси X (translate(100%, -25%)). То есть он за одну секунду пройдет вдоль нашей кнопки. А дальше замрет. То есть оставшиеся 80% (или 4 секунды он будет находится в статичном положении, но визуально мы его не увидим. А потом анимация повторится.

В заключении хочу напомнить, что я не использовал префиксы для keyframes и других css свойств. Но вы не забудьте про них.

На этом все. Предлагаю посмотреть видео, где я еще раз объясняю, как сделать анимированный эффект блика на кнопку.