>

Buttons

Custom buttons styles to fulfill any design approach.

Styles

Default

The default button style with various colors to choose from. Prefer using 2 or max 3 button color variations in your web project to make it easier and more accesible for your users.

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

Outline

Outline styles are also available for all previous color variations

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

Alternate

The alternate button style offers a more subtle design style.

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

Effects

Ripple

Inspired by Material design, adding a ripple animation on click is just a data attribute away data-toggle="click-ripple"

Variations

Small Size

You can use the class btn-sm to make your buttons smaller

Large Size

You can use the class btn-lg to make your buttons larger

Square

You can remove border radius from your buttons if you are looking for a sharp look by using the class rounded-0

Rounded

Fully rounded buttons are available for all available button styles

Disabled

If an action is not available in a specific state of your website/app, you can easily disable your buttons

Icons

You can use any of the available icons in your buttons to visualize its intended action

Be Creative

Mix any of the available classes to create the button style you want to use in your project