Buttons

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.
  1. UI Elements
  2. Buttons
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

Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.

Button dropdown

Dropdown Different Styles

Dark Left
Dark Right
Light Left
Light Right

Buttons with loading indicator

Buttons with built-in loading indicators, effectively bridging the gap between action and feedback. Click the buttons to see the effect.

Expand

Zoom

Slide

Built-in progress bar

Sizes

Buttons with icons

Add icons to your buttons.

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