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
Hero
Perfect style to use in landing pages or for call to action buttons
btn-hero-primary
btn-hero-secondary
btn-hero-success
btn-hero-info
btn-hero-warning
btn-hero-danger
btn-hero-dark
btn-hero-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
btn-alt-dark
btn-alt-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
Hero Style
Alternate Style
Variations
Small Size
You can use the classes btn-sm and btn-hero-sm to make your buttons smaller
Default Style
Outline Style
Hero Style
Alternate Style
Large Size
You can use the classes btn-lg and btn-hero-lg to make your buttons larger
Default Style
Outline Style
Hero Style
Alternate Style
Square
You can remove border radius from your buttons if you are looking for a sharp look by using the class btn-square
Default Style
Outline Style
Hero Style
Alternate Style
Rounded
Fully rounded buttons are available for all available button styles
Default Style
Outline Style
Hero Style
Alternate 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
Hero Style
Alternate Style
Icons
You can use any of the available icons in your buttons to visualize its intended action
Default Style
Outline Style
Hero Style
Alternate Style
Be Creative
Mix any of the available classes to create the button style you want to use in your project