---
layout: default
title:  "Buttons"
date:   2013-05-17 23:24:04
---

Buttons
=======

~~~html
<a href="#" class="btn">Button</a>
~~~

Sizes
------

<a href="#" class="btn btn-mini">Mini</a>
<p><a href="#" class="btn btn-small">Small</a></p>
<p><a href="#" class="btn">Normal</a></p>
<p><a href="#" class="btn btn-medium">Medium</a></p>
<p><a href="#" class="btn btn-large">Large</a></p>

~~~html
<a href="#" class="btn btn-mini">Mini</a>
<a href="#" class="btn btn-small">Small</a>
<a href="#" class="btn">Normal</a>
<a href="#" class="btn btn-medium">Medium</a>
<a href="#" class="btn btn-large">Large</a>
~~~

Variations
----------

<p><a href="#" class="btn btn-info">Info</a></p>
<p><a href="#" class="btn working">Working...</a></p>
<p><a href="#" class="btn btn-success">Success</a></p>
<p><a href="#" class="btn btn-warning">Warning</a></p>
<p><a href="#" class="btn btn-error">Error</a></p>
<p><a href="#" class="btn btn-disabled">Disabled</a></p>
<a href="#" class="btn info">Info without btn-prefix in class</a>
<p><a href="#" class="btn btn-info btn-disabled">Info button, disabled</a></p>


~~~html
<a href="#" class="btn btn-info">Info</a>
<a href="#" class="btn btn-working">Working...</a>
<a href="#" class="btn btn-success">Success</a>
<a href="#" class="btn btn-warning">Warning</a>
<a href="#" class="btn btn-error">Error</a>
<a href="#" class="btn btn-disabled">Disabled</a>
<a href="#" class="btn info">Info without btn-prefix in class</a>
<a href="#" class="btn btn-info btn-disabled">Info button, disabled</a>
~~~


Button Groups
-------------

<p>
<div class="btn-group">
  <button type="button" class="btn">PDF</button>
  <button type="button" class="btn">MOBI</button>
  <button type="button" class="btn">EPUB</button>
  <button type="button" class="btn">HTML</button>
</div>
</p>

~~~html
<div class="btn-group">
  <button type="button" class="btn">PDF</button>
  <button type="button" class="btn">MOBI</button>
  <button type="button" class="btn">EPUB</button>
  <button type="button" class="btn">HTML</button>
</div>
~~~

You can even use colors and sizes:

<p>
<div class="btn-group">
  <button type="button" class="btn btn-medium">Hey</button>
  <button type="button" class="btn btn-medium btn-info">Look At Me</button>
  <button type="button" class="btn btn-medium">Hello</button>
</div>
</p>

~~~html
<div class="btn-group">
  <button type="button" class="btn btn-medium">Hey</button>
  <button type="button" class="btn btn-medium btn-info">Look At Me</button>
  <button type="button" class="btn btn-medium">Hello</button>
</div>
~~~