Buttons

Buttons are HTML elements that are clickable that help with user's interaction with the website. Buttons allow users to take actions, and make choices, with a single tap.

Buttons - Variants

There are 3 button variants - default, rounded and curved corners. Use the class btn, rounded-btn, or curved-btn for the preferred variant.


<!-- add the class "btn", "rounded-btn" or "curved-btn" -->
<button class="rounded-btn ">
    Rounded
</button>

Primary Buttons

Primary buttons provide extra visual weight and identify the primary action in a set of buttons. Use class pri-btn for primary buttons along with the preferred button variant.


<!-- add the class "pri-btn" along with the button variant -->
<button class="btn pri-btn">
    Default
</button>

Secondary Buttons

Use class sec-btn for secondary buttons along with the preferred button variant.


<!-- add the class "sec-btn" along with the button variant -->
<button class="rounded-btn sec-btn">
    Default
</button>

Link Button

Here are examples of buttons with a link that take you to a different page on click. Use class link-btn for these buttons.
There are 2 variants in addition to the default - link-btn-outline and link-border-bottom.


<!-- add the class "link-btn", "link-btn-outline" or "link-border-bottom" -->
<button class="curved-btn link-btn-outline">
    <a href="#" class="link-in-btn">Create Account</a>
</button>

Icon Buttons

For buttons with icons, use class icon-btn. You may use classes icon-pri for primary, icon-light or icon-darkfor the light and dark variants.


<!-- add the class "icon-btn", along with the preferred variant -->
<button class="icon-btn curved-btn icon-dark">
    <span class="material-icons md-18 material-icons-outlined">
        watch_later
    </span> Watch Later
</button>

Floating Action Buttons

Floating Action Button (FAB), shaped like a circled icon floating above the UI, is a tool that allows users to call out the key parts of your app. Use class fab-default, fab-extended, or fab-squircle for the preferred shapes along with the class fab to get the below floating action buttons.


<!-- add the class "fab", along with the preferred shape variant -->
<button class="fab fab-extended">
    <span class="material-icons md-18 material-icons-outlined">
        add
    </span>
    <p class="fab-ext-text">Add Item</p>
</button>

< Badges Cards >