Buttons
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 provide a better UX and make it 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 Style
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
Hero
Perfect style to use in landing pages or for call to action buttons
btn-hero btn-primary
btn-hero btn-secondary
btn-hero btn-success
btn-hero btn-info
btn-hero btn-warning
btn-hero btn-danger
btn-hero btn-dark
btn-hero btn-light
Effects
Ripple
Inspired by Material design, adding a ripple animation on click is just a data attribute away data-toggle="click-ripple"
Default Style
Outline Style
Alternate Style
Hero Style
Variations
Small Size
You can use the classes btn-sm and btn-sm to make your buttons smaller
Default Style
Outline Style
Alternate Style
Hero Style
Large Size
You can use the classes btn-lg and btn-lg to make your buttons larger
Default Style
Outline Style
Alternate Style
Hero Style
Square
You can remove border radius from your buttons if you are looking for a sharp look by using the class rounded-0
Default Style
Outline Style
Alternate Style
Hero Style
Rounded
Fully rounded buttons are available for all available button styles
Default Style
Outline Style
Alternate Style
Hero Style
Disabled
If an action is not available in a specific state of your website/app, you can easily disable your buttons
Default Style
Outline Style
Alternate Style
Hero Style
Icons
You can use any of the available icons in your buttons to visualize its intended action
Default Style
Outline Style
Alternate Style
Hero Style
Be Creative
Mix any of the available classes to create the button style you want to use in your project