Buttons

Buttons

Buttons are convenient tools when you need more traditional actions. To that end, there are many easy to use button styles that you can customize or override to fit your needs.


Default Button


Basic

You can create a button using minimal markup.

HTML

<a href="#" class="button">Default Button</a>

Rendered HTML

.button

Advanced

Additional classes can be added to your component to change its appearance.

HTML

<!-- Size Classes -->
<a href="#" class="button [tiny small large]">Default Button</a>
<!-- Color Classes -->
<a href="#" class="button [secondary success alert]">Color Button</a>
<!-- Radius Classes -->
<a href="#" class="button [radius round]">Radius Button</a>
<!-- Disabled Class -->
<a href="#" class="button disabled">Disabled Button</a>
<!-- Expand Class -->
<a href="#" class="button expand">Expanded Button</a>

Special Classes

HTML

<span class="pdf">PDF</span>

Rendered HTML

PDF.
<span class="icon-sprite power">&nbsp;</span>
<span class="icon-sprite structure">&nbsp;</span>
<span class="icon-sprite us">&nbsp;</span>
<span class="icon-sprite relationship">&nbsp;</span>
<span class="icon-sprite crown">&nbsp;</span>
<span class="icon-sprite training">&nbsp;</span>