Companies in every industry need to assume that a software revolution is coming.

(Marc Andreessen )

icon Blog Detail

Pure CSS and Font Awsome

  • Posted: Jan 10, 2014 /
  • By: Admin /
  • Reads : 2,872

Default Buttons

To create a Pure Button, add the pure-button classname to any <a> or <button> element.

<a class="pure-button" href="#">A Pure Button</a>
<button class="pure-button">A Pure Button</button>

Disabled Buttons

To mark a button as disabled, add the pure-button-disabled classname alongside pure-button.

<a class="pure-button pure-button-disabled" href="#">A Disabled Button</a>
<button class="pure-button pure-button-disabled">A Disabled Button</button>

Active Buttons

To style a button so that it appears "pressed", add the pure-button-active classname alongside pure-button.

<a class="pure-button pure-button-active" href="#">An Active Button</a>
<button class="pure-button pure-button-active">An Active Button</button>

Primary Buttons

To indicate that a button represents a primary action, add the pure-button-primary classname alongside pure-button.

<a class="pure-button pure-button-primary" href="#">A Primary Button</a>
<button class="pure-button pure-button-primary">A Primary Button</button>

Customizing Buttons

Thanks to Pure's minimal styling, it is easy to build off of the generic Pure button and create customized buttons for your own application.

To customize button styles, you should group your custom CSS into a class such as pure-button-foo, which you can then append to an element that already has the pure-button classname. Here are some examples.
Colored buttons with rounded corners

    <style scoped>

        .pure-button-secondary {
            color: white;
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);

        .pure-button-success {
            background: rgb(28, 184, 65); /* this is a green */

        .pure-button-error {
            background: rgb(202, 60, 60); /* this is a maroon */

        .pure-button-warning {
            background: rgb(223, 117, 20); /* this is an orange */

        .pure-button-secondary {
            background: rgb(66, 184, 221); /* this is a light blue */


    <button class="pure-button pure-button-success">Success Button</button>
    <button class="pure-button pure-button-error">Error Button</button>
    <button class="pure-button pure-button-warning">Warning Button</button>
    <button class="pure-button pure-button-secondary">Secondary Button</button>

Buttons with different sizes

    <style scoped>

        .pure-button-xsmall {
            font-size: 70%;

        .pure-button-small {
            font-size: 85%;

        .pure-button-large {
            font-size: 110%;

        .pure-button-xlarge {
            font-size: 125%;


    <button class="pure-button pure-button-xsmall">Extra Small Button</button>
    <button class="pure-button pure-button-small">Small Button</button>
    <button class="pure-button">Regular Button</button>
    <button class="pure-button pure-button-large">Large Button</button>
    <button class="pure-button pure-button-xlarge">Extra Large Button</button>

Buttons with icons

Pure doesn't ship with icon fonts, but we play nice with existing ones. Incorporating icon fonts with Pure Buttons is easy. In the example below, we're using icon fonts from Font Awesome. Put the Font Awesome CSS file on your page and use an <i> element within a pure-button element.

<button class="pure-button">
    <i class="icon-cog"></i>

<a class="pure-button" href="#">
    <i class="icon-shopping-cart icon-large"></i>

Dowload Purebutton

Font Awsome

Use this method to get the default Font Awesome CSS with the default Bootstrap CSS.

  1. Copy the entire font-awesome directory into your project.
  2. In the <head> of your html, reference the location to your font-awesome.min.css.  <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
  3. Check out the examples to start using Font Awesome.

Download Fontawsome

Sample of FontAwsome


Source :


Headstart your career with us

Find out more about current openings at Rhino Technology