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 и попробуйте любую из восьми категорий на своём проекте, от прототипа до продакшена.