Button Styles

Contextual

You can easily style a button or a link by adding the base class btn and then by applying a color variation class.

btn-primary
btn-secondary
btn-success
btn-info
btn-warning
btn-danger

You can also achieve outline styles for your buttons by using the related classes.

btn-outline-primary
btn-outline-secondary
btn-outline-success
btn-outline-info
btn-outline-warning
btn-outline-danger

Finally, there is also an alternative style which you can use with your buttons.

btn-alt-primary
btn-alt-secondary
btn-alt-success
btn-alt-info
btn-alt-warning
btn-alt-danger

Ripple Effect

You can easily add a ripple effect on click to any button you want by adding data-toggle="click-ripple".

Sizes

You might need various button sizes based on your content and context. Making your buttons smaller or larger is as easy as adding an extra size variation class. It can be applied along with any other color or shape variation class to create the button that fits you best.



btn btn-sm



btn



btn btn-lg



btn btn-hero btn-sm



btn btn-hero



btn btn-hero btn-lg

Button Variations

Square

You can easily have a square button by adding the btn-square class.













Rounded

The same way, by adding the btn-rounded class, you can have rounded buttons.













No Border

You can even remove the border from your buttons styles (default and outline), by adding the btn-noborder class.







Disabled

If you need to disable a button, just add the disabled attribute.













Button with Icons

Default

You can use any icon you like with your buttons! Prefer the ones that better represent the action of each button.

Variations

You can use icons with any button variation you want, they will adjust accordingly.

You can also use the .btn-circle class to create circle buttons with only icons.

Button Groups, Dropdowns & Toolbars

Groups and Dropdowns

Grouping buttons or creating dropdowns/dropups in various sizes is just a few lines away.

You can also have vertical button groups with dropdowns or dropups

Toolbars

Create toolbars by using icons and buttons.

You can also change toolbar’s size easily.