Pure.CSS Buttons

What is Button

In GUI (Graphical User Interfaces), a button is a small outlined area in a dialog box that can be used to select an option or command by clicking on it.

A list of different types of buttons:

Default Buttons
Disabled Buttons
Active Buttons
Primary Buttons
Customized Buttons
Different types of Buttons
Buttons with Icons
Button Groups

Pure.CSS Default Buttons

The "pure-button" classname is used to any <a> or <button> element to create a pure button.

Example:

See the following example to create a pure button.

<!DOCTYPE html>
<html>
<link rel="stylesheet" 
href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" 
integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
crossorigin="anonymous">
<a class="pure-button" 
href="#">A Pure Button</a>
<button class="pure-button">
A Pure Button</button>
</html>

Test it Now

Output:

Pure.CSS Disabled Buttons

The "pure-button-disabled" classname is used along with pure-button to mark a button as disabled.

You can also use the "disabled" attribute directly to your button for the same result.

Example

See the both ways to make button disabled.

<!DOCTYPE html>
<html>

<link rel="stylesheet" 
href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" 
integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
crossorigin="anonymous">

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

</html>

Test it Now

Output:

Pure.CSS Active Buttons

The "pure-button-active" classname is used along with pure-button to style a button so that it appears "pressed".

You can put pure-button-active classname to any <a> or <button> element.

Example

<!DOCTYPE html>
<html>

<link rel="stylesheet" 
href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" 
integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
crossorigin="anonymous">

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

</html>

Test it Now

Output:

Pure.CSS Primary Buttons

You have to add "pure-button-primary" classname alongside pure-button to indicate that the button represents a primary action.

You can put pure-button-primary classname to any <a> or <button> element.

Example

<!DOCTYPE html>
<html>

<link rel="stylesheet" 
href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" 
integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
crossorigin="anonymous">

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

</html>

Test it Now

Output:

Customized Buttons

You can also cutomize buttons for your own applications. It is very easy to customize a pure button because Pure.CSS needs minimal styleing.

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.

Example

<!DOCTYPE html>
<html>

<link rel="stylesheet" 
href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" 
integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
crossorigin="anonymous">

<div>
    <style scoped>

        .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);
        }

        .button-error {
            background: rgb(202, 60, 60);
        }

        .button-warning {
            background: rgb(223, 117, 20);
        }

        .button-secondary {
            background: rgb(66, 184, 221);
        }

    </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>
</html>

Test it Now

Output:

Different Types of Buttons

Extra small buttons
Small buttons
Regular buttons
Large buttons
Extra large buttons

Example

Let's take an example to see all buttons in Pure.CSS:

<!DOCTYPE html>
<html>

<link rel="stylesheet" 
href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" 
integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
crossorigin="anonymous">

<div>
    <style scoped>

        .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>
</html>

Test it Now

Output:

Button with Icons

Pure doesn't come with icon fonts, but we can use icon fonts with Pure Buttons. In the example below, we're using icon fonts from Font Awesome. You have to put Font Awesome CSS file on your page and use an <i> element within a pure-button element.

Use font-awesome in your project by using following code:

<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">

Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
  
<link rel="stylesheet" 
href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" 
integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
crossorigin="anonymous">


<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>
</head>

</html>

Test it Now

Output: