### Buttons

Buttons include support for a handful of contextual variations, sizes, states, and more. Group a series of buttons together on a single line with the button group.

#### States

Buttons will appear pressed when active. However, you can still force the same active appearance with `.active` (and include the aria-pressed="true" attribute) should you need to replicate the state programmatically.

- Normal #55595c
- Hover #434648
- Active #3d3f41
- Disabled #909395

- Normal #967ADC
- Hover #8362D6
- Active #704ACF
- Disabled #a289df

- Normal #37BC9B
- Hover #30A487
- Active #298D74
- Disabled #74b5a4

- Normal #DA4353
- Hover #D52A3B
- Active #BC2534
- Disabled #e7858f

- Normal #3BAFDA
- Hover #27A2CF
- Active #228EB6
- Disabled #6fb5cf

- Normal #F6BB42
- Hover #F5B025
- Active #EFA50B
- Disabled #f4c460

#### Basic Buttons

##### Buttons

Bootstrap includes six predefined button styles, each serving its own semantic purpose.

#### Buttons Glow

Use `.btn-glow` class with any colored button to add button glow.

#### Buttons Shadow

Use `.box-shadow-*` class with button to add button shadow.

#### Square Buttons

Use `.square` class for square buttons.

#### Round Buttons

Use `.round` class for round buttons.

#### Single button dropdowns

##### Button dropdowns

Turn a button into a dropdown toggle with some basic markup changes.

#### Split Buttons

##### Split button dropdowns

Similarly, create split button dropdowns with the same markup changes, only with a separate button.

#### Basic Button group

Group a series of buttons together on a single line with the button group. Wrap a series of buttons with `.btn` in `.btn-group`.

#### Buttons with Icon

Bootstrap includes six predefined button styles, each serving its own semantic purpose.

#### Button dropdowns with icons

#### Split button dropdowns with icon

#### Button group with icon

Button group with icons and text.

#### Icon Buttons

Simple Icon Button

Use `.btn-icon.btn-pure` classes for only icon buttons

#### Icon Button dropdowns

#### Split icon button dropdowns

#### Icon Button group

Icon Button group without text.

Combine sets of button groups into Button toolbar for more complex components.

#### Sizes

Add `.btn-lg` or `.btn-sm` for Fancy larger or smaller buttons size.

Buttons with Icons in different sizes

#### Button Dropdowns Sizes

Button dropdowns work with buttons of all sizes.

Buttons with Icons in different sizes

#### Button Group Sizes

Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`.

Button Group with Icons in different sizes

#### Block level buttons

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

#### Button tags

The .btn classes are designed to be used with the `<button>` element. However, you can also use these classes on `<a>` or `<input>` elements.

Link

### Outline Buttons

Replace the default modifier classes with the `.btn-outline` ones to remove all background images and colors on any button.

#### Outline buttons

Use a class `.btn-outline-*` to quickly create a outline button.

#### Outline Buttons Glow

Use `.btn-glow` class with any colored button to add button glow.

#### Outline Buttons Shadow

Use `.box-shadow-*` class with button to add button shadow.

#### Square buttons

Use a class `.square` with outline button class to create square outline button.

#### Round buttons

Use a class `.round` with outline button class to create round outline button.

#### Single outline button dropdowns

#### Split Outline button dropdowns with dropdown background

#### Split Outline button dropdowns

#### Outline Button group

Outline button group

#### Outline buttons with Icons

Outline Buttons with icon.

#### Split Outline button dropdowns with icon & dropdown outline

#### Outline Button group with icon

Outline button group with icons and text.

#### Outline Icon Buttons

Outline Icon Buttons.

#### Outline Icon Button group

Icon Button group without text.

Combine sets of button groups into Button toolbar for more complex components.

#### Sizes

Add `.btn-lg` or `.btn-sm` for Fancy larger or smaller buttons size.

Buttons with Icons in different sizes

#### Outline Button Dropdowns Sizes

Button dropdowns work with buttons of all sizes.

Icon Buttons in different sizes

#### Button Group Sizes

Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`.

Button Group with Icons in different sizes

#### Block level buttons

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

#### Nesting Button group

Place a `.btn-group` within another `.btn-group` for dropdown menu buttons.

Nesting Button group with outline

#### Vertical variation

Make a set of buttons appear vertically.

Vertical variation with different colors

Vertical variation with Outlines

Vertical variation with Outlines