Components

Tailwind CSS Buttons

Buttons are an integral part of any website or user interface. it is used for different objectives viz. triggering actions, social logins, redirecting towards payments etc.

image

Pagedone offers a wide range of different styles of buttons which can be customized as per individual requirements.

Default Button types

Following tailwind button styles is the default button type to indicate different actions and links within the website.

<div class='mb-8 inline-flex gap-2'>
      <button type='button' class='py-2.5 px-6 text-sm bg-indigo-500 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700'>Primary</button>
      <button type='button' class='py-2.5 px-6 text-sm bg-indigo-50 text-indigo-500 rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-100'>Secondary</button>
      <button type='button' class='py-2.5 px-6 text-sm border border-gray-300 rounded-full shadow-xs bg-white font-semibold text-gray-900 transition-all duration-500 hover:bg-gray-50'>Outline</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-full font-semibold text-indigo-500 transition-all duration-500 hover:bg-indigo-100 hover:shadow-xs hover:text-indigo-700'>Tertiary</button>
      <button type='button' class='py-2.5 px-6 text-sm font-semibold text-indigo-500 transition-all duration-500 hover:text-indigo-700'>Link</button>
      </div>
      <div class='inline-flex gap-2'>
      <button type='button' class='py-2.5 px-6 text-sm bg-indigo-500 text-white rounded-lg cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700'>Primary</button>
      <button type='button' class='py-2.5 px-6 text-sm bg-indigo-50 text-indigo-500 rounded-lg cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-100'>Secondary</button>
      <button type='button' class='py-2.5 px-6 text-sm border border-gray-300 rounded-lg shadow-xs bg-white font-semibold text-gray-900 transition-all duration-500 hover:bg-gray-50'>Outline</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-lg font-semibold text-indigo-500 transition-all duration-500 hover:bg-indigo-100 hover:shadow-xs hover:text-indigo-700'>Tertiary</button>
      <button type='button' class='py-2.5 px-6 text-sm font-semibold text-indigo-500 transition-all duration-500 hover:text-indigo-700'>Link</button>
      </div>

Destructive Button types

Destructive tailwind css buttons are used when you want users to be more cautious as clicking events on buttons may have unwanted or undesired consequences. colors do help while designing such buttons eg. green signals positive while red is a sign of danger or negative action.

<div class='inline-flex gap-2 mb-8'>
      <button type='button' class='py-2.5 px-6 text-sm bg-red-500 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-red-700'>Primary</button>
      <button type='button' class='py-2.5 px-6 text-sm bg-red-50 text-red-500 rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-red-100 hover:text-red-700'>Secondary</button>
      <button type='button' class='py-2.5 px-6 text-sm bg-white border border-red-300  text-red-500 rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-red-50 hover:text-red-700'>Outline</button>
      <button type='button' class='py-2.5 px-6 text-sm text-red-500 rounded-full cursor-pointer font-semibold text-center  transition-all duration-500 hover:bg-red-100 hover:text-red-700 hover:shadow-xs'>Tertiary</button>
      <button type='button' class='py-2.5 px-6 text-sm text-red-500 rounded-full cursor-pointer font-semibold text-center  transition-all duration-500 hover:text-red-700'>Link</button>
      </div>
      <div class='inline-flex gap-2'>
      <button type='button' class='py-2.5 px-6 text-sm rounded-lg bg-red-500 text-white cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-red-700'>Primary</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-lg bg-red-50 text-red-500 cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-red-100 hover:text-red-700'>Secondary</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-lg bg-white border border-red-300  text-red-500 cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-red-50 hover:text-red-700'>Outline</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-lg text-red-500 cursor-pointer font-semibold text-center  transition-all duration-500 hover:bg-red-100 hover:text-red-700 hover:shadow-xs'>Tertiary</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-lg text-red-500 cursor-pointer font-semibold text-center  transition-all duration-500 hover:text-red-700'>Link</button>
      </div>

Button Sizes

Difference tailwind button sizes can be created using different classes of tailwind css.

