Buttons

Default Buttons

To create a Pure Button, add the pure-button classname to any <a> or <button> element.

<a class="pure-button" href="#">A Pure Button</a>
<button class="pure-button">A Pure Button</button>

Disabled Buttons

To mark a button as disabled, add the pure-button-disabled classname alongside pure-button. Alternatively, add the "disabled" attribute directly to your button.

<button class="pure-button pure-button-disabled">A Disabled Button</button>
<button class="pure-button" disabled="">A Disabled Button</button>

Active Buttons

To style a button so that it appears "pressed", add the pure-button-active classname alongside pure-button.

An Active Button

<a class="pure-button pure-button-active" href="#">An Active Button</a>
<button class="pure-button pure-button-active">An Active Button</button>

Primary Buttons

To indicate that a button represents a primary action, add the pure-button-primary classname alongside pure-button.

A Primary Button

<a class="pure-button pure-button-primary" href="#">A Primary Button</a>
<button class="pure-button pure-button-primary">A Primary Button</button>

Customizing Buttons

Thanks to Pure's minimal styling, it is easy to build off of the generic Pure button and create customized buttons for your own application.

To customize button styles, you should group your custom CSS into a class such as button-foo, which you can then add to an element that already has the pure-button classname. Here are some examples.

Colored buttons with rounded corners

<div>
    <style>
        .button-success,
        .button-error,
        .button-warning,
        .button-secondary {
            color: white;
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }

        .button-success {
            background: rgb(28, 184, 65);
            /* this is a green */
        }

        .button-error {
            background: rgb(202, 60, 60);
            /* this is a maroon */
        }

        .button-warning {
            background: rgb(223, 117, 20);
            /* this is an orange */
        }

        .button-secondary {
            background: rgb(66, 184, 221);
            /* this is a light blue */
        }
    </style>
    <button class="button-success pure-button">Success Button</button>
    <button class="button-error pure-button">Error Button</button>
    <button class="button-warning pure-button">Warning Button</button>
    <button class="button-secondary pure-button">Secondary Button</button>
</div>

Buttons with different sizes

<div>
    <style>
        .button-xsmall {
            font-size: 70%;
        }

        .button-small {
            font-size: 85%;
        }

        .button-large {
            font-size: 110%;
        }

        .button-xlarge {
            font-size: 125%;
        }
    </style>
    <button class="button-xsmall pure-button">Extra Small Button</button>
    <button class="button-small pure-button">Small Button</button>
    <button class="pure-button">Regular Button</button>
    <button class="button-large pure-button">Large Button</button>
    <button class="button-xlarge pure-button">Extra Large Button</button>
</div>

Buttons with icons

Pure doesn't ship with icon fonts, but we play nice with existing ones. Incorporating icon fonts with Pure Buttons is easy. In the example below, we're using icon fonts from Font Awesome. Put the Font Awesome CSS file on your page and use an <i> element within a pure-button element.

Checkout

<button class="pure-button">
    <i class="fa fa-cog"></i>Settings
</button>
<a class="pure-button" href="#">
    <i class="fa fa-shopping-cart fa-lg"></i>Checkout
</a>

Button Groups

Group multiple buttons together on a single line.

<div class="pure-button-group" role="group" aria-label="...">
    <button class="pure-button">A Pure Button</button>
    <button class="pure-button">A Pure Button</button>
    <button class="pure-button pure-button-active">A Pure Button</button>
</div>