Pure CSS Buttons

Buttons are used to interact with the different web components. Pure CSS provides different predefined button classes that play an important role during the construction of Pure CSS buttons. These are:

  • Deafult Buttons
  • Active Buttons
  • Disabled Buttons
  • Primary Buttons
  • Button Group

Pure CSS: Default Button

It is the most basic button in Pure CSS. To create a default button, add the pure-button class to any <a> or <button> element.

General Syntax

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

Source Code

          
            <div class="pure-g">
  <div class="pure-u-1 pure-u-sm-1-2">
    <a class="pure-button" href="#">A Pure Button</a>
  </div>
  <div class="pure-u-1 pure-u-sm-1-2">
    <button class="pure-button">A Pure Button</button>
  </div>
</div>          
        
Try it now

Source Code: Output

Disabled Button

Although disabled button displays on the screen but you can not click the button.It can be created either adding the pure-button-disabled & pure-button class to the <button> or <a>element or by assigning the disabled attribute to the <button> or <a> element.

General Syntax

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

Source Code

          
            <div class="pure-g">
  <div class="pure-u-1 pure-u-sm-1-2">
    <a class="pure-button pure-button-disabled" href="#">A Pure Button</a>
  </div>
  <div class="pure-u-1 pure-u-sm-1-2">
    <button class="pure-button" disabled="">A Pure Button</button>
  </div>
</div>          
        
Try it now

Source Code: Output

Active Buttons

Active buttons are those buttons that appear to be pressed after clicking them.To make active button, simply add pure-button-active class along with pure-button class to the <button> or <a> element.

General Syntax

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

Source Code

          
            <div class="pure-g">
  <div class="pure-u-1 pure-u-sm-1-2" style="text-align: center;">
    <a class="pure-button pure-button-active" href="#">An Active Button </a>
  </div>
  <div class="pure-u-1 pure-u-sm-1-2">
    <button class="pure-button pure-button-active">An Active Button</button>
  </div>
</div>          
        
Try it now

Source Code: Output

Primary Buttons

A primary button displays in blue and indicates primary action. To make a primary button, add the .pure-button-primary class along with the .pure-button class to the <button> element.

General Syntax

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

Source Code

          
            <div class="pure-g">
  <div class="pure-u-1 pure-u-sm-1-2">
    <a class="pure-button pure-button-primary" href="#">A Primary Button</a>
  </div>
  <div class="pure-u-1 pure-u-sm-1-2">
    <button class="pure-button pure-button-primary">A Primary Button</button>
  </div>
</div>          
        
Try it now

Source Code: Output

Customized Buttons

To customize button styles, you should group your custom CSS into a class such as button-foo, which you can then add to a button element having .pure-button class.
Look at the given example below, where we have created different classes that provide different colors to the buttons whenever these classes apply to them.

    
    .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 */
      }
   

General Syntax

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

Source Code

          
            <div class="pure-g">
  <div class="pure-u-1 pure-u-sm-1-2">
    <button class="button-success-pure pure-button">Success Button</button>
  </div>
  <div class="pure-u-1 pure-u-sm-1-2">
    <button class="button-error-pure pure-button">Error Button</button>
  </div>
</div>
<div class="pure-g">
  <div class="pure-u-1 pure-u-sm-1-2">
    <button class="button-warning-pure pure-button">Warning Button</button>
  </div>
  <div class="pure-u-1 pure-u-sm-1-2">
    <button class="button-secondary-pure pure-button">Secondary Button</button>
  </div>
</div>          
        
Try it now

Source Code: Output

Button Groups

To group multiple buttons together on a single line, simply place all the buttons into an external wrapper and add .pure-button-group class to it. Do not forget to add a .pure-button class to each button.

General Syntax

      <div class="pure-button-group">
  <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>
    

Source Code

          
            <div class="pure-g">
  <div class="pure-u-1 pure-u-sm-1">
    <div class="pure-button-group custom--alignment-btn" role="group">
      <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>
  </div>
</div>          
        
Try it now

Source Code: Output

Button Different Sizes

You can also change the Pure CSS button's size by using custom CSS. To create a Pure CSS button of different sizes, simply create different classes for different button sizes and then assign them to the specific button. It will create different buttons of different sizes.Let, us take an example to understand it better.

    
      .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 */
      }

      .button-xsmall {
        font-size: 70%;
      }

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

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

      .button-xlarge {
        font-size: 125%;
      }
   

Source Code

          
            <div class="pure-g">
  <div class="pure-u-1 pure-u-sm-1-2">
    <button class="button-success pure-button button-xsmall">Extra Small Button</button>
  </div>
  <div class="pure-u-1 pure-u-sm-1-2">
    <button class="button-error pure-button button-small">Small Button</button>
  </div>
</div>
<div class="pure-g">
  <div class="pure-u-1 pure-u-sm-1-2">
    <button class="button-warning pure-button button-large">Large Button</button>
  </div>
  <div class="pure-u-1 pure-u-sm-1-2">
    <button class="button-secondary pure-button button-xlarge">Extra Large Button</button>
  </div>
</div>          
        
Try it now

Source Code: Output

Web Tutorials

Pure CSS Buttons
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4