<div class='inline-flex items-center gap-2 mb-8'>
      <!-- tiny btn  -->
      <button type='button' class='py-1.5 px-3.5 text-xs max-h-max bg-indigo-500 text-white rounded-full cursor-pointer font-medium leading-5 text-center shadow-xs transition-all duration-500 hover:bg-indigo-700'>Tiny</button>
      <!-- small btn  -->
      <button type='button' class='py-2.5 px-6 text-sm max-h-max bg-indigo-500 text-white rounded-full cursor-pointer font-medium text-center shadow-xs transition-all duration-500 hover:bg-indigo-700'>Small</button>
      <!-- midum btn -->
      <button type='button' class='py-3 px-7 text-base max-h-max bg-indigo-500 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700'>Medium</button>
      <!-- large btn  -->
      <button type='button' class='py-3.5 px-8 text-lg max-h-max bg-indigo-500 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700'>Large</button>
      <!-- huge btn  -->
      <button type='button' class='py-4 px-9 text-xl max-h-max leading-8 bg-indigo-500 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700'>Huge</button>
      </div>
      <div class='inline-flex items-center  gap-2'>
      <button type='button' class='py-1.5 px-3.5 text-xs bg-indigo-500 text-white rounded-md cursor-pointer font-medium leading-5 text-center shadow-xs transition-all duration-500 hover:bg-indigo-700'>Tiny</button>
      <button type='button' class='py-2.5 px-6 text-sm bg-indigo-500 text-white rounded-lg cursor-pointer font-medium text-center shadow-xs transition-all duration-500 hover:bg-indigo-700'>Small</button>
      <button type='button' class='py-3 px-7 text-base bg-indigo-500 text-white rounded-xl cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700'>Medium</button>
      <button type='button' class='py-3.5 px-8 text-lg bg-indigo-500 text-white rounded-xl cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700'>Large</button>
      <button type='button' class='py-4 px-9 text-xl leading-8 bg-indigo-500 text-white rounded-xl cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700'>Huge</button>
      </div>

Button Color Varient

Difference button colors can be applied using different classes of tailwind css. Following are examples of tailwind button colors.

<div class='inline-flex gap-2 mb-8'>
      <button type='button' class='py-2.5 px-6 text-sm rounded-full bg-indigo-500 text-white cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-full bg-red-500 text-white cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-red-700'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-full bg-yellow-500 text-white cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-yellow-700'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-full bg-green-500 text-white cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-green-700'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-full bg-purple-500 text-white cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-purple-700'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-full bg-orange-500 text-white cursor-pointer font-semibold text-center shadow-xs transition-all duration-600 hover:bg-orange-700'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-full bg-gray-700 text-white cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-gray-900'>Button</button>
      </div>
      <div class='inline-flex gap-2'>
      <button type='button' class='py-2.5 px-6 text-sm rounded-lg bg-indigo-500 text-white cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-lg bg-red-500 text-white cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-red-700'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-lg bg-yellow-500 text-white cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-yellow-700'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-lg bg-green-500 text-white cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-green-700'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-lg bg-purple-500 text-white cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-purple-700'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-lg bg-orange-500 text-white cursor-pointer font-semibold text-center shadow-xs transition-all duration-600 hover:bg-orange-700'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-lg bg-gray-700 text-white cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-gray-900'>Button</button>
      </div>

Button Outline Varient

Following are tailwind button examples where you can add outline or border by using different classes of tailwind css.

<div class='inline-flex gap-2 mb-8'>
      <button type='button' class='py-2.5 px-6 text-sm rounded-full border border-solid border-indigo-200 text-indigo-600 cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-600 hover:text-white'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-full border border-solid border-red-200 text-red-600 cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-red-600 hover:text-white'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-full border border-solid border-amber-200 text-amber-600 cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-amber-600 hover:text-white'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-full border border-solid border-emerald-200 text-emerald-600 cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-emerald-600 hover:text-white'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-full border border-solid border-blue-200 text-blue-600 cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-blue-600 hover:text-white'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-full border border-solid border-purple-200 text-purple-600 cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-purple-600 hover:text-white'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-full border border-solid border-gray-200 text-gray-600 cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-gray-900 hover:text-white'>Button</button>
      </div>
      <div class='inline-flex gap-2'>
      <button type='button' class='py-2.5 px-6 text-sm rounded-lg border border-solid border-indigo-200 text-indigo-600 cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-600 hover:text-white'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-lg border border-solid border-red-200 text-red-600 cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-red-600 hover:text-white'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-lg border border-solid border-amber-200 text-amber-600 cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-amber-600 hover:text-white'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-lg border border-solid border-emerald-200 text-emerald-600 cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-emerald-600 hover:text-white'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-lg border border-solid border-blue-200 text-blue-600 cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-blue-600 hover:text-white'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-lg border border-solid border-purple-200 text-purple-600 cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-purple-600 hover:text-white'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-lg border border-solid border-gray-200 text-gray-600 cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-gray-900 hover:text-white'>Button</button>
      </div>

