Buttons

Buttons are also called as call to action. We have range of buttons and their states. You may use a tag or button element, you just need to add the respective classes, and you are good to go.

Examples

Primary Buttons

              
<button
  class="btn btn-square-solid text-white bg-rose-700 btn-bg-hover-rose-600"
 >
  click me
</button>
<button
  class="btn text-white btn-bg-hover-teal-500 btn-text-hover-white btn-rounded-solid bg-teal-700"
 >
  click me
</button>
<button
  class="btn btn-square-outlined btn-bg-hover-blue-600 text-hover-white text-blue-600"
 >
  click me
</button>
<button
  class="btn btn-rounded-outlined text-rose-600 btn-bg-hover-rose-600 btn-text-hover-white"
 >
  click me
</button>
<button class="btn btn-text-underline btn-text-hover-rose-800 text-green-600">
  Text Primary
</button>
<button class="btn-icon text-teal-900">
  <span class="fas fa-shopping-cart"></span>
</button>
<button class="btn btn-square-icon-text bg-amber-600 text-white">
  <span class="far fa-gem"></span>
  Primary button
</button>
<button
  class="btn btn-rounded-icon-text bg-teal-700 text-white btn-bg-hover-teal-500"
 >
  <span class="fas fa-shopping-cart"></span>
  Primary button
</button>

Secondary Buttons

              
<button class="btn btn-square-solid">click me </button>
 <button class="btn btn-rounded-solid">click me</button> 
 <button class="btn btn-square-outlined text-slate-500 btn-bg-hover-grey-200"> secondary button
</button> 
<button class="btn btn-rounded-outlined text-slate-500
btn-bg-hover-grey-200"> secondary button </button> 
<button class="btn btn-text-underline text-slate-600">Text Secondary</button> 
<button class="btn-icon text-grey-500"> <span class="fas fa-trash-alt"></span>
</button>

Disabled Buttons

              
 <button
  class="btn btn-square-solid text-white bg-rose-700 btn-bg-hover-rose-600 btn-disabled"
>
  click me
</button>
<button
  class="btn text-white btn-bg-hover-teal-500 btn-text-hover-white btn-rounded-solid bg-teal-700 btn-disabled"
>
  click me
</button>
<button
  class="btn btn-square-outlined btn-bg-hover-blue-600 text-hover-white text-blue-600 btn-disabled"
>
  click me
</button>
<button
  class="btn btn-rounded-outlined text-rose-600 btn-bg-hover-rose-600 btn-text-hover-white btn-disabled"
>
  click me
</button>
<button
  class="btn btn-text-underline btn-text-hover-rose-800 text-green-600 btn-disabled"
>
  Text Primary
</button>
<button class="btn-icon text-teal-900 btn-disabled">
  <span class="fas fa-shopping-cart"></span>
</button>
<button class="btn btn-square-icon-text bg-amber-600 text-white btn-disabled">
  <span class="far fa-gem"></span>
  Primary button
</button>
<button
  class="btn btn-rounded-icon-text bg-teal-700 text-white btn-bg-hover-teal-500 btn-disabled"
>
  <span class="fas fa-shopping-cart"></span>
  Primary button
</button>

Button Sizes

              
<button
  class="btn btn-square-solid text-white bg-sky-700 btn-bg-hover-sky-600 btn-sm"
>
  click me
</button>
<button
  class="btn text-white btn-bg-hover-fuchsia-700 btn-text-hover-white btn-rounded-solid bg-fuchsia-900 btn-sm"
>
  click me
</button>
<button
  class="btn btn-square-solid text-white bg-sky-700 btn-bg-hover-sky-600 btn-md"
>
  click me
</button>
<button
  class="btn text-white btn-bg-hover-fuchsia-700 btn-text-hover-white btn-rounded-solid bg-fuchsia-900 btn-md"
>
  click me
</button>
<button
  class="btn btn-square-solid text-white bg-sky-700 btn-bg-hover-sky-600 btn-lg"
>
  click me
</button>
<button
  class="btn text-white btn-bg-hover-fuchsia-700 btn-text-hover-white btn-rounded-solid bg-fuchsia-900 btn-lg"
>
  click me
</button>
<button
  class="btn btn-square-solid text-white bg-sky-700 btn-bg-hover-sky-600 btn-xl"
>
  click me
</button>
<button
  class="btn text-white btn-bg-hover-fuchsia-700 btn-text-hover-white btn-rounded-solid bg-fuchsia-900 btn-xl"
>
  click me
</button>
Badge Cards