Pure CSS Buttons

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:

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:

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:

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:

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:

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:

Output:

Reference:https://purecss.io/buttons/