CSS-кнопки, перше, з чим взаємодіє відвідувач на сайті. Хороша кнопка спрямовує погляд, підштовхує до дії та працює без JavaScript на мобільних. Погана, зливається з фоном і не має зворотного зв’язку при натисканні. Але більшість кнопок виглядають однаково: плаский прямокутник, зміна кольору при наведенні, та й годі. А кнопка ж може бути самостійним елементом дизайну, з анімацією, 3D-ефектом, градієнтною заливкою або іконкою, що виїжджає при наведенні курсора.

Один із найвідоміших наборів креативних кнопок, CreativeButtons від студії Codrops. Це колекція з восьми категорій стилів: від мінімалістичних бордюрів до об’ємних 3D-трансформацій. Вихідний код відкритий, код чистий, а демо-сторінка досі працює, через 13 років після публікації. У цій статті розберемо, які стилі входять до набору, як підключити їх до будь-якого сайту та як інтегрувати з WordPress через functions.php.

💡 Швидкий огляд:

• Завантажте архів із GitHub-репозиторію Codrops, там лежать усі CSS-файли та демо-розмітка
• Підключіть component.css і default.css до проєкту, скопіюйте HTML-розмітку потрібного стилю кнопки
• Для WordPress пропишіть wp_enqueue_style у functions.php теми, вказавши шлях до файлів у папці теми
• Налаштуйте кольори та розміри під свій дизайн: перевизначте CSS-властивості в дочірній таблиці стилів
• Перегляньте відеорозбір CSS-ефектів для кнопок нижче, щоб побачити анімації в дії

Що таке CreativeButtons

Codrops опублікували CreativeButtons у червні 2013 року як демонстрацію виражальних можливостей CSS3. Набір містить вісім категорій стилів, кожна вирішує своє візуальне завдання:

Кожна кнопка — це чистий HTML і CSS. У кількох стилях (наприклад, btn-4 з іконкою) використовується JavaScript для перемикання класів при кліку, але основна магія, у transition, transform і псевдоелементах ::before та ::after.

Іконки в наборі, з бібліотеки IcoMoon. Вони вставляються через псевдоелемент ::before із символом з іконкового шрифту, що позбавляє необхідності вантажити окремі SVG-файли.

HTML-розмітка: універсальний каркас

Розмітка кнопок навмисно проста. Розробник додає до елемента <button> загальний клас і два номерні:

1
<button class="btn btn-6 btn-6d">Button</button>

Клас btn — це скидання браузерних стилів (border, outline, background). Клас btn-6, загальні властивості для категорії (пунктирна рамка, скруглення). Клас btn-6d, індивідуальний стиль конкретної кнопки всередині категорії. Така трирівнева структура дає змогу комбінувати десятки варіацій за мінімуму дублювання коду.

Якщо кнопка містить іконку, додається ще один клас, наприклад, btn-4a icon-arrow-right. Іконка рендериться через ::before із content-символом зі шрифту IcoMoon:

1
.btn-4a::before {
2
    content: "\e005";
3
    font-family: 'icomoon';
4
    margin-right: 8px;
5
}

Важливий момент: у демо-версії класи розділені виключно для зручності демонстрації. У бойовому проєкті властивості одного стилю варто об’єднати в один клас, так знижується вага селекторів і спрощується перевизначення.

CSS-стилі: від скидання до анімації

Базовий клас .btn робить мінімум: прибирає фон, рамку та відступи браузера, задає cursor: pointer і position: relative (для позиціювання псевдоелементів). Уся виразність, у категорійних та індивідуальних класах.

Ось приклад стилів для кнопки btn-6d, пунктирна рамка із заливкою при наведенні:

1
/* Button 6d — dashed border with background fill */
2
.btn-6d {
3
    border: 2px dashed #226fbe;
4
    color: #226fbe;
5
    background: transparent;
6
    transition: all 0.3s ease;
7
}
8
 
9
.btn-6d:hover {
10
    background: #226fbe;
11
    color: #fff;
12
}

Жодної магії, тільки transition і зміна значень background з color на ховері. Цей самий принцип, основа всіх восьми категорій. Різниця в деталях: десь додається transform: scale(), десь, box-shadow для об’єму, десь, анімація через @keyframes для нескінченного циклу пульсації.

Підключаємо до WordPress

Щоб кнопки запрацювали в WordPress-темі, потрібно завантажити CSS-файли в папку теми та підключити їх через wp_enqueue_style. Створіть підпапку (наприклад, JS_CSS_Plugins/CreativeButtons/css/) у директорії активної теми та скопіюйте туди component.css і default.css.

Потім додайте в functions.php:

1
/**
2
 * Enqueue CreativeButtons CSS files.
3
 * Source: https://github.com/codrops/CreativeButtons
4
 */
