Buttons

Native Buttons

Flat Button
Primary Button
Secondary Button
Disabled Button

HTML5
Insert the class 'button' and then the class for the button you want.

<div class="button flat">Flat Button</div>

<div class="button primary">Primary Button</div>
            
<div class="button secondary">Secondary Button</div>
            
<div class="button disabled">Disabled Button</div>

CSS3
This is the default styling of the different buttons.

.button {
    padding: 7px 15px 8px 15px; 
    border: 0; 
    border-radius: 0; 
    font-size: 16px; 
    font-weight: 700;

    &.flat { 
        background: @blue; 
        color: #fff; 
    }
    &.primary { 
        #gradient > .vertical(#034ea3, #034795); color:#fff; 
    }
    &.secondary { 
        #gradient > .vertical(#ffffff, #f9f9f9); 
        border: 1px solid #e4e4e4; 
        color: #454545; 
        box-shadow: inset 0 -2px 0 rgba(0,0,0,.05); 
    }
    &.disabled { 
        #gradient > .vertical(#f9f9f9, #e1e1e1); 
        border: 1px solid #ccc; 
        color: #999; 
        pointer-events:all!important; 
        cursor: help; 
    }
}

Guiding Buttons

HTML5
To create a guide button, you simply have to make a p tag with the class guide-inline.
To make it clickable you put an a tag with a href inside the p tag.
If you don't write anything in the a tag, you will not get anything displayed.

<p class="guide-inline">
    <a href="#" title="">Button with hover</a>
</p>