Button Gradient

You can add gradient-color to buttons.It allows you to create unique interface. you can use tailwind utility class bg-gradient-[*] of Tailwind CSS. Following are examples of tailwind button component with gradients. 

<div class='inline-flex gap-2 mb-8'>
      <button type='button' class='py-2.5 px-6 text-sm rounded-full bg-gradient-to-r from-indigo-600 to-indigo-500 text-white cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-gradient-to-l'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-full bg-gradient-to-r from-blue-500 to-blue-300 text-white cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-gradient-to-l'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-full bg-gradient-to-r from-green-500 to-green-300 text-white cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-gradient-to-l'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-full bg-gradient-to-r from-pink-500 to-pink-400 text-white cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-gradient-to-l'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-full bg-gradient-to-r from-orange-500 to-orange-300 text-white cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-gradient-to-l'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-full bg-gradient-to-r from-yellow-400 to-yellow-200 text-white cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-gradient-to-l'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-full bg-gradient-to-r from-gray-700 to-gray-500 text-white cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-gradient-to-l'>Button</button>
      </div>
      <div class='inline-flex gap-2'>
      <button type='button' class='py-2.5 px-6 text-sm rounded-lg bg-gradient-to-r from-indigo-600 to-indigo-500 text-white cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-gradient-to-l'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-lg bg-gradient-to-r from-blue-500 to-blue-300 text-white cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-gradient-to-l'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-lg bg-gradient-to-r from-green-500 to-green-300 text-white cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-gradient-to-l'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-lg bg-gradient-to-r from-pink-500 to-pink-400 text-white cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-gradient-to-l'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-lg bg-gradient-to-r from-orange-500 to-orange-300 text-white cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-gradient-to-l'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-lg bg-gradient-to-r from-yellow-400 to-yellow-200 text-white cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-gradient-to-l'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm rounded-lg bg-gradient-to-r from-gray-700 to-gray-500 text-white cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-gradient-to-l'>Button</button>
      </div>

Button with gradient outline

You can add gradient-color to buttons outline or border.It allows you to create unique interface. you can use tailwind utility class bg-gradient-[*] of Tailwind CSS. 

