Button Styles

This add-on requires the $object-ui-color variable, $bg-colors and $type-colors maps in order for the SASS and LESS files to compile without modification.

Rounded

Adding the .btn-rounded class to any button will give it slightly rounded corners.

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

Pill

Adding the class .btn-pill to any button creates an extremely rounded button, similar to the shape of a pill.

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

Borders

You can create bordered buttons by adding the class .btn-border to any element with the .btn class. There are also a host of colors that you can use to change the style of bordered buttons.

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

Download

Social

These are various buttons for social networks with icons courtesy of the Font Awesome icon font.

Download