Как сделать эффект блика на кнопке в Elementor Free WordPress 2025. CSS код

Опубликовано: 15.04.2025Рубрика: CSSАвтор: По фрилансу

Как сделать блик на кнопке в Elementor без использования дополнительных плагинов — только с помощью CSS. Получится стильная бликующая кнопка, которая привлечёт внимание на вашем сайте.
Это отличный способ добавить стильный блик на кнопку в Elementor и улучшить дизайн без лишних дополнений, плагинов.

Подробная инструкция в видео — Смотреть на YouTube

/* Стили для кнопки */
.btn-blick .elementor-button {
 position:relative;
  overflow: hidden;
}

/* Стили для создания блика на кнопке */
.btn-blick .elementor-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%; /* Завершение анимации */
  }
}