Solid Button

You are free to use several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

Outline Buttons

In need of a outline button Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

Button Tags

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

Button Tags

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

Checkbox

The checked state for these buttons is only updated via click event on the button. If you use another method to update the input—e.g., with <input type="reset"> or by manually applying the input’s checked property—you’ll need to toggle .active on the <label> manually.

radio buttons

The checked state for these buttons is only updated via click event on the button. If you use another method to update the input—e.g., with <input type="reset"> or by manually applying the input’s checked property—you’ll need to toggle .active on the <label> manually.

Outline buttons

In need of a outline button Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

Outline buttons

In need of a outline button Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

light button

Use .btn-transparent class to have a custom button style with a lighter background color and dark font color.