Button

.button class allows you to set quick and default button style.

Size

.button for default size button field
.button-xs for small size button field
.button-md for medium size button field
.button-lg for large size button field
<button class="button">...</button>
<button class="button-xs">...</button>
<button class="button-md">...</button>
<button class="button-lg">...</button>

Width

Use .full or .half class for 100% or 50% width.
<button class="button full">...</button>
<button class="button half">...</button>

Color

To change the color of button change text color, background color and focus color

Don’t forget to change the focused outline color. Use .focus-{color} class to change outline color. If don’t want focus outline color than use .focus-none class

<!-- Solid Color -->
<button class="button bg-blue white focus-blue">BLUE</button>
<button class="button bg-indigo white focus-indigo">INDIGO</button>
<button class="button bg-purple white focus-purple">PURPLE</button>
<button class="button bg-pink white focus-pink">PINK</button>
<button class="button bg-red white focus-red">RED</button>
<button class="button bg-orange white focus-orange">ORANGE</button>
<button class="button bg-yellow white focus-yellow">YELLOW</button>
<button class="button bg-pear white focus-pear">PEAR</button>
<button class="button bg-green white focus-green">GREEN</button>
<button class="button bg-mint white focus-mint">MINT</button>
<button class="button bg-teal white focus-teal">TEAL</button>
<button class="button bg-wine white focus-wine">WINE</button>
<button class="button bg-brown white focus-brown">BROWN</button>
<button class="button bg-almond white focus-almond">ALMOND</button>
<button class="button bg-slategray white focus-slategray">SLATEGRAY</button>
<button class="button bg-gray white focus-gray">GRAY</button>
<button class="button bg-black white focus-black">BLACK</button>

<!-- Light Color -->
<button class="button bg-blue-lightest blue focus-blue">BLUE</button>
<button class="button bg-indigo-lightest indigo focus-indigo">INDIGO</button>
<button class="button bg-purple-lightest purple focus-purple">PURPLE</button>
<button class="button bg-pink-lightest pink focus-pink">PINK</button>
<button class="button bg-red-lightest red focus-red">RED</button>
<button class="button bg-orange-lightest orange focus-orange">ORANGE</button>
<button class="button bg-yellow-lightest yellow focus-yellow">YELLOW</button>
<button class="button bg-pear-lightest pear focus-pear">PEAR</button>
<button class="button bg-green-lightest green focus-green">GREEN</button>
<button class="button bg-mint-lightest mint focus-mint">MINT</button>
<button class="button bg-teal-lightest teal focus-teal">TEAL</button>
<button class="button bg-wine-lightest wine focus-wine">WINE</button>
<button class="button bg-brown-lightest brown focus-brown">BROWN</button>
<button class="button bg-almond-lightest almond focus-almond">ALMOND</button>
<button class="button bg-slategray-lightest slategray focus-slategray">SLATEGRAY</button>
<button class="button bg-gray-lightest gray focus-gray">GRAY</button>
<button class="button bg-white black focus-white">WHITE</button>

Border

To change the border color of button use .border-{color} class

<!-- Border Color -->
<button class="button bg-blue-lightest border-blue blue focus-blue">BLUE</button>
<button class="button bg-indigo-lightest border-indigo indigo focus-indigo">INDIGO</button>
<button class="button bg-purple-lightest border-purple purple focus-purple">PURPLE</button>
<button class="button bg-pink-lightest border-pink pink focus-pink">PINK</button>
<button class="button bg-red-lightest border-red red focus-red">RED</button>
<button class="button bg-orange-lightest border-orange orange focus-orange">ORANGE</button>
<button class="button bg-yellow-lightest border-yellow yellow focus-yellow">YELLOW</button>
<button class="button bg-pear-lightest border-pear pear focus-pear">PEAR</button>
<button class="button bg-green-lightest border-green green focus-green">GREEN</button>
<button class="button bg-mint-lightest border-mint mint focus-mint">MINT</button>
<button class="button bg-teal-lightest border-teal teal focus-teal">TEAL</button>
<button class="button bg-wine-lightest border-wine wine focus-wine">WINE</button>
<button class="button bg-brown-lightest border-brown brown focus-brown">BROWN</button>
<button class="button bg-almond-lightest border-almond almond focus-almond">ALMOND</button>
<button class="button bg-slategray-lightest border-slategray slategray focus-slategray">SLATEGRAY</button>
<button class="button bg-gray-lightest border-gray gray focus-gray">GRAY</button>
<button class="button bg-white border-black black focus-white">WHITE</button>

Disabled

Just add disabled attribute to make button disable.
<button class="button" disabled>...</button>

Loading

Use .loading class to set button in loading state. Loading icons inherits the color and size of button.

<button class="button loading">DEFAULT</button>
<button class="button-xs bg-blue white loading">BLUE</button>
<button class="button bg-blue white loading">BLUE</button>
<button class="button-md bg-blue white loading">BLUE</button>
<button class="button-lg bg-gray-lighter gray loading">Gray</button>

Round

To make border round use border radius .br-round.
<button class="button br-round">...</button>
<button class="button br-0">...</button>
<button class="button br-6">...</button>

Icon

<button class="button">
    <ion-icon name="cart" size="small" class="mr-3"></ion-icon>
    <span>Checkout</span>
</button>

<button class="button bg-pink">
    <span class="input-icon">
        <i data-feather="heart" class="w-5 h-5"></i>
    </span>
</button>

<button class="button">
    SEARCH
    <ion-icon name="search" size="small" class="ml-3"></ion-icon>
</button>

Shadow

To add shadow use shadow like .shadow or .shadow-1

<button class="button shadow">Submit</button>

Gradient

Use .{start-color}-{end-color} to add two color liner gradient. See gradient background color doc

<button class="button orange-red white shadow-2-orange bw-0 focus-red">ORANGE RED</button>
<button class="button linear-blue white shadow-2-blue bw-0 focus-blue">LINEAR BLUE</button>
<button class="button linear-red white shadow-2-red bw-0 focus-red">LINEAR RED</button>

Hover

Default hover effect changes the opacity of button but you can change hover effect

<button class="button hover-shift-t-2 ease-200">up on hover</button>
<button class="button hover-rotate-2 ease-200">rotate on hover</button>
<button class="button hover-scale-up-1 ease-200">zoom on hover</button>
<button class="button hover-bg-green ease-200">color on hover</button>
<button class="button hover-bg-gray-darkest ease-200">dark on hover</button>

Group

Use .horizontal-group class to make a horizontal button group or .vertical-group to make a vertical button group

<!-- Horizontal button group -->
<div class="horizontal-group">
    <button type="button" class="button bg-white gray border-gray">Left</button>
    <button type="button" class="button bg-white gray border-gray">Center</button>
    <button type="button" class="button bg-white gray border-gray">Right</button>
</div>

<!-- Vertical button group -->
<div class="vertical-group">
    <button type="button" class="button bg-white gray border-gray">Top</button>
    <button type="button" class="button bg-white gray border-gray">Middle</button>
    <button type="button" class="button bg-white gray border-gray">Bottom</button>
</div>