Анимация блика на кнопке — это прекрасный способ придать вашим веб-сайтам интересный и привлекательный вид. В этой статье мы рассмотрим, как создать такую анимацию с использованием CSS. Мы будем использовать CSS свойства и ключевые кадры (keyframes), чтобы добиться живого блика на кнопке. Ваша кнопка станет еще более привлекательной для пользователей.

Пример того, что получится:

Шаг 1: HTML структура

Для начала создадим базовую HTML структуру, которая будет содержать кнопку, на которой мы будем создавать анимацию блика:

<button class="glare-button">Glare Effect</button>

Шаг 2: CSS стилизация

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

/* Стили для кнопки */
.glare-button {
  border: none;
  border-radius: 20px;
  padding: 5px 20px;
  background: linear-gradient(120deg, #275bca, #1a3e96); /* Градиентный фон кнопки для объемного эффекта */
  color: #fff; /* Белый цвет текста на кнопке */
  position: relative;
  overflow: hidden;
  width: 300px;
  font-size: 20px;
  padding: 20px; /* Отступы внутри кнопки */
  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%; /* Завершение анимации */
  }
}