Buttons Extra

Hexagon Buttons

Hexagon buttons

Apply class .btn-hexagon to .btn to convert a button into a hexagon. Put a <span> in the .btn.btn-hexagon and place your content in that <span>.

NOTE: To use icons inside the hexagon button apply an icon class to the <span>.

Add the following classes to the .btn-hexagon to create color variants.

Basic Iconic Outline
Add class .btn-hexagon-default to button Add class .btn-hexagon-default to button Add class .btn-hexagon-default-outline to button
Add class .btn-hexagon-primary to button Add class .btn-hexagon-primary to button Add class .btn-hexagon-primary-outline to button
Add class .btn-hexagon-success to button Add class .btn-hexagon-success to button Add class .btn-hexagon-success-outline to button
Add class .btn-hexagon-info to button Add class .btn-hexagon-info to button Add class .btn-hexagon-info-outline to button
Add class .btn-hexagon-warning to button Add class .btn-hexagon-warning to button Add class .btn-hexagon-warning-outline to button
Add class .btn-hexagon-danger to button Add class .btn-hexagon-danger to button Add class .btn-hexagon-danger-outline to button
Add class .btn-hexagon-inverse to button Add class .btn-hexagon-inverse to button Add class .btn-hexagon-inverse-outline to button

Sizing

Bold Buttons

Bold buttons

Use the following classes to create bold buttons.

Add class .border-left-bold to .btn-default button
Add class .border-left-bold to .btn-primary button
Add class .border-left-bold to .btn-success button
Add class .border-left-bold to .btn-info button
Add class .border-left-bold to .btn-warning button
Add class .border-left-bold to .btn-danger button
Add class .border-left-bold to .btn-inverse button
Add class .border-top-bold to .btn-default button
Add class .border-top-bold to .btn-primary button
Add class .border-top-bold to .btn-success button
Add class .border-top-bold to .btn-info button
Add class .border-top-bold to .btn-warning button
Add class .border-top-bold to .btn-danger button
Add class .border-top-bold to .btn-inverse button
Add class .border-bottom-bold to .btn-default button
Add class .border-bottom-bold to .btn-primary button
Add class .border-bottom-bold to .btn-success button
Add class .border-bottom-bold to .btn-info button
Add class .border-bottom-bold to .btn-warning button
Add class .border-bottom-bold to .btn-danger button
Add class .border-bottom-bold to .btn-inverse button

Sizing

Bold Buttons

Outline bold buttons

Use the following classes to create outline bold buttons.

Add class .border-left-bold to .btn-default-outline button
Add class .border-left-bold to .btn-primary-outline button
Add class .border-left-bold to .btn-success-outline button
Add class .border-left-bold to .btn-info-outline button
Add class .border-left-bold to .btn-warning-outline button
Add class .border-left-bold to .btn-danger-outline button
Add class .border-left-bold to .btn-inverse-outline button
Add class .border-right-bold to .btn-default-outline button
Add class .border-right-bold to .btn-primary-outline button
Add class .border-right-bold to .btn-success-outline button
Add class .border-right-bold to .btn-info-outline button
Add class .border-right-bold to .btn-warning-outline button
Add class .border-right-bold to .btn-danger-outline button
Add class .border-right-bold to .btn-inverse-outline button
Add class .border-top-bold to .btn-default-outline button
Add class .border-top-bold to .btn-primary-outline button
Add class .border-top-bold to .btn-success-outline button
Add class .border-top-bold to .btn-info-outline button
Add class .border-top-bold to .btn-warning-outline button
Add class .border-top-bold to .btn-danger-outline button
Add class .border-top-bold to .btn-inverse-outline button
Add class .border-bottom-bold to .btn-default-outline button
Add class .border-bottom-bold to .btn-primary-outline button
Add class .border-bottom-bold to .btn-success-outline button
Add class .border-bottom-bold to .btn-info-outline button
Add class .border-bottom-bold to .btn-warning-outline button
Add class .border-bottom-bold to .btn-danger-outline button
Add class .border-bottom-bold to .btn-inverse-outline button

Sizing

Flat Shadow

Buttons with flat shadow

Put <i> with icon class inside button and apply .flat-shadow class to <i>.

Labeled buttons with flat shadow

Add class .btn-labeled-left or .btn-labeled-right to button.

Flat Shadow

Outline buttons with flat shadow

