Custom Pure.css Button
Pure.css or just Pure, is a set of small, responsive CSS modules for creating websites and web apps. Pure was created and still is maintained by Yahoo. In this tutorial, I’m going to show you how to easily create custom Pure button.

Pure.css or just Pure, is a set of small, responsive CSS modules for creating websites and web apps. Pure was created and still is maintained by Yahoo. In this tutorial, I’m going to show you how to easily create custom Pure button.
Custom Pure Button CSS
Pure has minimal styling for its buttons: you can change the size and add an icon but that’s it. Pure does not have an array of different button colouring like Bootstrap does – Pure only has a default and primary button.
Due to the minimal styling, you can build upon Pure’s button class .pure-button
very easily.
For the green button in the demo, the CSS is:
.button-custom {
color: #fff;
border-radius: 4px;
background: #7fbb00;
}
For the yellow button, the CSS is:
.button-custom2 {
color: #000;
border-radius: 8px;
background: #ffcc33;
}
Custom Pure Button HTML
The HTML is also very simple. By default, the HTML for a Pure button is:
<a class="pure-button" href="#">Custom Pure Button</a>
For a custom button, all we have to do is add the CSS class to the class
attribute.
Therefore, for the green button, the HTML would be:
<a class="pure-button button-custom" href="#">Custom Pure Button</a>
And for the yellow button, the HTML would be:
<a class="pure-button button-custom2" href="#">Custom Pure Button</a>