Как с помощью CSS реализовать эффект «пульсации» для кнопки CTA (Call to Action), привлекающий внимание пользователя?

Эффект пульсации для CTA-кнопки — один из самых эффективных способов привлечь внимание пользователя без агрессивного вмешательства в UX. Реализуется он с помощью CSS-анимации `@keyframes` и свойства `animation`.

## Базовый эффект пульсации через box-shadow

Самый популярный подход — анимация `box-shadow`, создающая эффект расходящихся волн:

css
.cta-button {
background-color: #e74c3c;
color: #fff;
padding: 14px 32px;
border: none;
border-radius: 50px;
font-size: 18px;
cursor: pointer;
animation: pulse 2s infinite;
}

@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
}
70% {
box-shadow: 0 0 0 16px rgba(231, 76, 60, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
}
}

Здесь `box-shadow` расширяется от 0 до 16px с постепенным исчезновением прозрачности — это создаёт иллюзию волны, исходящей от кнопки.

## Эффект масштабирования (scale pulse)

Другой вариант — лёгкое увеличение и уменьшение кнопки:

css
@keyframes scalePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.06); }
}

.cta-button {
animation: scalePulse 1.5s ease-in-out infinite;
}

Этот метод более тонкий и не отвлекает, но всё равно заметен периферийным зрением.

## Комбинированный эффект

Для максимального воздействия можно совместить оба подхода:

css
@keyframes combinedPulse {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.6);
}
50% {
transform: scale(1.04);
box-shadow: 0 0 0 12px rgba(231, 76, 60, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
}
}

## Важные рекомендации

1. **Скорость анимации**: оптимальный диапазон — 1.5–2.5 секунды. Слишком быстрая анимация раздражает, слишком медленная — незаметна.
2. **Пауза перед повтором**: добавьте `animation-delay` или используйте `animation-timing-function: ease-in-out` для плавности.
3. **Доступность**: учитывайте пользователей с вестибулярными нарушениями. Используйте медиазапрос `@media (prefers-reduced-motion: reduce)` для отключения анимации:

css
@media (prefers-reduced-motion: reduce) {
.cta-button {
animation: none;
}
}

4. **Цвет тени**: rgba-значение должно совпадать с цветом кнопки для органичного вида.
5. **Не злоупотребляйте**: пульсация должна быть только у одного главного CTA на странице.

Правильно реализованный эффект пульсации увеличивает CTR кнопки на 10–25% по данным A/B-тестов.