CSS buttons are the first thing visitors interact with on a website. A good button draws the eye, encourages action, and works without JavaScript on mobile. A bad one blends into the background and provides no feedback when pressed. Yet most buttons look the same: a flat rectangle, a color change on hover, and that's it. But a button can be a design element in its own right, with animation, a 3D effect, gradient fill, or an icon that slides in on hover.

One of the most well-known sets of creative buttons is CreativeButtons from the Codrops studio. It's a collection of eight style categories ranging from minimalist borders to volumetric 3D transformations. The source code is open, the code is clean, and the demo page still works 13 years after publication. In this article, we'll look at what styles are included in the set, how to add them to any website, and how to integrate them with WordPress via functions.php.

💡 Quick overview:

• Download the archive from the Codrops GitHub repository, which contains all CSS files and demo markup
• Connect component.css and default.css to your project, copy the HTML markup for the button style you need
• For WordPress, add wp_enqueue_style in your theme's functions.php, specifying the path to files in the theme folder
• Customize colors and sizes to match your design: override CSS properties in a child stylesheet
• Watch the CSS button effects tutorial below to see the animations in action

What is CreativeButtons

Codrops published CreativeButtons in June 2013 as a demonstration of CSS3's expressive capabilities. The set includes eight style categories, each solving its own visual task:

Each button is pure HTML and CSS. A few styles (such as btn-4 with an icon) use JavaScript to toggle classes on click, but the main magic lies in transition, transform, and the ::before and ::after pseudo-elements.

The icons in the set come from the IcoMoon library. They are inserted via the ::before pseudo-element with a character from an icon font, eliminating the need to load separate SVG files.

HTML markup: a universal framework

The button markup is intentionally simple. The developer adds a common class and two numbered ones to a <button> element:

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

The btn class resets browser styles (border, outline, background). The btn-6 class contains common properties for the category (dashed border, rounding). The btn-6d class is the individual style for a specific button within the category. This three-level structure allows combining dozens of variations with minimal code duplication.

If the button contains an icon, another class is added, for example, btn-4a icon-arrow-right. The icon is rendered via ::before with a content character from the IcoMoon font:

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

An important note: in the demo version, classes are separated purely for demonstration purposes. In a production project, properties for one style should be combined into a single class, reducing selector weight and simplifying overrides.

CSS styles: from reset to animation

The base .btn class does the minimum: removes the browser's background, border, and padding, sets cursor: pointer and position: relative (for positioning pseudo-elements). All the expressiveness comes from category and individual classes.

Here's an example of styles for the btn-6d button (dashed border with fill on hover):

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
}

No magic here, just transition and changing the background and color values on hover. This same principle is the foundation of all eight categories. The difference is in the details: some add transform: scale(), some use box-shadow for depth, and some animate via @keyframes for an infinite pulsation cycle.

Connecting to WordPress

For the buttons to work in a WordPress theme, you need to upload the CSS files to the theme folder and include them via wp_enqueue_style. Create a subfolder (for example, JS_CSS_Plugins/CreativeButtons/css/) in your active theme directory and copy component.css and default.css there.

Then add this to 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' );

The two separate functions in the original example have been replaced with one, making it cleaner and easier to maintain. The order of inclusion matters: first component.css (main category styles), then default.css (individual button styles). If there's a conflict with your theme, override the necessary properties in a child stylesheet with higher priority.

Modern alternatives: what has changed in 13 years

CreativeButtons is a time-tested set, but CSS has come a long way since 2013. If you're starting a new project in 2026, consider more modern tools:

• CSS variables. Instead of hardcoded #226fbe, use var(--btn-primary). This simplifies color scheme changes and dark theme support.
• Logical properties. padding-inline and margin-block instead of padding-left/right and margin-top/bottom, so the button displays correctly in RTL languages without additional code.
• prefers-reduced-motion. Wrap animations in a media query and disable them for users with motion sensitivity.
• Ready-made collections. Free Frontend maintains a collection of 220+ CSS buttons with CodePen demos, and Uiverse offers 1900+ options with Tailwind compatibility.

But if you need a minimalist, understandable set that doesn't depend on frameworks, CreativeButtons is still an excellent choice. The code can be read in half an hour, modified for any design, and has no dependencies.

Watch this short tutorial on CSS hover effects, from basic transitions to complex animations in pure CSS:

The video clearly shows how transition, transform, and keyframes animations work on buttons. After watching, you'll be able to not only replicate CreativeButtons styles but also write your own effects from scratch.

⁉️🤔 Frequently asked questions

Can I use CreativeButtons in commercial projects?

Yes, the source code is freely distributed. The GitHub repository doesn't contain an explicit license, but Codrops publishes demo resources as publicly available for learning and use. For complete certainty, add a link to the source in your CSS comments.

Do I need to include both CSS files?

No. If you only need one button style, copy the corresponding CSS rules into your theme's main stylesheet. component.css and default.css are separated for easier demo navigation, not out of technical necessity.

How do I change the button color to match my brand?

Find the selector for the style you need in default.css (for example, .btn-6d) and replace the color and border-color values. For gradient styles (btn-8), replace the colors in background-image: linear-gradient(). Override in a child theme or in the WordPress customizer (the "Additional CSS" section).

Do the buttons work on mobile devices?

Yes, all effects are built on :hover and transition, which are handled correctly by mobile browsers. Keep in mind that touchscreens don't have a hover state as such: the browser applies hover styles on the first tap, and the action triggers on the second. For critical CTA buttons, use styles that look good even without the hover effect.

Is it worth using CreativeButtons in 2026

CreativeButtons is a rare case where code from 2013 remains functional and useful. The CSS specifications it's built on (transition, transform, and pseudo-elements) have long become standard and are supported by all browsers.

Use this set if you need: rapid prototyping without frameworks, a clear codebase for teaching junior developers, or ready-made styles for a personal project that doesn't require an enterprise-level design system. For a large commercial project, it makes more sense to choose a modern collection with CSS variables and built-in accessibility support.

Download CreativeButtons from GitHub and try any of the eight categories on your project, from prototype to production.