<div class='mb-8'>
      <button class='relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm text-indigo-600 font-semibold rounded-full group bg-gradient-to-br from-indigo-600 to-indigo-500 group-hover:from-indigo-600 group-hover:to-indigo-500 hover:text-white'>
      <span class='relative py-2 px-5 transition-all ease-in duration-75 bg-white rounded-full group-hover:bg-opacity-0'> Button </span>
      </button>
      <button class='relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm text-blue-600 font-semibold rounded-full group bg-gradient-to-br from-blue-500 to-blue-300 group-hover:from-blue-500 group-hover:to-blue-300 hover:text-white'>
      <span class='relative py-2 px-5 transition-all ease-in duration-75 bg-white rounded-full group-hover:bg-opacity-0'> Button </span>
      </button>
      <button class='relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm text-green-600 font-semibold rounded-full group bg-gradient-to-br from-green-500 to-green-300 group-hover:from-green-500 group-hover:to-green-300 hover:text-white'>
      <span class='relative py-2 px-5 transition-all ease-in duration-75 bg-white rounded-full group-hover:bg-opacity-0'> Button </span>
      </button>
      <button class='relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm text-pink-600 font-semibold rounded-full group bg-gradient-to-br from-pink-500 to-pink-400 group-hover:from-pink-500 group-hover:to-pink-400 hover:text-white'>
      <span class='relative py-2 px-5 transition-all ease-in duration-75 bg-white rounded-full group-hover:bg-opacity-0'> Button </span>
      </button>
      <button class='relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm text-orange-600 font-semibold rounded-full group bg-gradient-to-br from-orange-500 to-orange-300 group-hover:from-orange-500 group-hover:to-orange-300 hover:text-white'>
      <span class='relative py-2 px-5 transition-all ease-in duration-75 bg-white rounded-full group-hover:bg-opacity-0'> Button </span>
      </button>
      <button class='relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm text-yellow-600 font-semibold rounded-full group bg-gradient-to-br from-yellow-400 to-yellow-200 group-hover:from-yellow-400 group-hover:to-yellow-200 hover:text-white'>
      <span class='relative py-2 px-5 transition-all ease-in duration-75 bg-white rounded-full group-hover:bg-opacity-0'> Button </span>
      </button>
      <button class='relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm text-gray-600 font-semibold rounded-full group bg-gradient-to-br from-gray-700 to-gray-500 group-hover:from-gray-700 group-hover:to-gray-500 hover:text-white'>
      <span class='relative py-2 px-5 transition-all ease-in duration-75 bg-white rounded-full group-hover:bg-opacity-0'> Button </span>
      </button>
      </div>
      <div class=''>
      <button class='relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm text-indigo-600 font-semibold rounded-lg group bg-gradient-to-br from-indigo-600 to-indigo-500 group-hover:from-indigo-600 group-hover:to-indigo-500 hover:text-white'>
      <span class='relative py-2 px-5 transition-all ease-in duration-75 bg-white rounded-lg group-hover:bg-opacity-0'> Button </span>
      </button>
      <button class='relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm text-blue-600 font-semibold rounded-lg group bg-gradient-to-br from-blue-500 to-blue-300 group-hover:from-blue-500 group-hover:to-blue-300 hover:text-white'>
      <span class='relative py-2 px-5 transition-all ease-in duration-75 bg-white rounded-lg group-hover:bg-opacity-0'> Button </span>
      </button>
      <button class='relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm text-green-600 font-semibold rounded-lg group bg-gradient-to-br from-green-500 to-green-300 group-hover:from-green-500 group-hover:to-green-300 hover:text-white'>
      <span class='relative py-2 px-5 transition-all ease-in duration-75 bg-white rounded-lg group-hover:bg-opacity-0'> Button </span>
      </button>
      <button class='relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm text-pink-600 font-semibold rounded-lg group bg-gradient-to-br from-pink-500 to-pink-400 group-hover:from-pink-500 group-hover:to-pink-400 hover:text-white'>
      <span class='relative py-2 px-5 transition-all ease-in duration-75 bg-white rounded-lg group-hover:bg-opacity-0'> Button </span>
      </button>
      <button class='relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm text-orange-600 font-semibold rounded-lg group bg-gradient-to-br from-orange-500 to-orange-300 group-hover:from-orange-500 group-hover:to-orange-300 hover:text-white'>
      <span class='relative py-2 px-5 transition-all ease-in duration-75 bg-white rounded-lg group-hover:bg-opacity-0'> Button </span>
      </button>
      <button class='relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm text-yellow-600 font-semibold rounded-lg group bg-gradient-to-br from-yellow-400 to-yellow-200 group-hover:from-yellow-400 group-hover:to-yellow-200 hover:text-white'>
      <span class='relative py-2 px-5 transition-all ease-in duration-75 bg-white rounded-lg group-hover:bg-opacity-0'> Button </span>
      </button>
      <button class='relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm text-gray-600 font-semibold rounded-lg group bg-gradient-to-br from-gray-700 to-gray-500 group-hover:from-gray-700 group-hover:to-gray-500 hover:text-white'>
      <span class='relative py-2 px-5 transition-all ease-in duration-75 bg-white rounded-lg group-hover:bg-opacity-0'> Button </span>
      </button>
      </div>

Button with icons

Following tailwind button with icon is the default button type where you can add icons on before or after the text.

