Buttons
Different types of 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>.
<!-- 3 ways to create a button : -->
<button class="btn shadow-1 rounded-1 blue">Normal button</button>
<div class="btn shadow-1 rounded-1 blue">Normal button</div>
<a href="#" class="btn shadow-1 rounded-1 blue">Normal button</a>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.
<button class="btn shadow-1 btn-circle blue"><span class="iconify-inline" data-icon="mdi:thumb-up"></span></button>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.
<div class="btn rounded-1 blue btn-press">Normal button</div><button class="btn btn-circle blue btn-press"><span class="iconify-inline" data-icon="mdi:thumb-up"></span></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.
<button class="btn shadow-1 rounded-1 btn-outline text-blue"><span class="btn-outline-text">Outline</span></button>
<button class="btn shadow-1 rounded-1 btn-outline btn-opening text-blue"><span class="btn-outline-text">Opening</span></button>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.
<button class="btn shadow-1 rounded-1 btn-outline text-blue text-light-3"><span class="btn-outline-text btn-outline-invert">Outline</span></button>
<button class="btn shadow-1 rounded-1 btn-outline btn-opening text-airforce text-light-2"><span class="btn-outline-text btn-outline-invert">Opening</span></button>Rounded buttons#
Buttons can be rounded using the rounded classes.
<button class="btn shadow-1 primary rounded-4">Rounded 4</button>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#
<button class="btn shadow-1 rounded-1 btn-small primary">Button</button>
<button class="btn shadow-1 rounded-1 primary">Button</button>
<button class="btn shadow-1 rounded-1 btn-large primary">Button</button>Circle#
<button class="btn shadow-1 btn-small btn-circle primary"><span class="iconify-inline" data-icon="mdi:thumb-up"></span></button>
<button class="btn shadow-1 btn-circle primary"><span class="iconify-inline" data-icon="mdi:thumb-up"></span></button>
<button class="btn shadow-1 btn-large btn-circle primary"><span class="iconify-inline" data-icon="mdi:thumb-up"></span></button>Active class#
The .active class is available to apply the hover style on your buttons.
<button class="btn rounded-1 primary">Normal button</button>
<button class="btn rounded-1 primary active">Active button</button>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.
<button class="btn rounded-1 red btn-small disabled">Disabled button</button>
<button class="btn shadow-1 btn-circle blue btn-press" disabled><span class="iconify-inline" data-icon="mdi:thumb-down"></span></i></button>Styling#
| CSS Variable | Default value | Description |
|---|---|---|
--ax-btn-disabled-bg-color
|
#c8c8c8 | Disabled button background color. |
--ax-btn-disabled-color
|
#787878 | Disabled button text color. |