Кнопка з відблиском: як зробити анімований відблиск на чистому 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 властивостей. Але ви не забудьте про них.

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