Put <i> with icon class inside outline button and apply .flat-shadow class to the <i>.

Labeled outline buttons with flat shadow

Add class .btn-labeled-left or .btn-labeled-right to outline button.

Divided Button Groups

Button group with divider

Add class .divided to .btn-group and put a <div> with class .divider between the 2 buttons as in the example below.

or
or

Sizing

or
or
or
or
or
or
Divided Button Groups

Outline button group with divider

Add class .divided to .btn-group and put a <div> with class .divider between the 2 outline buttons as in the example below.

or
or

Sizing

or
or
or
or
or
or
Add class .rounded to a .btn to make it rounded. When using a button group, add the .rounded class to the .btn-group.
Bold Buttons

Bold buttons

Use the following classes to create bold buttons.

Add class .border-left-bold to .btn-default button
Add class .border-left-bold to .btn-primary button
Add class .border-left-bold to .btn-success button
Add class .border-left-bold to .btn-info button
Add class .border-left-bold to .btn-warning button
Add class .border-left-bold to .btn-danger button
Add class .border-left-bold to .btn-inverse button
Add class .border-right-bold to .btn-default button
Add class .border-right-bold to .btn-primary button
Add class .border-right-bold to .btn-success button
Add class .border-right-bold to .btn-info button
Add class .border-right-bold to .btn-warning button
Add class .border-right-bold to .btn-danger button
Add class .border-right-bold to .btn-inverse button
Add class .border-top-bold to .btn-default button
Add class .border-top-bold to .btn-primary button
Add class .border-top-bold to .btn-success button
Add class .border-top-bold to .btn-info button
Add class .border-top-bold to .btn-warning button
Add class .border-top-bold to .btn-danger button
Add class .border-top-bold to .btn-inverse button
Add class .border-bottom-bold to .btn-default button
Add class .border-bottom-bold to .btn-primary button
Add class .border-bottom-bold to .btn-success button
Add class .border-bottom-bold to .btn-info button
Add class .border-bottom-bold to .btn-warning button
Add class .border-bottom-bold to .btn-danger button
Add class .border-bottom-bold to .btn-inverse button

Sizing

Bold Buttons

Outline bold buttons

Use the following classes to create outline bold buttons.

Add class .border-left-bold to .btn-default-outline button
Add class .border-left-bold to .btn-primary-outline button
Add class .border-left-bold to .btn-success-outline button
Add class .border-left-bold to .btn-info-outline button
Add class .border-left-bold to .btn-warning-outline button
Add class .border-left-bold to .btn-danger-outline button
Add class .border-left-bold to .btn-inverse-outline button
Add class .border-right-bold to .btn-default-outline button
Add class .border-right-bold to .btn-primary-outline button
Add class .border-right-bold to .btn-success-outline button
Add class .border-right-bold to .btn-info-outline button
Add class .border-right-bold to .btn-warning-outline button
Add class .border-right-bold to .btn-danger-outline button
Add class .border-right-bold to .btn-inverse-outline button
Add class .border-top-bold to .btn-default-outline button
Add class .border-top-bold to .btn-primary-outline button
Add class .border-top-bold to .btn-success-outline button
Add class .border-top-bold to .btn-info-outline button
Add class .border-top-bold to .btn-warning-outline button
Add class .border-top-bold to .btn-danger-outline button
Add class .border-top-bold to .btn-inverse-outline button
Add class .border-bottom-bold to .btn-default-outline button
Add class .border-bottom-bold to .btn-primary-outline button
Add class .border-bottom-bold to .btn-success-outline button
Add class .border-bottom-bold to .btn-info-outline button
Add class .border-bottom-bold to .btn-warning-outline button
Add class .border-bottom-bold to .btn-danger-outline button
Add class .border-bottom-bold to .btn-inverse-outline button

Sizing

Flat Shadow

Buttons with flat shadow

Put <i> with icon class inside button and apply .flat-shadow class to <i>.

Labeled buttons with flat shadow

Add class .btn-labeled-left or .btn-labeled-right to button.

Flat Shadow

Outline buttons with flat shadow

Put <i> with icon class inside outline button and apply .flat-shadow class to the <i>.

Labeled outline buttons with flat shadow

Add class .btn-labeled-left or .btn-labeled-right to outline button.

Divided Button Groups

Button group with divider

Add class .divided to .btn-group and put a <div> with class .divider between the 2 buttons as in the example below.