<div class='inline-flex gap-2 mb-8'>
      <button type='button' class='py-2.5 pl-3.5 pr-6 text-sm bg-indigo-500 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 flex items-center hover:bg-indigo-700'>
      <svg class='mr-3' width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'>
      <path d='M5 1L2.41421 3.58579C1.74755 4.25245 1.41421 4.58579 1.41421 5C1.41421 5.41421 1.74755 5.74755 2.41421 6.41421L5 9' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
      </svg> Primary </button>
      <button type='button' class='py-2.5 pl-3.5 pr-6 text-sm bg-indigo-50 text-indigo-500 rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 flex items-center hover:bg-indigo-100'>
      <svg class='mr-3' width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'>
      <path d='M5 1L2.41421 3.58579C1.74755 4.25245 1.41421 4.58579 1.41421 5C1.41421 5.41421 1.74755 5.74755 2.41421 6.41421L5 9' stroke='#5551FF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
      </svg> Secondary </button>
      <button type='button' class='py-2.5 pl-6 pr-3.5 text-sm bg-indigo-500 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 flex items-center hover:bg-indigo-700'> Primary <svg class='ml-3' width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'>
      <path d='M1 9L3.58579 6.41421C4.25245 5.74755 4.58579 5.41421 4.58579 5C4.58579 4.58579 4.25245 4.25245 3.58579 3.58579L1 1' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
      </svg>
      </button>
      <button type='button' class='py-2.5 pl-6 pr-3.5 text-sm bg-indigo-50 text-indigo-500 rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 flex items-center hover:bg-indigo-100'> Secondary <svg class='ml-3' width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'>
      <path d='M1 9L3.58579 6.41421C4.25245 5.74755 4.58579 5.41421 4.58579 5C4.58579 4.58579 4.25245 4.25245 3.58579 3.58579L1 1' stroke='#5551FF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
      </svg>
      </button>
      </div>
      <div class='inline-flex  gap-2'>
      <button type='button' class='py-2.5 pl-3.5 pr-6 text-sm bg-indigo-500 text-white rounded-lg cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 flex items-center hover:bg-indigo-700'>
      <svg class='mr-3' width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'>
      <path d='M5 1L2.41421 3.58579C1.74755 4.25245 1.41421 4.58579 1.41421 5C1.41421 5.41421 1.74755 5.74755 2.41421 6.41421L5 9' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
      </svg> Primary </button>
      <button type='button' class='py-2.5 pl-3.5 pr-6 text-sm bg-indigo-50 text-indigo-500 rounded-lg cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 flex items-center hover:bg-indigo-100'>
      <svg class='mr-3' width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'>
      <path d='M5 1L2.41421 3.58579C1.74755 4.25245 1.41421 4.58579 1.41421 5C1.41421 5.41421 1.74755 5.74755 2.41421 6.41421L5 9' stroke='#5551FF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
      </svg> Secondary </button>
      <button type='button' class='py-2.5 pl-6 pr-3.5 text-sm bg-indigo-500 text-white rounded-lg cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 flex items-center hover:bg-indigo-700'> Primary <svg class='ml-3' width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'>
      <path d='M1 9L3.58579 6.41421C4.25245 5.74755 4.58579 5.41421 4.58579 5C4.58579 4.58579 4.25245 4.25245 3.58579 3.58579L1 1' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
      </svg>
      </button>
      <button type='button' class='py-2.5 pl-6 pr-3.5 text-sm bg-indigo-50 text-indigo-500 rounded-lg cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 flex items-center hover:bg-indigo-100'> Secondary <svg class='ml-3' width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'>
      <path d='M1 9L3.58579 6.41421C4.25245 5.74755 4.58579 5.41421 4.58579 5C4.58579 4.58579 4.25245 4.25245 3.58579 3.58579L1 1' stroke='#5551FF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
      </svg>
      </button>
      </div>

Icon buttons

Following tailwind icon button is the button which contains only icons within it.

<div class='inline-flex gap-2 mb-8'>
      <button type='button' class='w-11 h-11  bg-indigo-500 rounded-full flex items-center justify-center cursor-pointer transition-all duration-500  hover:bg-indigo-700'>
      <svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'>
      <path d='M1.22229 5.00019H8.77785M5.00007 8.77797V1.22241' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
      </svg>
      </button>
      <button type='button' class='w-11 h-11  bg-indigo-50 rounded-full flex items-center justify-center cursor-pointer transition-all duration-500  hover:bg-indigo-100'>
      <svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'>
      <path d='M1.22229 5.00013H8.77785M5.00007 8.77791V1.22235' stroke='#5551FF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
      </svg>
      </button>
      <button type='button' class='w-11 h-11  bg-white shadow-xs border border-gray-300 rounded-full flex items-center justify-center cursor-pointer transition-all duration-500  hover:bg-gray-50'>
      <svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'>
      <path d='M1.22229 5.0001H8.77785M5.00007 8.77788V1.22232' stroke='#101828' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
      </svg>
      </button>
      <button type='button' class='w-11 h-11  rounded-full flex items-center justify-center cursor-pointer transition-all duration-500  hover:bg-indigo-200'>
      <svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'>
      <path d='M1.22229 5.00011H8.77785M5.00007 8.77789V1.22233' stroke='#5551FF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
      </svg>
      </button>
      </div>
      <div class='flex gap-2'>
      <button type='button' class='w-11 h-11  bg-indigo-500 rounded-lg flex items-center justify-center cursor-pointer transition-all duration-500  hover:bg-indigo-700'>
      <svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'>
      <path d='M1.22229 5.00019H8.77785M5.00007 8.77797V1.22241' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
      </svg>
      </button>
      <button type='button' class='w-11 h-11  bg-indigo-50 rounded-lg flex items-center justify-center cursor-pointer transition-all duration-500  hover:bg-indigo-100'>
      <svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'>
      <path d='M1.22229 5.00013H8.77785M5.00007 8.77791V1.22235' stroke='#5551FF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
      </svg>
      </button>
      <button type='button' class='w-11 h-11  bg-white shadow-xs border border-gray-300 rounded-lg flex items-center justify-center cursor-pointer transition-all duration-500  hover:bg-gray-50'>
      <svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'>
      <path d='M1.22229 5.0001H8.77785M5.00007 8.77788V1.22232' stroke='#101828' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
      </svg>
      </button>
      <button type='button' class='w-11 h-11  rounded-lg flex items-center justify-center cursor-pointer transition-all duration-500  hover:bg-indigo-200'>
      <svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'>
      <path d='M1.22229 5.00011H8.77785M5.00007 8.77789V1.22233' stroke='#5551FF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
      </svg>
      </button>
      </div>

Tailwind Loading Button

Following is button with spinner to indicate some process is going on or taking place.

<div class='inline-flex  gap-2 flex-wrap'>
      <button type='button' class='py-2.5 px-4 text-xs bg-indigo-500 text-white rounded-lg cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700'>
      <span class='animate-spin inline-block w-4 h-4 border-[3px] border-current border-t-transparent text-white rounded-full' role='status' aria-label='loading'>
      <span class='sr-only'>Loading...</span>
      </span>
      </button>
      <button type='button' class='py-2.5 px-4 inline-flex justify-center items-center gap-2 bg-indigo-500 text-white rounded-lg cursor-pointer font-semibold text-base text-center shadow-xs transition-all duration-500 hover:bg-indigo-700'>
      <span class='animate-spin inline-block w-4 h-4 border-[3px] border-current border-t-transparent text-white rounded-full' role='status' aria-label='loading'>
      <span class='sr-only'>Loading...</span>
      </span> Loading </button>
      </div>

Disabled

These tailwind disabled button are commonly used within form elements to disable the submit button until all form elements have been completed and validated.Button is disabled and cannot be clicked until certain conditions are met.

<div class='flex  gap-2 flex-wrap'>
      <button type='button' class='py-2.5 px-6 text-sm bg-indigo-200 text-white rounded-full font-semibold text-center shadow-xs transition-all duration-500 cursor-not-allowed'>Button</button>
      <button type='button' class='py-2.5 px-6 text-sm bg-indigo-200 text-white rounded-lg font-semibold text-center shadow-xs transition-all duration-500 cursor-not-allowed'>Button</button>
      </div>