Blog Detail
Pure CSS and Font Awsome
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
<div>
<style scoped>
.pure-button-success,
.pure-button-error,
.pure-button-warning,
.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 */
}
</style>
<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>
</div>
Buttons with different sizes
<div>
<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%;
}
</style>
<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>
</div>
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>
Settings
</button>
<a class="pure-button" href="#">
<i class="icon-shopping-cart icon-large"></i>
Checkout
</a>
Font Awsome
Use this method to get the default Font Awesome CSS with the default Bootstrap CSS.
- Copy the entire font-awesome directory into your project.
- 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">
- Check out the examples to start using Font Awesome.
Sample of FontAwsome
Source :
http://purecss.io/buttons/
http://fortawesome.github.io
Headstart your career with us
Find out more about current openings at Rhino Technology