or
or

Sizing

or
or
or
or
or
or
Divided Button Groups

Outline button group with divider

Add class .divided to .btn-group and put a <div> with class .divider between the 2 outline buttons as in the example below.

or
or

Sizing

or
or
or
or
or
or
Add class .circle to a .btn to make it circle. When using a button group, add the .circle class to the .btn-group.
Bold Buttons

Bold buttons

Use the following classes to create bold buttons.

Add class .border-left-bold to .btn-default button
Add class .border-left-bold to .btn-primary button
Add class .border-left-bold to .btn-success button
Add class .border-left-bold to .btn-info button
Add class .border-left-bold to .btn-warning button
Add class .border-left-bold to .btn-danger button
Add class .border-left-bold to .btn-inverse button
Add class .border-right-bold to .btn-default button
Add class .border-right-bold to .btn-primary button
Add class .border-right-bold to .btn-success button
Add class .border-right-bold to .btn-info button
Add class .border-right-bold to .btn-warning button
Add class .border-right-bold to .btn-danger button
Add class .border-right-bold to .btn-inverse button
Add class .border-top-bold to .btn-default button
Add class .border-top-bold to .btn-primary button
Add class .border-top-bold to .btn-success button
Add class .border-top-bold to .btn-info button
Add class .border-top-bold to .btn-warning button
Add class .border-top-bold to .btn-danger button
Add class .border-top-bold to .btn-inverse button
Add class .border-bottom-bold to .btn-default button
Add class .border-bottom-bold to .btn-primary button
Add class .border-bottom-bold to .btn-success button
Add class .border-bottom-bold to .btn-info button
Add class .border-bottom-bold to .btn-warning button
Add class .border-bottom-bold to .btn-danger button
Add class .border-bottom-bold to .btn-inverse button

Sizing

Bold Buttons

Outline bold buttons

Use the following classes to create outline bold buttons.

Add class .border-left-bold to .btn-default-outline button
Add class .border-left-bold to .btn-primary-outline button
Add class .border-left-bold to .btn-success-outline button
Add class .border-left-bold to .btn-info-outline button
Add class .border-left-bold to .btn-warning-outline button
Add class .border-left-bold to .btn-danger-outline button
Add class .border-left-bold to .btn-inverse-outline button
Add class .border-right-bold to .btn-default-outline button
Add class .border-right-bold to .btn-primary-outline button
Add class .border-right-bold to .btn-success-outline button
Add class .border-right-bold to .btn-info-outline button
Add class .border-right-bold to .btn-warning-outline button
Add class .border-right-bold to .btn-danger-outline button
Add class .border-right-bold to .btn-inverse-outline button
Add class .border-top-bold to .btn-default-outline button
Add class .border-top-bold to .btn-primary-outline button
Add class .border-top-bold to .btn-success-outline button
Add class .border-top-bold to .btn-info-outline button
Add class .border-top-bold to .btn-warning-outline button
Add class .border-top-bold to .btn-danger-outline button
Add class .border-top-bold to .btn-inverse-outline button
Add class .border-bottom-bold to .btn-default-outline button
Add class .border-bottom-bold to .btn-primary-outline button
Add class .border-bottom-bold to .btn-success-outline button
Add class .border-bottom-bold to .btn-info-outline button
Add class .border-bottom-bold to .btn-warning-outline button
Add class .border-bottom-bold to .btn-danger-outline button
Add class .border-bottom-bold to .btn-inverse-outline button

Sizing

Flat Shadow

Buttons with flat shadow

Put <i> with icon class inside button and apply .flat-shadow class to <i>.

Labeled buttons with flat shadow

Add class .btn-labeled-left or .btn-labeled-right to button.

Flat Shadow

Outline buttons with flat shadow

Put <i> with icon class inside outline button and apply .flat-shadow class to the <i>.

Labeled outline buttons with flat shadow

Add class .btn-labeled-left or .btn-labeled-right to outline button.

Divided Button Groups

Button group with divider

Add class .divided to .btn-group and put a <div> with class .divider between the 2 buttons as in the example below.

or
or

Sizing

or
or
or
or
or
or
Divided Button Groups

Outline button group with divider

Add class .divided to .btn-group and put a <div> with class .divider between the 2 outline buttons as in the example below.

or
or

Sizing

or
or
or
or
or
or