{{ mainTitle }}

Button design is usually a subtle element to a web design, but it can have a significant impact on the overall look and usability of the site.
Default Buttons

Use the button classes on an <a>, <button>, or <input> element.

Outlined Buttons

Use the .btn-o class for outlined buttons.

Colorful Buttons

Use any of the available button classes to quickly create a styled button.

Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the .sr-only class.

Azure Button

Add class .btn-azure, .btn-light-azure or .btn-dark-azure to your button.

Blue Button

Add class .btn-blue, .btn-light-blue or .btn-dark-blue to your button.

Purple Button

Add class .btn-purple, .btn-light-purple or .btn-dark-purple to your button.

Red Button

Add class .btn-red, .btn-light-red or .btn-dark-red to your button.

Orange Button

Add class .btn-orange, .btn-light-orange or .btn-dark-orange to your button.

Yellow Button

Add class .btn-yellow, .btn-light-yellow or .btn-dark-yellow to your button.

Green Button

Add class .btn-green, .btn-light-green or .btn-dark-green to your button.

Beige Button

Add class .btn-beige, .btn-light-beige or .btn-dark-beige to your button.

Grey Button

Add class .btn-grey, .btn-light-grey or .btn-dark-grey to your button.

Options

You can change the style and the state of the buttons using minimal markup.

Square Buttons

Do you like the square buttons? Add .btn-squared to change its shape.

Sizes

Fancy larger or smaller buttons? Add .btn-lg , .btn-sm , or .btn-xs for additional sizes.

Disabled State

Add the disabled attribute to <button> buttons.

Active State

if you need to force the :active appearance, add .active.

Block level buttons

Create block level buttons—those that span the full width of a parent— by adding .btn-block .

Tools Help Contact

Button Groups

Group a series of buttons together on a single line with the button group.

Basic example

Wrap a series of buttons with .btn in .btn-group .

Tools Help Contact
Button toolbar

Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

Vertical variation

Make a set of buttons appear vertically stacked rather than horizontally

Tools Settings Help Contact
Dropdown Buttons

Dropdown is a simple directive which will toggle a dropdown menu on click or programmatically. You can either use is-open to toggle or add inside a <a dropdown-toggle> element to toggle it when is clicked. There is also the on-toggle(open) optional expression fired when dropdown changes state.

Click me for a dropdown, yo!

Buttons with loading indicator

An angular directive wrapper for Ladda, a UI concept which merges loading indicators into the action that invoked them. Click the buttons to see the effect.

Expand

expand-left expand-right expand-up expand-down

Zoom

contract zoom-in zoom-out

Slide

slide-left slide-right slide-up slide-down

Built-in progress bar

expand-right contract

Sizes

10 20 30

Colors

red gray black

Buttons with icons

A lightweight, extensible directive for add small overlays of content, like those on the iPad, to any element for housing secondary information..

Font Awesome

Examples to use buttons with font awesome icons.

Buttons with both text and font awesome icon.

Delete Item Add Item Listen Submit Entry

Toolbar made with font awesome icons.

Glyphicons

Examples to use buttons with glyphicon icons.

Buttons with both text and glyphicon icon.

Delete Item Add Item Listen Submit Entry

Toolbar made with glyphicon icons.

Themify Icons

Examples to use buttons with themify icons.

Buttons with both text and themify icon.

Delete Item Add Item Listen Submit Entry

Toolbar made with themify icons.

Animated Buttons

Modern and subtle styles & effects for buttons

Social List