Buttons

Buttons is a handy tool to implement standard behavior of the elements on a page

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 style

<button class="btn icon-toaster">.btn.icon-toaster</button>
<button class="btn icon icon-toaster"></button>
<button class="btn outline-bg">.btn.outline-bg</button>
<button class="btn link">.btn.link</button>

Button size

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

<button class="btn larger">.btn .larger</button>
<button class="btn large">.btn .large</button>
<button class="btn">.btn</button>
<button class="btn small">.btn .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">.btn.block</button>

Button colors

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

Alternative button colors

<button class="btn inverse">.btn.inverse</button>
<button class="btn inverse success">.btn.inverse.success</button>
<button class="btn inverse info">.btn.inverse.info</button>
<button class="btn inverse warning">.btn.inverse.warning</button>
<button class="btn inverse error">.btn.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>

Share with your friends

Google+