5
function creativebuttons_enqueue_styles() {
6
    $theme_uri = get_template_directory_uri();
7
 
8
    wp_enqueue_style(
9
        'creativebuttons-component',
10
        $theme_uri . '/JS_CSS_Plugins/CreativeButtons/css/component.css',
11
        array(),
12
        '1.0.0'
13
    );
14
 
15
    wp_enqueue_style(
16
        'creativebuttons-default',
17
        $theme_uri . '/JS_CSS_Plugins/CreativeButtons/css/default.css',
18
        array(),
19
        '1.0.0'
20
    );
21
}
22
add_action( 'wp_enqueue_scripts', 'creativebuttons_enqueue_styles' );

Дві окремі функції в оригінальному прикладі замінено на одну, так чистіше й простіше підтримувати. Порядок підключення важливий: спочатку component.css (основні стилі категорій), потім default.css (індивідуальні стилі кнопок). У разі конфлікту з темою перевизначте потрібні властивості в дочірній таблиці стилів із вищим пріоритетом.

Сучасні альтернативи: що змінилося за 13 років

CreativeButtons, перевірений часом набір, але CSS з 2013 року пішов далеко вперед. Якщо ви починаєте новий проєкт у 2026 році, варто придивитися до більш сучасних інструментів:

• CSS-змінні. Замість жорстко заданих #226fbe використовуйте var(--btn-primary). Це спрощує зміну колірної схеми та підтримку темної теми.
• Логічні властивості. padding-inline і margin-block замість padding-left/right і margin-top/bottom, кнопка коректно відображається в RTL-мовах без додаткового коду.
• prefers-reduced-motion. Обгорніть анімації в медіа-запит і вимикайте їх для користувачів із підвищеною чутливістю до руху.
• Готові колекції. Free Frontend підтримує добірку з 220+ CSS-кнопок із CodePen-демо, а Uiverse пропонує 1900+ варіантів із Tailwind-сумісністю.

Але якщо вам потрібен мінімалістичний, зрозумілий і незалежний від фреймворків набір, CreativeButtons, усе ще чудовий вибір. Код читається за пів години, правиться під будь-який дизайн і не тягне залежностей.

Подивіться короткий туторіал із CSS hover-ефектів, від базових transition до комплексних анімацій на чистому CSS:

У відео наочно показано, як працюють transition, transform і keyframes-анімації на кнопках. Після перегляду ви зможете не тільки повторити стилі CreativeButtons, а й написати власні ефекти з нуля.

⁉️🤔 Часті запитання

Чи можна використовувати CreativeButtons у комерційних проєктах?

Так, вихідний код поширюється вільно. Репозиторій на GitHub не містить явної ліцензії, але Codrops публікують демо-ресурси як загальнодоступні для навчання та використання. Для повної впевненості додайте посилання на джерело в коментарях CSS.

Чи обов’язково підключати обидва CSS-файли?

Ні. Якщо вам потрібен лише один стиль кнопок, скопіюйте відповідні CSS-правила в основну таблицю стилів теми. component.css і default.css розділені для зручності навігації по демо, а не з технічної необхідності.

Як змінити колір кнопки під свій бренд?

Знайдіть у default.css селектор потрібного стилю (наприклад, .btn-6d) і замініть значення color та border-color. Для градієнтних стилів (btn-8) замініть кольори в background-image: linear-gradient(). Перевизначайте в дочірній темі або в кастомайзері WordPress (розділ «Додаткові стилі»).

Чи працюють кнопки на мобільних пристроях?

Так, усі ефекти побудовані на :hover і transition, вони коректно обробляються мобільними браузерами. Зважте, що на сенсорних екранах немає стану hover як такого: браузер застосовує hover-стилі на перший дотик, а дія спрацьовує на другий. Для критичних CTA-кнопок використовуйте стилі, які добре виглядають і без hover-ефекту.

Чи варто використовувати CreativeButtons у 2026 році

CreativeButtons, рідкісний випадок, коли код 2013 року залишається робочим і корисним. CSS-специфікації, на яких він побудований: transition, transform і псевдоелементи, давно стали стандартом і підтримуються всіма браузерами.

Беріть цей набір, якщо вам потрібні: швидке прототипування без фреймворків, зрозуміла кодова база для навчання junior-розробників або готові стилі для особистого проєкту, де не потрібна дизайн-система рівня великого продукту. Для великого комерційного проєкту розумніше взяти сучасну колекцію з CSS-змінними та підтримкою accessibility з коробки.

Завантажте CreativeButtons з GitHub і спробуйте будь-яку з восьми категорій на своєму проєкті, від прототипу до продакшену.