The btn module allows to create styled buttons. It is especially useful to convey information using colors and icons.
Default buttonsDefault buttons
<a class="btn btn-inline" href="#"><span class="icon icon-plus_button" role="presentation" hidden="hidden"></span>Default</a>
<a class="btn btn-inline themed" href="#"><span class="icon icon-plus_button" role="presentation" hidden="hidden"></span>Default <span class="icon icon-inline icon-lock-locked" role="presentation" hidden="hidden"></span></a>
<a class="btn btn-inline btn-disabled" href="#" aria-disabled="true"><span class="icon icon-plus_button" role="presentation" hidden="hidden"></span>Disabled</a>
<br>
<a class="btn" href="#"><span class="icon icon-plus" role="presentation" hidden="hidden"></span>Default</a>
<a class="btn themed" href="#"><span class="icon icon-plus" role="presentation" hidden="hidden"></span>Default <span class="icon icon-inline icon-lock-locked" role="presentation" hidden="hidden"></span></a>
<a class="btn btn-disabled" href="#" aria-disabled="true"><span class="icon icon-plus" role="presentation" hidden="hidden"></span>Disabled</a>
Icon buttonsIcon buttons
<a class="btn btn-create btn-inline icon icon-plus_button" href="#" title="label"><span class="visuallyhidden">label</span></a>
<a class="btn btn-update icon icon-plus" href="#" title="label"><span class="visuallyhidden">label</span></a>
OperationsOperations
<a class="btn btn-inline btn-start" href="#"><span class="icon icon-arrow-head-right_button" role="presentation" hidden="hidden"></span>Start</a>
<a class="btn btn-inline btn-continue" href="#"><span class="icon icon-arrow-head-right_button" role="presentation" hidden="hidden"></span>Continue</a>
<a class="btn btn-inline btn-abort" href="#"><span class="icon icon-cross_button" role="presentation" hidden="hidden"></span>Abort</a>
<a class="btn btn-inline btn-more" href="#"><span class="icon icon-cogwheel_button" role="presentation" hidden="hidden"></span>More</a>
<br>
<a class="btn btn-start" href="#"><span class="icon icon-arrow-head-right" role="presentation" hidden="hidden"></span>Start</a>
<a class="btn btn-continue" href="#"><span class="icon icon-arrow-head-right" role="presentation" hidden="hidden"></span>Continue</a>
<a class="btn btn-abort" href="#"><span class="icon icon-cross" role="presentation" hidden="hidden"></span>Abort</a>
<a class="btn btn-more" href="#"><span class="icon icon-cogwheel" role="presentation" hidden="hidden"></span>More</a>
Data manipulationData manipulation
<a class="btn btn-inline btn-create" href="#"><span class="icon icon-plus_button" role="presentation" hidden="hidden"></span>Add</a>
<a class="btn btn-inline btn-update" href="#"><span class="icon icon-pencil_button" role="presentation" hidden="hidden"></span>Edit</a>
<a class="btn btn-inline btn-delete" href="#"><span class="icon icon-minus_button" role="presentation" hidden="hidden"></span>Remove</a>
<a class="btn btn-inline btn-neutral" href="#"><span class="icon icon-cogwheel_button" role="presentation" hidden="hidden"></span>Options</a>
<br>
<a class="btn btn-create" href="#"><span class="icon icon-plus" role="presentation" hidden="hidden"></span>Add</a>
<a class="btn btn-update" href="#"><span class="icon icon-pencil" role="presentation" hidden="hidden"></span>Edit</a>
<a class="btn btn-delete" href="#"><span class="icon icon-minus" role="presentation" hidden="hidden"></span>Remove</a>
<a class="btn btn-neutral" href="#"><span class="icon icon-cogwheel" role="presentation" hidden="hidden"></span>Options</a>
Information notificationInformation notification
<a class="btn btn-inline btn-success" href="#"><span class="icon icon-checkmark_button" role="presentation" hidden="hidden"></span>Success</a>
<a class="btn btn-inline btn-info" href="#"><span class="icon icon-info_button" role="presentation" hidden="hidden"></span>Info</a>
<a class="btn btn-inline btn-warning" href="#"><span class="icon icon-info_button" role="presentation" hidden="hidden"></span>Warning</a>
<a class="btn btn-inline btn-error" href="#"><span class="icon icon-info_button" role="presentation" hidden="hidden"></span>Error</a>
<a class="btn btn-inline btn-neutral" href="#"><span class="icon icon-message_button" role="presentation" hidden="hidden"></span>Message</a>
<br>
<a class="btn btn-success" href="#"><span class="icon icon-checkmark" role="presentation" hidden="hidden"></span>Success</a>
<a class="btn btn-info" href="#"><span class="icon icon-info" role="presentation" hidden="hidden"></span>Info</a>
<a class="btn btn-warning" href="#"><span class="icon icon-info" role="presentation" hidden="hidden"></span>Warning</a>
<a class="btn btn-error" href="#"><span class="icon icon-info" role="presentation" hidden="hidden"></span>Error</a>
<a class="btn btn-neutral" href="#"><span class="icon icon-message" role="presentation" hidden="hidden"></span>Message</a>
Long buttonsLong buttons
If you need buttons that span multiple lines, you can use the .btn-multiline-list class and the following markup:
<div class="btn-multiline-list">
<p>
<a class="btn btn-inline">
<span class="icon icon-arrow-head-right_button" role="presentation" hidden="hidden"></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta.
</a>
</p>
<p>
<a class="btn btn-inline">
<span class="icon icon-arrow-head-right_button" role="presentation" hidden="hidden"></span>
Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.
</a>
</p>
</div>
Trigger buttonTrigger button
Requires the collapse and menu widgets
<div class="btn btn-trigger toggle-collapsed ui-collapse ui-toggle" data-widget="collapse" tabindex="0" role="button" aria-controls="toggle-pane-138" id="toggle-139" aria-expanded="false">
<span>Toggle menu</span>
<ul class="menu toggle-collapsed ui-menu" data-widget="menu" aria-hidden="true" id="toggle-pane-138" aria-expanded="false" aria-labelledby="toggle-139" role="menu">
<li class="menu-item" role="menuitem" tabindex="0">item 1</li>
<li class="menu-item" role="menuitem">item 2</li>
<li class="menu-item" role="menuitem">item 3</li>
</ul>
</div>
Split buttonSplit button
Requires the collapse and menu widgets
<div class="btn btn-split">
<button>Toggle menu</button><span data-widget="collapse" tabindex="0" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-140" id="toggle-141" aria-expanded="false"></span>
<ul class="menu toggle-collapsed ui-menu" data-widget="menu" aria-hidden="true" id="toggle-pane-140" aria-expanded="false" aria-labelledby="toggle-141" role="menu">
<li class="menu-item" role="menuitem" tabindex="0">item 1</li>
<li class="menu-item" role="menuitem">item 2</li>
<li class="menu-item" role="menuitem">item 3</li>
</ul>
</div>