Button

Buttons Basic

Primary Secondary Tertiary Dark Info Primary Light Success Warning Danger

<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-secondary">Secondary</a>
<a href="#" class="btn btn-tertiary">Tertiary</a>
<a href="#" class="btn btn-dark">Dark</a>
<a href="#" class="btn btn-info">Info</a>
<a href="#" class="btn btn-light">Primary Light</a>
<a href="#" class="btn btn-success">Success</a>
<a href="#" class="btn btn-warning">Warning</a>
<a href="#" class="btn btn-danger">Danger</a>

Button Sizes

Button SM Button Default Button LG Button XL Primary Long

<a href="#" class="btn btn-primary btn-sm">SM</a>
<a href="#" class="btn btn-primary ">Default</a>
<a href="#" class="btn btn-primary btn-lg">LG</a>
<a href="#" class="btn btn-primary btn-xl">XL</a>

Buttons Hover Effect

.shadow-lg–hover .hover-translate-y3 .hover-translate-x3 .hover-scale

<a href="#" class="btn btn-primary shadow-lg--hover">.shadow-lg--hover</a>
<a href="#" class="btn hover-translate-y3 btn-danger">.hover-translate-y3</a>
<a href="#" class="btn hover-translate-x3 btn-danger">.hover-translate-x3</a>
<a href="#" class="btn hover-scale btn-danger">.hover-scale</a>

Buttons with Icons

Button Arrow Get Started Today Add to Cart Add to Cart Explore More

<a class="btn btn-primary btn-md btn-arrow m-t-20 px-4" href="#"><span>Button Arrow <i class="fa fa-angle-right"></i></span></a>
<a href="#0" class="btn btn-primary btn-icon-right">
  Get Started Today
  <i class="btn-icon fa fa-angle-right"></i>
</a>
<a href="#0" class="btn  btn-success btn-icon-left">
   <i class="btn-icon fa fa-cart-plus"></i>
  Add to Cart
</a>
<a href="#0" class="btn btn-success btn-icon-right">
  Add to Cart
  <i class="btn-icon fa fa-cart-plus"></i>
</a>
<a href="#" class="linking text-themecolor">Explore More<i class="fa fa-angle-right"></i></a>

Buttons with Shadow

.shadow-lg .shadow-xl .shadow-xl-dark

<a href="#" class="btn btn-primary shadow-lg">.shadow-lg</a>
<a href="#" class="btn btn-success shadow-xl">.shadow-xl</a>
<a href="#" class="btn btn-danger shadow-xl-dark">.shadow-xl-dark</a>

Button Pill

.btn-pill .btn-pill

<a href="#" class="btn btn-primary btn-pill">.btn-pill</a>
<a href="#" class="btn btn-secondary btn-pill">.btn-pill</a>

Button Square

Squared Squared

<a href="#" class="btn btn-primary rounded-0 btn-hover">Squared</a>
<a href="#" class="btn btn-secondary rounded-0 btn-hover">Squared</a>

Button Outline

.btn-outline-primary .btn-outline-secondary

<a href="#" class="btn btn-outline-primary">.btn-outline-primary</a>
<a href="#" class="btn btn-outline-secondary">.btn-outline-secondary</a>

Button Link

.btn-link .btn-text

<a href="#" class="btn btn-link">.btn-link</a>
<a href="#" class="btn-text btn-text-hover">.btn-text</a>

Button Underline

.link-underline-primary

<a href="#" class="link link-underline-white">.link-underline-white</a>
<a href="#" class="link link-underline-primary">.link-underline-primary</a>

Button Neutral

.btn-neutral

<a href="#" class="btn  btn-neutral">.btn-neutral</a>

Button Spinner

<a href="#"  class="btn btn-primary">
    <i class="fa fa-spinner fa-spin"></i>
</a>
<a href="#" class="btn btn-secondary">
    <i class="fa fa-spinner fa-spin"></i>
</a>

Base Theme

Components

Section

MegaMenu heading

Button

Buttons Basic

Button Sizes

Buttons Hover Effect

Buttons with Icons

Buttons with Shadow

Button Pill

Button Square

Button Outline

Button Link

Button Underline

Button Neutral

Button Spinner