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

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

This admin template includes 6 predefined gradient colors to use it in buttons. .btn-bg-gradient-x-purple-blue, .btn-gradient-x-purple-red, .btn-gradient-x-blue-green, .btn-gradient-x-orange-yellow, .btn-gradient-x-blue-cyan, .btn-gradient-x-red-pink. YOu can also use round button class .round, and buttons with icons with this.

You ca also add glow effects to gradient buttons. For that you just required to use .btn-glow class with any one of this gradient colors .btn-bg-gradient-x-purple-blue, .btn-gradient-x-purple-red, .btn-gradient-x-blue-green, .btn-gradient-x-orange-yellow, .btn-gradient-x-blue-cyan, .btn-gradient-x-red-pink

Use .round class for round buttons.

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

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

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

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

You can use .btn-glow class with outline button to add button glow.

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

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

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

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

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

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

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

Outline buttons with Icons in different sizes

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

Outline Button Group with Icons in different sizes

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

To create block outline buttons use .btn-block class.

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

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