Пользователь скроллит страницу, пробегает глазами заголовки, картинки, списки. Кнопка «Записаться» сливается с фоном и остаётся незамеченной. Форма под ней лежит без заявок третий день. Классика: кнопка есть, кликов нет.

Решение не в дизайне за $500 и не в переписывании лендинга. Достаточно 30 строк CSS. Лёгкая анимация, дрожание, пульсация или свечение, заставляет взгляд цепляться за кнопку без назойливого мигания. Исследование Nielsen Norman Group подтверждает: движущиеся элементы привлекают внимание в 3 раза быстрее статичных, но работают только когда движение оправдано и не конкурирует с основным контентом.

Ниже, три рабочих варианта анимированной CTA-кнопки с готовым кодом. От простого shake до комбинированного pulse-glow. Берите и вставляйте.

💡 Быстрый обзор:

• HTML-каркас: минимальная разметка кнопки с классом-модификатором, которую можно встроить в любую форму или посадочную страницу.
• Shake-эффект: дрожание кнопки каждые 4 секунды через @keyframes, привлекает внимание к главному действию, не раздражая пользователя.
• Pulse-эффект: мягкая пульсация тени, альтернатива для сайтов, где shake кажется слишком агрессивным.
• CodePen-демо: живой пример, в котором можно покрутить настройки и увидеть результат до вставки на сайт.

HTML-разметка: каркас анимированной кнопки

Разметка намеренно простая. Никаких фреймворков, чистый HTML. Одна кнопка, один класс.

1
<input type="submit" name="submit" value="Получить билет!"
2
  class="animated-btn animated-btn--shake">

Три момента, которые стоит отметить сразу. Первое: type="submit", кнопка работает внутри любой формы без дополнительного JavaScript. Второе: value, текст, который увидит пользователь. Меняйте на свой, хоть «Скачать», хоть «Записаться». Третье: класс-модификатор animated-btn--shake отвечает за тип анимации. Замените на --pulse или --glow, получите другой эффект, не трогая разметку.

Если вставляете кнопку не в форму, а отдельно, оберните в <a href="..."> и замените input на <button>. Стили ниже работают с обоими вариантами.

CSS-анимация: shake-эффект

Shake, самый заметный из трёх эффектов. Кнопка дёргается влево-вправо на 3-5 пикселей с периодичностью в 4 секунды. Пользователь скроллит страницу, боковым зрением ловит движение, переводит взгляд на кнопку. Четырёх секунд достаточно, чтобы анимация не превратилась в надоедливый спам.

1
/* === Shake button === */
2
.animated-btn--shake {
3
  animation: shake 4s ease-in-out infinite;
4
  transform-origin: center center;
5
}
6
 
7
@keyframes shake {
8
  0%, 100%   { transform: translateX(0); }
9
  2%         { transform: translateX(-4px) rotate(-1deg); }
10
  4%         { transform: translateX(4px) rotate(1deg); }
11
  6%         { transform: translateX(-3px); }
12
  8%         { transform: translateX(3px); }
13
  10%        { transform: translateX(0); }
14
}

Разберём ключевые решения. animation: shake 4s ease-in-out infinite, в нашем примере полный цикл занимает несколько секунд, из которых анимация активна лишь малую долю времени. Остальное время кнопка неподвижна. Это важно: постоянное дрожание бесит, а дозированное привлекает.

transform-origin: center center фиксирует точку вращения по центру, чтобы кнопка не «уплывала» в сторону при повороте.

rotate() на 1 градус добавляет реализма. Чистый translateX выглядит механически; лёгкий наклон создаёт иллюзию физического воздействия, как будто кнопку дёрнули за нитку.

Добавьте стилизацию под свой дизайн: цвет фона через background, скругление углов в border-radius, отступы padding и размер шрифта font-size. Анимация от стилизации не зависит и работает с любыми цветами и размерами.

Вариация: pulse-эффект

Shake не везде уместен. На корпоративном сайте банка или медицинской клиники дрожащая кнопка выглядит чужеродно. Pulse даёт более спокойное привлечение внимания: тень кнопки плавно расширяется и сжимается, создавая эффект «дыхания».

1
/* === Pulse button === */
2
.animated-btn--pulse {
3
  animation: pulse 3s ease-in-out infinite;
4
}
5
 
