Как сделать блик на кнопке в 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%; /* Завершение анимации */
}
}
