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).
These is a standard button variant, you can use it by extending .btn-{color} classes
Replace the default modifier classes with the .btn-outline-{color} to apply these variants
Replace the default modifier classes with the .btn-flat-{color} to apply these variants
Replace the default modifier classes with the .btn-label-{color} to apply these variants
Replace the default modifier classes with the .btn-text-{color} to apply these variants
Extend button class with .btn-pill to make the button more rounded.
Make your button larger or smaller by adding .btn-lg or .btn-sm classes to button.
You can't use the classes below together with .btn-icon
Add .btn-{wide|wider|widest} to make your button wider.
Add .btn-{tall|taller|tallest} to make your button taller.
Add .btn-block for full width button style.
If you need square button with an icon inside, you can use .btn-icon and combine with button variant classes.
Make your icon buttons circular by extending .btn-icon with .btn-circle modifier class.
If you want to use icon with text, you don't need to apply .btn-icon
Add .active or .disabled for the active or inactive button appearance.