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 |
Create rounded buttons by simply adding .btn-roundedclass.
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.
Fancy larger or smaller buttons? Add .btn-lg,.btn-smor .btn-xsfor additional sizes.
Create block level buttons—those that span the full width of a parent—by adding .btn-block.
Make buttons look inactive by adding the disabledboolean attribute to any <button> element. Use .disabledclass in link buttons.
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 |
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.
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 are same as icon buttons with social icons. Create many styles using icon button classes.
A button can have a single icon also. Create icon buttons using .btn-iconclass For circle buttons add .btn-icon-circleclass.
Griffin comes with different animation styles to create interest in regular style icon buttons.
Wrap a series of buttons with .btnin .btn-group.
Make a set of buttons appear vertically stacked rather than horizontally.