Basic styles

Button style can be applied to any element with class .btn. We suggest to apply it to the elements <a> and <button> for the best result.

Link
<a href="javascript:;" class="btn">Link</a>
<input type="submit" class="btn" value='Submit'>
<button class="btn">Button</button>

Active and disabled buttons

<button class="btn active">Active</button>
<button class="btn" disabled>Disabled (attribute disabled="true")</button>

Button type


<button class="btn icon-toaster">With icon</button>
<button class="btn icon icon-toaster">Only icon</button>
<button class="btn outline">Outline</button>
<button class="btn link">Link</button>
<button class="btn transparent">Transparent</button>
<button class="btn caption icon-toaster">Icon + Caption</button>

Button size

You need big and small buttons? Add classes .larger, .large or .small for additional size.

<button class="btn larger">Larger</button>
<button class="btn large">Large</button>
<button class="btn">Default</button>
<button class="btn small">Small</button>
 

You need a button which size coincides with the width of the parent element?  — Add the class .block to the button or any element with the class  .btn.

<button class="btn block">Block</button>

Button colors


<button class="btn">Default</button>
<button class="btn success">Success</button>
<button class="btn info">Info</button>
<button class="btn warning">Warning</button>
<button class="btn error">Error</button>

Alternative button colors

<button class="btn inverse">Inverse</button>
<button class="btn inverse success">Inverse success</button>
<button class="btn inverse info">Inverse info</button>
<button class="btn inverse warning">Inverse warning</button>
<button class="btn inverse error">Inverse error</button>

Button groups


Multi selection

<div class="btn-group">
    <input id="btn1checkbox" class="hidden" name="button" type="checkbox" checked>
    <label class="btn" for="btn1checkbox">Variant №1</label>
    
    <input id="btn2checkbox" class="hidden" name="button" type="checkbox">
    <label class="btn" for="btn2checkbox">Variant №2</label>
    
    <input id="btn3checkbox" class="hidden" name="button" type="checkbox">
    <label class="btn" for="btn3checkbox">Variant №3</label>
</div>

Single selection

<div class="btn-group">
    <input id="btn1radio" class="hidden" name="button" type="radio">
    <label class="btn" for="btn1radio">Variant №1</label>
    
    <input id="btn2radio" class="hidden" name="button" type="radio">
    <label class="btn" for="btn2radio">Varinat №2</label>
    
    <input id="btn3radio" class="hidden" name="button" type="radio" checked>
    <label class="btn" for="btn3radio">Variant №3</label>
</div>