| Button | class="" | Description |
|---|---|---|
btn btn-secondary |
Default Spec Template button style | |
btn btn-primary |
Blue Button Style | |
btn btn-red |
Red Button Style | |
btn btn-orange |
Orange Button Style | |
btn btn-turquoise |
Turquoise Button Style | |
btn btn-green |
Green Button Style | |
btn btn-yellow |
Yellow Button Style | |
btn btn-gray |
Grey Button Style | |
btn btn-dark |
New Dark Button Style | |
btn btn-purple |
New Purple Button Style | |
btn btn-aqua |
New Aqua Button Style | |
btn btn-brown |
New Brown Button Style | |
btn btn-dark-blue |
New Dark Blue Button Style | |
btn btn-light-green |
New Light Green Style |
| Button | class="" | Description |
|---|---|---|
btn btn-default |
Standard gray button with gradient | |
btn btn-primary |
Provides extra visual weight and identifies the primary action in a set of buttons | |
btn btn-info |
Used as an alternative to the default styles | |
btn btn-success |
Indicates a successful or positive action | |
btn btn-warning |
Indicates caution should be taken with this action | |
btn btn-danger |
Indicates a dangerous or potentially negative action | |
btn btn-link |
Deemphasize a button by making it look like a link while maintaining button behavior |
Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes, .my-2 is for margin-top & margin-bottom
Create block level buttons—those that span the full width of a parent— by adding .w-100 d-block.
- Add the .disabled class to a buttons.
- Add the disabled attribute to button buttons.
- Some rounded buttons examples. Add a class .btn-circle to buttons