Default Button Style

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

Rounded Button

Add .btn-rounded to get clean rounded button.

Outline Button

Add .btn-outline, .btn-rounded to get clean outline rounded button.

Outline Button

Add .btn-outline, .btn-rounded to get clean outline rounded button.

Flat Button

Add .btn-flat to get clean flat button.

Button Addon

Add .btn-addon,.btn-addon i to get clean button addon.

Button Size

Add .btn-lg, .btn-md, .btn-sm, or .btn-xs for additional sizes.

Button Addon Size

Add .btn-addon.btn-lg, .btn-addon.btn-lg i for button addon size.

Block Level Buttons

Add class .btn-block to create a block level button:

Active/Disabled Buttons

The class .active makes a button appear pressed, and the class .disabled makes a button unclickable:

Button Groups

Use a <div> element with class .btn-group to create a button group:

Vertical Button Groups

Use the class .btn-group-vertical to create a vertical button group:

Justified Button Groups

To span the entire width of the screen, use the .btn-group-justified class:

Apple Samsung Sony

Nesting Button Groups & Dropdown Menus

Nest button groups to create dropdown menus:

Split Button Dropdowns

Nesting Button Groups & Dropdown Menus

Nest button groups to create dropdown menus: