Buttons

Default

Outline

Custom outline size

Sizing

Custom buttons - With the help of utility classes, Create any type of button, Checkout a few examples below
Purchase Now Only for $32

Purchase Now

Hover Rise buttons

This will work only with .btn-outline-[color] component

Rise button Rise button Rise button Rise button Rise button Rise button Rise icon button Rise button Rise button 

 
  <a href="#" class="btn btn-rise btn-outline-primary">
    <span class="btn-rise-bg bg-primary"></span>
    <span class="btn-rise-text">
    <i class="bx bx-paperclip fs-5"></i>
     Upload Resume
    </span>
  </a>

Button - Hover Arrow



 
<button class="btn btn-danger btn-hover-arrow btn-lg">
 <span>Hover Me</span>
</button>

Button - circle ripple





<a href="#!" class="btn btn-secondary btn-circle-ripple p-0 width-8x height-8x
 rounded-pill fs-3 lh-1 flex-center me-4 mb-3">
 <i class="bx bx-play fs-3 lh-1 align-middle"></i>
</a>

Button - Hover Text

Learn More Learn More Learn More Learn More Learn More 



<a href="#!" class="btn btn-outline-dark btn-hover-text">
 <span class="btn-hover-label label-default">Learn More</span>
 <span class="btn-hover-label label-hover">
   Learn More
 </span>
</a>

Button - Gradient New

Explore demos
Explore demos 



<a href="#!" class="d-inline-block hover-lift hover-shadow rounded-2">
  <div class="p-1 bg-gradient-primary d-inline-block rounded-2">
   <div class="btn pe-auto btn-outline-white border-0 btn-hover-arrow">
      <span>Explore demos
   </div>
  </div>
</a>

Let's start building stunning websites

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.