Buttons

Normal buttons

To use a button, add a button with a class named .btn. You can use on it any color in the color palette.
The normal button is the only variant that can be used with the hoverable class.
All buttons are working inside a <a>, a <button> and a <div>.

Normal button

Circle buttons

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 .btn.

Press buttons

Press buttons are stylized buttons. To use them, use the same .btn class as before, and add the .btn-press class to it. You can use it on a circle button.

Normal button

Outline buttons

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 .btn-opening one.
The background-color which comes while you hover the button is the .text-color class on the button.
Note that the span inside the button needs to get the .btn-outline-text 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.

Rounded buttons

Buttons can be rounded using the rounded classes.

Rounded 4

Button sizes

All buttons can be set to 3 different sizes. The basic .btn class is the normal button. You can use .btn-small, and .btn-large classes too.
Note that .btn-press and .btn-outline classes work fine with all sizes, so you can use any of them.

Normal

Circle

Active class

The .active class is available to apply the hover style on your buttons.

Disabled buttons

The .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.

Styling