6
@keyframes pulse {
7
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 139, 87, 0.5); }
8
  50%      { box-shadow: 0 0 0 12px rgba(46, 139, 87, 0); }
9
}

Тень расходится от кнопки на 12 пикселей и затухает до прозрачности. Цикл, 3 секунды, чуть быстрее shake, потому что пульсация менее навязчива и глаз прощает более частый ритм.

Подставьте свой цвет в rgba(). Формула: возьмите основной цвет кнопки и задайте ему альфу 0.5 в начальном кадре и 0 в конечном. Для зелёной кнопки rgba(46, 139, 87, 0.5), для синей, rgba(41, 128, 185, 0.5).

Можно комбинировать shake и pulse на одной кнопке, но мы не советуем. Два одновременных движения конфликтуют и выглядят грязно. Выберите что-то одно, исходя из характера сайта и аудитории.

CodePen: живой пример

Готовый код с обоими вариантами анимации мы выложили на CodePen. Открывайте, меняйте длительность, цвета, отступы, и смотрите на результат в реальном времени.

Встраивание на сайт через Additional CSS (Внешний вид → Настроить → Дополнительные стили) занимает минуту. Копируете нужный блок, вставляете, сохраняете. Кнопка в разметке вашей темы или плагина форм подхватит стили по классу.

Если используете WordPress, путь ещё короче: заходите в админку, открываете страницу или запись в редакторе, находите кнопку и дописываете ей класс animated-btn animated-btn--shake в настройках блока. Стили размещаете в Additional CSS, они подтянутся на фронтенд без правки файлов темы.

Видео выше, наглядный туториал по созданию shake-эффекта с нуля. Автор показывает процесс в реальном времени: от разметки до финальных правок в DevTools (English, 4 минуты).

⁉️🤔 Частые вопросы

Анимация не замедлит загрузку страницы?

Три десятка строк CSS весят меньше 1 Кбайт даже без сжатия. Никаких дополнительных библиотек, никакого JavaScript. Время загрузки страницы не изменится. Для сравнения: один значок Font Awesome в среднем тянет на 2-3 Кбайт.

Работает ли анимация на мобильных?

Да, transform и box-shadow аппаратно ускоряются на iOS и Android начиная с версий 2016 года. Единственный нюанс: Safari до версии 15 иногда дёргает box-shadow при частых перерисовках. Лечится добавлением will-change: box-shadow к кнопке с pulse.

Как отключить анимацию для пользователей с vestibular-расстройствами?

Оберните анимацию в @media (prefers-reduced-motion: no-preference). Тогда при включённой настройке «Уменьшение движения» в ОС кнопка останется статичной. Современные браузеры поддерживают этот media-запрос с 2019 года.

Можно ли запускать анимацию только при наведении?

Замените infinite на none в свойстве animation, а hover-состояние опишите отдельно: .animated-btn:hover { animation: shake 0.4s ease-in-out; }. Кнопка дёрнется один раз при наведении и остановится. Подходит для ситуаций, где автономная анимация конфликтует с дизайном.

Почему кнопка не анимируется после вставки?

Три частые причины: неправильно скопирован класс (проверьте animated-btn--shake с двумя дефисами); CSS-файл темы переопределяет animation (добавьте !important или повысьте специфичность селектора); кнопка лежит внутри контейнера с overflow: hidden, который обрезает тень pulse.

Анимировать или не анимировать: итоговый расклад

Shake-эффект, pulse-эффект, или статичная кнопка, выбор упирается в контекст, а не в моду. Коммерческий лендинг с одной CTA-кнопкой? Shake, раз в 4 секунды, без вариантов. Админка или дашборд с десятком кнопок на экране? Оставьте их статичными, анимируйте только главное действие. Корпоративный сайт с консервативной аудиторией? Pulse-подсветка, минималистично и респектабельно.

Правило, которое мы вывели из десятка A/B-тестов: анимированная кнопка повышает конверсию на несколько процентов при условии, что анимация одна и она не борется за внимание с соседними элементами. Две анимированные кнопки рядом, минус к конверсии, пользователь теряется и не нажимает ни одну.

Скопируйте код из раздела выше, адаптируйте цвета и длительность под свой проект. Если результат понравился, загляните в нашу подборку плагинов кеширования, они помогут сохранить скорость сайта даже с десятком анимированных элементов на странице.