Buttons
Default buttons
Quickly create a general button with several predefined button styles, each serving its own semantic purpose.
| Class | Values |
|---|---|
class="btn btn-[value]"
|
primary / success / warning / danger / info / light / dark / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke |
Rounded buttons
Create rounded buttons by simply adding .btn-roundedclass.
Outline buttons
In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-*ones to remove all colors on any button.
Sizes
Fancy larger or smaller buttons? Add .btn-lg,.btn-smor .btn-xsfor additional sizes.
Block buttons
Create block level buttons—those that span the full width of a parent—by adding .btn-block.
Disabled State
Make buttons look inactive by adding the disabledboolean attribute to any <button> element. Use .disabledclass in link buttons.
Gradient buttons
Brunette only
Replace the default modifier class with the .btn-gradient-*once to create gradient button.
| Class | Values |
|---|---|
class="btn btn-gradient-[value]"
|
primary / success / warning / danger / info / light / dark / pony / space / streaks / bunting / paradise / heaven / honey / warbler / dusk / citrine / royston / ashes / metal / sunset |
Dropdown & Dropup Buttons
Any single button can be turned into a dropdown toggle with some markup changes. For dropup button, trigger dropdown menus by adding .dropupto the parent element.
Buttons with Icons
Brunette only
An icon can be used as a label for a button. Use .btn-wth-iconclass to create button with icon. To change the position of icon to right, simply add .icon-rightclass.
Social buttons
Social buttons are same as icon buttons with social icons. Create many styles using icon button classes.
Icons buttons
Brunette only
A button can have a single icon also. Create icon buttons using .btn-iconclass For circle buttons add .btn-icon-circleclass.
Icon Button Styles
Brunette comes with different animation styles to create interest in regular style icon buttons.
Style 1
Style 2
Style 3
Style 4
Style 5
Button group
Wrap a series of buttons with .btnin .btn-group.
Button toolbar
Sizing
Nesting
Button group vertical
Make a set of buttons appear vertically stacked rather than horizontally.