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.

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>