Buttons

Buttons are aways needed on a website.

For creating buttons add the class a .btn or all button will be in this styles. If you want to alter the size of buttons add the classes .small , .medium, .large, .xlarge For example:





HTML Example
<button> ... </button>
<button class="medium">...</button>
<a href="#" class="btn">...</a>
<a href="#" class="btn medium">...</a>

Styling

Create buttons in different styles as below

For to alter the radius of corners of buttons add the class .bradius-x (1,2,3,4)
If you want on mouse condition on button it is growing add the class .growing
If you want the light version add the class .light
If want alter the style of border add one of these classes .dotted, .dashed,.thick
If you want the white text style add class .normal For example:

HTML Example
<a href="#" class="btn small bradius-1">...</a>
<a href="#" class="btn growing bradius-4 uppercase">...</a>
<a href="#" class="btn bradius-4 medium dashed light">...</a>
<a href="#" class="btn light large bradius-3">...</a>
<a href="#" class="btn xlarge normal">...</a>
<a href="#" class="btn embossed bradius-1">...</a>
<a href="#" class="btn wide bradius-1">...</a>

Button with icon

Buttons with special icons as in table below

If you can alter the vertical and horizontal of position of tabs add the classes .right to tabs. Default position is horizontal but if you want vertical position add the class .vertical to tabs. For example:

HTML Example
<a href="#" class="btn small icon-location"> ...</a>
<a href="#" class="btn icon-right icon-location"> ...</a>
<a href="#" class="btn embossed icon-charline bradius-1"> ...</a>
<a href="#" class="btn wide icon-close bradius-1"> ...</a>
<a href="#" class="btn medium icon-mail bradius-2 growingt"> ...</a>
<a href="#" class="btn large icon-seo light bradius-4 growing"> ...</a>
<a href="#" class="btn xlarge icon-seo light bradius-3 dashed"> ...</a>