Button

Buttons

Use.btn class to add btn.

<div class="flex flex-wrap gap-2"> 
   <button class="text-white btn btn-primary hover:-translate-y-1 hover:transition-all hover:ease-in-out">Primary</button> 
   <button class="text-white btn btn-secondary hover:-translate-y-1 hover:transition-all hover:ease-in-out">Secondary</button>
   <button class="text-white btn btn-info hover:-translate-y-1 hover:transition-all hover:ease-in-out">Info</button> 
   <button class="text-white btn btn-success hover:-translate-y-1 hover:transition-all hover:ease-in-out">Success</button> 
   <button class="text-white btn btn-warning hover:-translate-y-1 hover:transition-all hover:ease-in-out">Warning</button> 
   <button class="text-white btn btn-danger hover:-translate-y-1 hover:transition-all hover:ease-in-out">Danger</button>
   <button class="btn btn-light text-title">Light</button> 
</div>

Buttons Active

To set button active, you can use .btn-active class.

<div class="flex flex-wrap gap-2"> 
   <button class="text-white btn btn-active btn-primary hover:-translate-y-1 hover:transition-all hover:ease-in-out">Primary</button> 
   <button class="text-white btn btn-active btn-secondary hover:-translate-y-1 hover:transition-all hover:ease-in-out">Secondary</button>
   <button class="text-white btn btn-active btn-info hover:-translate-y-1 hover:transition-all hover:ease-in-out">Info</button> 
   <button class="text-white btn btn-active btn-success hover:-translate-y-1 hover:transition-all hover:ease-in-out">Success</button> 
   <button class="text-white btn btn-active btn-warning hover:-translate-y-1 hover:transition-all hover:ease-in-out">Warning</button> 
   <button class="text-white btn btn-active btn-danger hover:-translate-y-1 hover:transition-all hover:ease-in-out">Danger</button>
   <button class="btn btn-active btn-light hover:-translate-y-1 hover:transition-all hover:ease-in-out text-title">Light</button> 
</div>

Buttons Outline

Use.btn-outline class to set the button outline.

<div class="flex flex-wrap gap-2">
   <button class="btn btn-outline btn-primary dark:bg-sidebar-dark">Primary</button> 
   <button class="btn btn-outline btn-secondary dark:bg-sidebar-dark">Secondary</button>
   <button class="btn btn-outline btn-info dark:bg-sidebar-dark">Info</button> 
   <button class="btn btn-outline btn-success dark:bg-sidebar-dark ">Success</button> 
   <button class="btn btn-outline btn-warning dark:bg-sidebar-dark ">Warning</button> 
   <button class="btn btn-outline btn-danger dark:bg-sidebar-dark ">Danger</button>
   <button class="btn btn-outline btn-light dark:bg-sidebar-dark ">Light</button> 
</div>

Buttons using HTML tags

Use the .btn class to set input, button, link, etc. as a button.

Link 
<div class="flex flex-wrap gap-2"> 
   <a class="text-white btn btn-primary" href="javascript:void(0)" role="button">Link</a> 
   <button class="text-white btn btn-secondary">Button</button>
   <input class="text-white btn btn-info" type="submit" value="Submit">
   <input class="text-white btn btn-success" type="button" value="Button">
   <input class="text-white btn btn-warning" type="reset" value="Reset">
</div>

Buttons Sizes

To set the button size, you can use .btn-* class. ie. xs, sm, md, lg.

<div class="flex flex-wrap gap-2"> 
   <button class="btn btn-outline btn-success btn-lg.text-primary">Large</button>
   <button class="btn btn-outline btn-info btn-md.text-primary">Medium</button>
   <button class="btn btn-outline btn-secondary btn-sm.text-primary">Small</button>
   <button class="btn btn-outline btn-primary btn-xs.text-primary">Ex-small</button> 
</div>

Buttons Shape

Use .btn-* class to set the shape of the button. ie. square, rounded.

<div class="flex flex-wrap gap-2"> 
   <button class="btn btn-warning btn-rounded w-[2.25rem] h-[2.25rem] grid place-content-center !p-0"> <i class="w-4 h-4 stroke-white"> </i>  </button> 
   <button class="btn btn-outline btn-warning btn-rounded w-[2.25rem] h-[2.25rem] grid place-content-center !p-0"> <i class="w-4 h-4 stroke-warning group-hover:stroke-white"> </i>  </button>
   <button class="btn btn-success btn-square w-[2.25rem] h-[2.25rem] grid place-content-center !p-0"> <i class="w-4 h-4 stroke-white"> </i>  </button>
   <button class="btn btn-outline btn-success btn-square w-[2.25rem] h-[2.25rem] grid place-content-center !p-0"> <i class="w-4 h-4 stroke-success group-hover:stroke-white"> </i>  </button>
</div>

Buttons Disabled

use .btn-disabled or disabled="disabled" class to disable the button.

<div class="flex flex-wrap gap-2"> 
   <button class="btn btn-primary" disabled="disabled">disabled attribute</button> 
   <button class="cursor-auto btn btn-secondary btn-disabled">disabled class</button>
</div>

Buttons with Icons

Set the icon with button using .btn class.

<div class="flex flex-wrap gap-2"> 
   <button class="flex items-center justify-center gap-2 text-white btn btn-primary">
      +SVG_ICON("Heart","w-[1.125rem] h-[1.125rem] stroke-white")Likes
   </button> 
   <button class="flex items-center justify-center gap-2 text-white btn btn-warning">
      +SVG_ICON("Heart","w-[1.125rem] h-[1.125rem] stroke-white")Wishlist
   </button>
</div>

Buttons with Loader

Use loader with button.

<div class="flex flex-wrap gap-2">
   <button class="btn btn-primary">
     <span role="status">
       <svg class="w-5 h-5 text-gray-200 animate-spin fill-primary"></svg>
       <span class="sr-only"></span>
     </span>
   </button>
   <button class="btn btn-success btn-square">
     <span role="status">
       <svg class="w-5 h-5 mr-2 text-gray-200 animate-spin fill-primary"></svg>
       <span class="sr-only"></span>
     </span>
   </button>
</div>

Buttons Block

Set the button as a block using .block class.

<div class="flex flex-wrap gap-2">
   <button class="block w-full text-white btn btn-primary">Button block</button>
</div>

Buttons group

To set the group of button you can use .btn class.

<div class="flex flex-wrap gap-2">
   <button class="px-3 py-2 text-sm font-medium text-white border border-gray-200 rounded-none bg-primary hover:bg-primary hover:text-white focus:text-white focus:bg-primary dark:border-border-dark ">Profile</button>
   <button class="px-3 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-none hover:bg-primary hover:text-white focus:text-white focus:bg-primary dark:border-border-dark dark:bg-sidebar-dark2 dark:text-white dark:hover:bg-primary dark:hover:text-white dark:focus:text-white dark:focus:bg-primary ">Setting</button>
   <button class="px-3 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-none hover:bg-primary hover:text-white focus:text-white focus:bg-primary dark:border-border-dark dark:bg-sidebar-dark2 dark:text-white dark:hover:bg-primary dark:hover:text-white dark:focus:text-white dark:focus:bg-primary ">Message</button>
</div>

Copyright 2023 © Govo theme by pixelstrap

Hand crafted & made with

Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Monochrome Mode