Buttons

Default

This is a default button that can be created by adding the .btn class to any element.

<a class="btn">...</a>

Sizes

The size options for buttons range from small to extra large.

<a class="btn btn-extra-small">...</a>
<a class="btn btn-small">...</a>
<a class="btn">...</a>
<a class="btn btn-large">...</a>
<a class="btn btn-extra-large">...</a>

Background Colors

All of the background color helper classes can be added to any button.

<a class="btn bg-gray">...</a>
<a class="btn bg-black">...</a>
<a class="btn bg-white">...</a>
<a class="btn bg-green">...</a>
<a class="btn bg-red">...</a>
<a class="btn bg-yellow">...</a>
<a class="btn bg-blue">...</a>

Dropdown

Dropdowns can be added to button elements very easily. Below is an example of a button dropdown using a handful of the helper classes that are provided by Concise.

The icons used here are from a modified version of the Font Awesome icon font library.

<div class="btn dropdown line" tabindex="1">
  Dropdown <span class="caret"></span>

  <ul class="dropdown-menu">
	  <li><a href="#">Profile <span class="icon user float-right"></span></a></li>
	  <li><a href="#">Settings <span class="icon cog float-right"></span></a></li>
	  <li><a href="#">Log out <span class="icon times float-right"></span></a></li>
	</ul>
</div>

Centering

As the .btn class is an inline-block element, simply adding the class .center will not suffice in actually centering the element.

Instead, we must wrap the element inside the .text-center class, which will provide proper centering of our button.

<div class="text-center">
  <a class="btn">Center Button</a>
</div>

Collapsible

By default, all buttons maintain their default width as the browser viewport scales down. However, adding the class .btn-collapse-full allows the button to take up 100% the width of it's parent element after the browser has reached the extra-small breakpoint (which is 30em by default).

<div class="text-center">
  <a class="btn btn-collapse-full">Collapsable Button</a>
</div>