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

Анимация блика на кнопке — отличный способ привлечь внимания пользователя на Вашем сайте совершить определенное действие. Рассмотрим пример реализации такой кнопки с помощью CSS.

Пример реализации

Эффект блика

Для начала создадим HTML структуру, которая будет содержать кнопку, c классом glare-button, которую мы стилизуем и анимируем с помощью CSS.

HTML разметка

<button class="glare-button">Эффект блика</button>

CSS стилизация

/* Стили для кнопки */
.glare-button {
  border: none;
  border-radius: 20px;
  margin: 20px;
  background: linear-gradient(120deg, #ff0000, #ee1d23); /* Градиентный фон кнопки для объемного эффекта */
  color: #fff; /* Белый цвет текста на кнопке */
  position: relative;
  overflow: hidden;
  font-size: 20px;
  padding: 20px 40px; /* Отступы внутри кнопки */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Добавляем тень для трехмерного эффекта */
}

/* Стили для создания блика на кнопке */
.glare-button:before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%, /* Прозрачность начала блика */
    rgba(255, 255, 255, 0.8), /* Цвет блика */
    rgba(255, 255, 255, 0) 70% /* Прозрачность конца блика */
  );
  top: 0;
  left: -100px;
  animation: shine 2s infinite linear; /* Анимация блика */
}

/* Ключевые кадры для анимации блика */
@keyframes shine {
  0% {
    left: -100px; /* Начальная позиция блика (левая сторона кнопки) */
  }
  20% {
    left: 100%; /* Позиция блика в конце (правая сторона кнопки) */
  }
  100% {
    left: 100%; /* Завершение анимации */
  }
}