Different types of buttons.
To use a button, add a button with a class named
.btn. You can use on it any color in the color
The normal button is the only variant that can be used with the hoverable class.
All buttons are working inside a
<button> and a
Commonly, a circle button is used with a library like
Iconify to add
an icon in it. To use it, add the
.btn-circle class to a button already having the class
Press buttons are stylized buttons. To use them, use the same
.btn class as before, and add the
class to it. You can use it on a circle button.
Outline buttons are different, they are transparent to get as background-color the background of your page.
Two different designs are available, the normal one and the
The background-color which comes while you hover the button is the
.text-color class on the
Note that the span inside the button needs to get the
class to work.
Invert outline buttons
Outline buttons are using a white text color when hovered. To make the text black on hover, simply add the
.btn-outline-invert class on the span containing the text.
This is useful for outline buttons using a light color.
Buttons can be rounded using the rounded classes.
All buttons can be set to 3 different sizes. The basic
.btn class is the normal button. You
.btn-large classes too.
.btn-outline classes work fine with all sizes, so you can use any of them.
.active class is available to apply the hover style on your buttons.
.disabled class or the "disabled" attribute make you able to change any of your buttons
disabled, even if you let all precedent classes on it.
|CSS Variable||Default value||Description|
||#c8c8c8||Disabled button background color.|
||#787878||Disabled button text color.|