Buttons are very essential and are used often. Pure CSS has a very beautiful and responsive CSS for customizing the appearance of a button.
There are many types of buttons which one can add in their website.
These are the various types of buttons used in Pure :
We will also see how to use different sizes of buttons and also using icons with them.
Pure.CSS Default Buttons
It is the most basic button in Pure, you can add it by using class pure-button in any <a> or
<button> tag. Look below to see the syntax to use the buttons within the webpage and also see a full example in the try-it
editor to understand it properly.
<a class="pure-button" href="#"> A Pure Button </a>
<button class="pure-button"> A Pure Button </button>
A disabled button is the one on which you wouldn't be able to click but it will be visible to the user. The class for this button is pure-button-disabled. This class will be used along with pure-button class to make a button as disabled. Remember to use both the classes, it's a predefined syntax, no need to think much about it.
Note: HTML's disabled attribute can also be used directly with the pure-button class to make it disable. Look below the syntax to make a button disabled by both ways-
<button class="pure-button pure-button-disabled"> A Disabled Button </a>
<button class="pure-button" disabled> A Disabled Button </button>
An active button is another button but with a bit different property. Whenever a user clicks on this button it appears like it is 'pressed'. It's class is pure-button-active which is again used along with pure-button class.
Look below to see the syntax to add this button in the website-
<class="pure-button pure-button-active" href="#"> An Active Button </a>
<button class="pure-button pure-button-active"> An Active Button </button>
Pure gives you option to customize the buttons for your website. It is very easy to customize a pure button. Just create a class of your own like button-foo and add the required CSS which you want to use in the button and then use this class along with the pure-button class.
Look at the example below where we have created different classes which will give different colors to the buttons. We have used those classes with button tag to create buttons. Have a look at it and customize it by using different CSS properties.
<title> Pure.CSS Customized button </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css">
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
background: rgb(28, 184, 65);
/* this is a green */
background: rgb(202, 60, 60);
/* this is a maroon */
background: rgb(223, 117, 20);
/* this is an orange */
background: rgb(66, 184, 221);
/* this is a light blue */
<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>
Pure.CSS Customized button
Pure.CSS Button Size
You can also change the size of the buttons if you think that the default size is too large. It is part of the customization of buttons. Here also, we will make different classes for different sizes and will specify the size within them.
In the example below we have used sizes-
Extra Small Buttons
Extra Large Buttons
You can specify any size for any button. Try this example in the editor and use different sizes to see the result-
Pure CSS gives the freedom of using different icons packages, we will use those in within the buttons to enhance their appearance.In the example below,The font-awesome package's icons are used as you can see the use of font awesom's CDN path. As we know, we have to use the icon's class within an <i> tag. Have a look at it and try to understand how to add icons with buttons.