Buttons

Buttons are used to provide a possible actions for user.

Standard Button

There are 2 types of standard buttons - primary and secondary. Don't forget to use btn class to apply basic button styles.

Refer the below code to use primary and secondary buttons. Make changes as per your requirements.

Copy
            <button class="btn py-sm px-1 btn-primary">Primary</button>
            <button class="btn py-sm px-1 btn-secondary">Secondary</button>

Link Button

A Link Button is basically a link in the form of a button.

Link Button

Refer the below code to use link button. Make changes as per your requirements.

Copy
            <a class="btn py-sm px-1 btn-link" href="#">Link Button</a>

Icon Button

A Link Button is basically a icon which acts as a button.

Refer the below code to use icon buttons. Make changes as per your requirements.

Copy
            <button class="btn py-sm px-1 btn-icon">
              <i class="fas fa-shopping-cart fa-2x"></i>
            </button>
            <button class="btn py-sm px-1 btn-icon">
              <i class="fas fa-heart fa-2x"></i>
            </button>
            <button class="btn py-sm px-1 btn-icon">
              <i class="fas fa-user-circle fa-2x"></i>
            </button>

Floating Action Button

A floating action button is placed on the user's viewport to provide a required action.

Refer the below code to use floating action buttons. Make changes as per your requirements.

Copy
            <a class="btn py-sm px-1 btn-float" href="#">
              <i class="fas fa-plus-circle fa-2x"></i>
            </a>
            <a class="btn py-sm px-1 btn-float" href="#">
              <i class="fas fa-edit fa-2x"></i>
            </a>
            <a class="btn py-sm px-1 btn-float" href="#">
              <i class="fas fa-chevron-circle-up fa-2x"></i>
            </a>