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

Рішення не в дизайні за $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-тестів: анімована кнопка підвищує конверсію на кілька відсотків за умови, що анімація одна і вона не бореться за увагу з сусідніми елементами. Дві анімовані кнопки поруч, мінус до конверсії, користувач губиться і не натискає жодну.

Скопіюйте код із розділу вище, адаптуйте кольори й тривалість під свій проєкт. Якщо результат сподобався, зазирніть у нашу добірку плагінів кешування, вони допоможуть зберегти швидкість сайту навіть із десятком анімованих елементів на сторінці.