Pure CSS Buttons

Last Updated : 23 Jul, 2025

Buttons are one of the most common UI elements. They made it possible for users to interact with a system and take action by making selections. We can create different types of buttons with the help of Pure CSS.

Pure CSS Buttons Classes:
  • Default Buttons
  • Disabled buttons
  • Primary buttons
  • Active buttons
  • Customizing buttons

Default Buttons: Add the "pure-button" class name to any <a> or <button> element to create a default button.

Syntax: 
// Link Button
<a class="pure-button" href="#">
  Pure Button1
</a>

// Normal Button
<button class="pure-button">
  Pure Button2
</button>

Example:

HTML 
<!DOCTYPE html>
<html>
<head>
    <!--Import Pure Css files-->
    <link rel="stylesheet"
          href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
          integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
          crossorigin="anonymous"/>
</head>

<body style="text-align: center">
    <!--Default buttons-->
    <strong>Pure CSS Default Buttons</strong>
    <br><br>
    <!-- Link Button -->
    <a class="pure-button" href="#">Pure Button1</a>

    <!-- Normal Button -->
    <button class="pure-button">Pure Button2</button>
</body>
</html>

Output:

Disabled Buttons: To mark a button as disabled add "pure-button-disabled" with class pure-button. You can also use the disabled attribute directly.

Syntax: 
<button class="pure-button pure-button-disabled">
  Disabled Button1
</button>  

<button class="pure-button" disabled> 
  Disabled Button2
</button>

Example:

HTML 
<!DOCTYPE html>
<html>
<head>
    <!--Import Pure Css files-->
    <link rel="stylesheet"
          href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
          integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
          crossorigin="anonymous"/>
</head>

<body style="text-align: center">
    <!--Default buttons-->
    <strong>Pure CSS Disabled Buttons</strong>
    <br><br>
    <!-- Link Button -->
    <a class="pure-button pure-button-disabled" href="#">
        Button Disabled
    </a>

    <!-- Normal Button -->
    <button class="pure-button" disabled="">
        Button Disabled 
    </button>
</body>
</html>

Output:

Active Buttons: To create a button so that it appears “pressed” , you can add "pure-button-active" class along with pure-button to any <a> or <button> element.

Syntax: 
<a class="pure-button pure-button-active" href="#">
  Active Button1
</a>  

<button class="pure-button pure-button-active">
  Active Button2
</button>

Example:

HTML 
<!DOCTYPE html>
<html>
<head>
    <!--Import Pure Css files-->
    <link rel="stylesheet"
        href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
        integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
        crossorigin="anonymous"/>
</head>

<body style="text-align: center">
    <!--Default buttons-->
    <strong>Pure CSS Active Buttons</strong>
    <br><br>
    <!-- Link Button -->
    <a class="pure-button pure-button-active" href="#">
        Active Button1
    </a>

    <!-- Normal Button -->
    <button class="pure-button pure-button-active">
        Active Button2
    </button>
</body>
</html>

Output:

Primary Buttons: To indicate that a button represents primary action add "pure-button-primary" class alongside pure-button.

Syntax: 
<a class="pure-button pure-button-primary" href="#">
  Primary Button1
</a> 
 
<button class="pure-button pure-button-primary">
  Primary Button2
</button>

Example:

HTML 
<!DOCTYPE html>
<html>
<head>
    <!--Import Pure Css files-->
    <link rel="stylesheet"
        href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
        integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
        crossorigin="anonymous"/>
</head>

<body style="text-align: center">
    <!--Default buttons-->
    <strong>Pure CSS Primary Buttons</strong>
    <br><br>
    <!-- Link Button -->
    <a class="pure-button pure-button-primary" href="#">
        Primary Button1
    </a>

    <!-- Normal Button -->
    <button class="pure-button pure-button-primary">
        Primary Button2
    </button>
</body>
</html>

Output:

Customized Buttons: With the help of Pure CSS it is easy to customize buttons for your own application because of its minimal styling. Group your custom CSS into a class such as button-success, which you can then add to an element that already has a pure-button class.

Note: Here we can customize our buttons according to our need, by using manual CSS.

Example:

HTML 
<!DOCTYPE html>
<html>
<head>
    <!--Import Pure Css files-->
  <link rel="stylesheet"
      href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
      integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
      crossorigin="anonymous"/>
  <style>
      /* Styling for Customized Buttons */

      .button-success,
      .button-error,
      .button-warning,
      .button-secondary {
        color: white;
        border-radius: 15px;
        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>
</head>

<body style="text-align: center">
    <!--Customized buttons-->
    <strong>Pure CSS Customized Buttons </strong>
    <br /><br />
    <button class="button-success pure-button">
        Success Button
    </button>

    <button class="button-secondary pure-button">
        Secondary Button
    </button>

    <button class="button-warning pure-button">
        Warning Button
    </button>

    <button class="button-error pure-button">
        Error Button
    </button>
  </body>
</html>

Output:

Buttons with different sizes: Here we can set the size of the button according to our need.
  • Extra small button: Add "button-xsmall" class alongside pure-button.
  • Small button: Add "button-small" class alongside pure-button.
  • Regular button: Add only "pure-button" class.
  • Large button: Add "button-large" class alongside pure-button.
  • Extra large button: Add "button-xlarge" class alongside pure-button.
Note: Here we can resize our buttons according to our need, by using manual CSS.

Example:

HTML 
<!DOCTYPE html>
<html>
<head>
    <!--Import Pure Css files-->
  <link rel="stylesheet"
      href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
      integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
      crossorigin="anonymous"/>
  <style>
        /* Styling for font-size in buttons */
        
        .button-xsmall {
            font-size: 70%;
        }
        
        .button-small {
            font-size: 85%;
        }
        
        .button-large {
            font-size: 110%;
        }
        
        .button-xlarge {
            font-size: 125%;
        }
    </style>
</head>

<body style="text-align: center">
    <!--Customized buttons-->
    <strong>
        Pure CSS Buttons with different Sizes
    </strong>
    <br /><br />
    <button class="button-small pure-button">
        Small Button
    </button>

    <button class="pure-button">
        Normal Button
    </button>

    <button class="button-large pure-button">
        large Button
    </button>

    <button class="button-xlarge pure-button">
        xlarge Button
    </button>
  </body>
</html>

Output:

Reference:https://pure-css.github.io/
Comment
Article Tags:
CSS
Pure CSS

Explore