Красивый эффект пульсации вокруг иконки Elementor

Иногда нужно сделать так, чтобы пользователь точно заметил важный элемент — кнопку воспроизведения видео, призыв к действию или интерактивную иконку. Стандартные анимации Elementor не всегда дают нужный эффект, поэтому я создал кастомный CSS-код для пульсирующей подсветки.

Что это такое?

Это CSS-анимация, которая создаёт расходящиеся круги вокруг иконки, как пульсирующее свечение. Эффект повторяется бесконечно, мягко привлекая внимание.

Код эффекта пульсации

/* Класс для пульсирующей иконки */
.glow-ripple {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    z-index: 1;
}

/* Псевдоэлементы для пульсирующих кругов */
.glow-ripple::before,
.glow-ripple::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    margin: -50% 0 0 -50%;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 0 0 currentColor;
    animation: glow-ripple-animation 3s infinite;
    opacity: 0.6;
    z-index: -1;
}

.glow-ripple::before { animation-delay: 0.3s; }
.glow-ripple::after { animation-delay: 0.9s; }

/* Анимация */
@keyframes glow-ripple-animation {
    0% {
        box-shadow: 0 0 0 0 currentColor;
        opacity: 0.6;
    }
    70% {
        box-shadow: 0 0 0 20px currentColor;
        opacity: 0;
    }
    100% {
        box-shadow: 0 0 0 0 currentColor;
        opacity: 0;
    }
}

/* Иконка внутри */
.glow-ripple .elementor-icon {
    position: relative;
    z-index: 2;
    line-height: 1;
}

/* Цвет пульсации */
.glow-ripple {
    color: #fff;
}

Как использовать в Elementor?

1. Добавьте код в раздел «Дополнительный CSS» (Консоль WordPress → Elementor → Настройки → Дополнительно) или в настройки темы.
2. Создайте виджет «Иконка» в Elementor.
3. Добавьте класс glow-ripple в настройках виджета во вкладке «Дополнительно» → «CSS классы».
4. Настройте цвет через параметр color виджета — пульсация автоматически примет этот цвет.

Где применять?

• Кнопка Play для видео (моя основная задача)
• Важные CTA-кнопки (заказать, скачать, купить)
• Интерактивные элементы формы
• Иконки уведомлений или новых сообщений

Почему этот эффект работает?

• Ненавязчивость: плавная анимация не раздражает
• Универсальность: работает с любыми иконками и цветами
• Лёгкость: чистый CSS без JavaScript
• Адаптивность: корректно отображается на всех устройствах