Custom outline size


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

Button - Hover Arrow

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

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>

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

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

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.