Shadow Button

<button class="text-gray-900 py-2.5 p-12 text-lg rounded-lg bg-white cursor-pointer border border-gray-200 transition-all duration-300 shadow-[6px_6px_12px_#c5c5c5,-6px_-6px_12px_#ffffff] hover:shadow-[inset_4px_4px_12px_#c5c5c5,inset_-4px_-4px_12px_#ffffff] active:text-gray-600 active:shadow-[inset_4px_4px_12px_#c5c5c5,inset_-4px_-4px_12px_#ffffff]">Button</button>

Rotating Button

<button class="rounded-lg px-3.5 py-2 m-1 overflow-hidden relative group cursor-pointer border-2 font-medium border-indigo-600 "><span class="absolute w-64 h-0 transition-all duration-300 origin-center rotate-45 -translate-x-20 bg-indigo-600 top-1/2 group-hover:h-64 group-hover:-translate-y-32 ease"></span><span class="relative text-base font-semibold text-indigo-600 transition duration-300 group-hover:text-white ease">Button Text</span></button>

Background Color Change Button

<button class="group relative inline-block px-3.5 py-2 overflow-hidden font-medium text-indigo-600 border-2 border-indigo-600 rounded-lg focus:outline-none"><span class="absolute top-0 left-0 w-full h-full bg-indigo-600 transform scale-x-0 group-hover:scale-x-100 transition-all duration-300 ease"></span><span class="relative group-hover:text-white">Button Text</span></button>

Facebook Button

<button class="bg-white sticky duration-500 border-2 border-blue-600 fixed w-12 transform hover:-translate-y-3 h-12 text-2xl rounded-full hover:bg-blue-600 hover:text-white text-blue-600"> <i class="fab fa-facebook-f"></i></button>

Loading Button

<button type="button" class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none"> <span class="animate-spin inline-block size-4 border-[3px] border-current border-t-transparent text-white rounded-full" role="status" aria-label="loading"></span> Loading </button>

Folded Corner Button

Button Text

<a href="#_" class="relative inline-flex items-center justify-start px-6 py-3 overflow-hidden font-medium transition-all bg-red-500 rounded-xl group"> <span class="absolute top-0 right-0 inline-block w-4 h-4 transition-all duration-500 ease-in-out bg-red-700 rounded group-hover:-mr-4 group-hover:-mt-4"> <span class="absolute top-0 right-0 w-5 h-5 rotate-45 translate-x-1/2 -translate-y-1/2 bg-white"></span> </span> <span class="absolute bottom-0 left-0 w-full h-full transition-all duration-500 ease-in-out delay-200 -translate-x-full translate-y-full bg-red-600 rounded-2xl group-hover:mb-12 group-hover:translate-x-0"></span> <span class="relative w-full text-left text-white transition-colors duration-200 ease-in-out group-hover:text-white">Button Text</span> </a>

Dimensional Text Button

Button Text 1

<a href="#_" class="relative px-6 py-3 font-bold text-black group"> <span class="absolute inset-0 w-full h-full transition duration-300 ease-out transform -translate-x-2 -translate-y-2 bg-blue-300 group-hover:translate-x-0 group-hover:translate-y-0"></span> <span class="absolute inset-0 w-full h-full border-4 border-black"></span> <span class="relative">Button Text 1</span> </a>

Dimensional Text Button 3

Button Text 3

<a href="#_" class="relative px-6 py-3 font-bold text-black group"> <span class="absolute inset-0 w-full h-full transition duration-300 ease-out transform -translate-x-2 -translate-y-2 bg-yellow-300 group-hover:translate-x-0 group-hover:translate-y-0"></span> <span class="absolute inset-0 w-full h-full border-4 border-black"></span> <span class="relative">Button Text 3</span> </a>

Google

<button class="rounded-md flex items-center border border-slate-300 py-2 px-4 text-center text-sm transition-all shadow-sm hover:shadow-lg text-slate-600 hover:text-white hover:bg-slate-800 hover:border-slate-800 focus:text-white focus:bg-slate-800 focus:border-slate-800 active:border-slate-800 active:text-white active:bg-slate-800 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button"> <img src="https://docs.material-tailwind.com/icons/google.svg" alt="metamask" class="h-5 w-5 mr-2" /> Continue with Google </button>

Instagram Button

<button class="border-2 hover:border-0 border-pink-500 bg-gradient-to-b text-2xl hover:from-indigo-600 hover:via-pink-600 hover:to-yellow-500 min-w-wull hover:text-white bg-white text-pink-600 w-12 h-12 transform hover:-translate-y-3 rounded-full duration-500"><i class="fab fa-instagram"></i></button>

Figma

<button class="px-6 py-2 bg-black text-white rounded-lg font-bold transform hover:-translate-y-1 transition duration-400"> Figma </button>

Winter White

<button class="shadow-[0_4px_14px_0_rgb(0,0,0,10%)] hover:shadow-[0_6px_20px_rgba(93,93,93,23%)] px-8 py-2 bg-[#fff] text-[#696969] rounded-md font-light transition duration-200 ease-linear"> Next White </button>

Microsoft Button

<button class="flex items-center bg-white text-black font-bold py-3  px-20 rounded border-2 border-black  transition duration-300 ease-in-out"> <img class="mx-auto" src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Microsoft_logo_%281987%29.svg" alt="FIFA World Cup" width="70" height="20"/> </button>

Notion Project Button

notion button

<div class="flex flex-wrap justify-center gap-6"><a class="relative" href="#"><span class="absolute top-0 left-0 mt-1 ml-1 h-full w-full rounded bg-black"></span><span class="fold-bold relative inline-block h-full w-full rounded border-2 border-black bg-white px-3 py-1 text-base font-bold text-black transition duration-100 hover:bg-yellow-400 hover:text-gray-900">notion button</span></a></div>

Force Button

<button class="flex items-center bg-black text-black font-bold px-12 transition duration-300 ease-in-out">
    <img class="mx-auto" src="https://upload.wikimedia.org/wikipedia/commons/6/6c/Star_Wars_Logo.svg" alt="FIFA World Cup" width="70" height="20"/>
</button>

WhatsApp Button

<button class="bg-white duration-500 w-12 h-12 border-2 rounded-full border-green-600 transform hover:-translate-y-3 text-2xl text-green-500 hover:bg-green-600 hover:text-white"><i class="fab fa-whatsapp"></i></button>

Group Button

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> 
<div class="inline-flex bg-gradient-to-r from-blue-500 to-blue-300 bg-opacity-30 backdrop-blur-lg rounded-lg shadow-2xl p-2">
  <button class="bg-transparent text-white text-md font-semibold py-2 px-4 border border-blue-500 hover:bg-blue-600 hover:text-white rounded-l-md transition duration-300 shadow-md">
     Option 1
  </button>
  <div class="border-l border-blue-500"></div>
  <button class="bg-transparent text-white text-md font-semibold py-2 px-4 border border-blue-500 hover:bg-blue-600 hover:text-white transition duration-300 shadow-md">
     Option 2
  </button>
  <div class="border-l border-blue-500"></div>
  <button class="bg-transparent text-white text-md font-semibold py-2 px-4 border border-blue-500 hover:bg-blue-600 hover:text-white rounded-r-md transition duration-300 shadow-md">
    Option 3
  </button>
</div>

Group Button

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> 
<div class="inline-flex bg-gradient-to-br from-green-400 to-blue-500 bg-opacity-25 backdrop-blur-lg rounded-lg shadow-xl p-2">
  <button class="bg-transparent text-gray-900 text-md font-semibold py-2 px-4 border border-gray-900 hover:bg-gray-900 hover:text-white rounded-l-md transition duration-300 shadow-lg">
     Option 1
  </button>
  <div class="border-l border-gray-900"></div>
  <button class="bg-transparent text-gray-900 text-md font-semibold py-2 px-4 border border-gray-900 hover:bg-gray-900 hover:text-white transition duration-300 shadow-lg">
     Option 2
  </button>
  <div class="border-l border-gray-900"></div>
  <button class="bg-transparent text-gray-900 text-md font-semibold py-2 px-4 border border-gray-900 hover:bg-gray-900 hover:text-white rounded-r-md transition duration-300 shadow-lg">
    Option 3
  </button>
</div>

Group Button

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<div class="inline-flex bg-white bg-opacity-30 backdrop-blur-lg rounded-lg shadow-lg p-2">
  <button class="bg-blue-500 text-white text-md font-semibold py-2 px-4 border border-blue-500 hover:bg-blue-600 rounded-l-md transition duration-300">
     Option 1
  </button>
  <div class="h-6 border-l border-blue-500"></div>
  <button class="bg-blue-500 text-white text-md font-semibold py-2 px-4 border border-blue-500 hover:bg-blue-600 transition duration-300">
     Option 2
  </button>
  <div class="h-6 border-l border-blue-500"></div>
  <button class="bg-blue-500 text-white text-md font-semibold py-2 px-4 border border-blue-500 hover:bg-blue-600 rounded-r-md transition duration-300">
    Option 3
  </button>
</div>

Group Button

<div class="inline-flex bg-white bg-opacity-30 backdrop-blur-lg rounded-lg shadow-lg p-2">
  <button class="bg-transparent text-blue-500 text-md font-semibold py-2 px-4 border border-blue-500 hover:bg-blue-500 hover:text-white rounded-l-md transition duration-300">
     Option 1
  </button>
  <div class=" border-l border-blue-500"></div>
  <button class="bg-transparent text-blue-500 text-md font-semibold py-2 px-4 border border-blue-500 hover:bg-blue-500 hover:text-white transition duration-300">
     Option 2
  </button>
  <div class="border-l border-blue-500"></div>
  <button class="bg-transparent text-blue-500 text-md font-semibold py-2 px-4 border border-blue-500 hover:bg-blue-500 hover:text-white rounded-r-md transition duration-300">
    Option 3
  </button>
</div>

Spark Button

<button class="flex items-center bg-white text-black font-bold   px-11 rounded border-2 border-orange-500 hover:border-red-400 transition duration-300 ease-in-out">
    <img class="mx-auto" src="https://cdn.neowin.com/news/images/uploaded/2019/05/1557639159_tinderlogo-2017.jpg" alt="FIFA World Cup" width="70" height="20"/>
</button>

FIFA Button

<button class="flex items-center bg-white text-black font-bold py-2 pl-5 pr-3 rounded border-2 border-blue-300 hover:border-blue-400 transition duration-300 ease-in-out">
    <img class="mr-2 " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsmWldT7_OE2kDhbehYcuTNHzItGFbeH5igw&s" alt="FIFA World Cup" width="70" height="20"/>
</button>

Twitter Button

<button class="bg-white transform hover:-translate-y-3 border-2 w-12 h-12 rounded-full duration-500 text-blue-400 border-blue-400 hover:bg-blue-400 hover:text-white text-2xl"><i class="fab fa-twitter"></i></button>

Upload Button

<button type="button" class="max-w-[140px] py-2 px-4 flex justify-center items-center  bg-red-600 hover:bg-red-700 focus:ring-red-500 focus:ring-offset-red-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2  rounded-lg ">
    <svg width="20" height="20" fill="currentColor" class="mr-2" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
        <path d="M1344 1472q0-26-19-45t-45-19-45 19-19 45 19 45 45 19 45-19 19-45zm256 0q0-26-19-45t-45-19-45 19-19 45 19 45 45 19 45-19 19-45zm128-224v320q0 40-28 68t-68 28h-1472q-40 0-68-28t-28-68v-320q0-40 28-68t68-28h427q21 56 70.5 92t110.5 36h256q61 0 110.5-36t70.5-92h427q40 0 68 28t28 68zm-325-648q-17 40-59 40h-256v448q0 26-19 45t-45 19h-256q-26 0-45-19t-19-45v-448h-256q-42 0-59-40-17-39 14-69l448-448q18-19 45-19t45 19l448 448q31 30 14 69z">
        </path>
    </svg>
    Upload
</button>

Apocalypse Button

<button class="flex items-center px-20 py-1 bg-black  border text-black font-bold rounded-2xl"><img  src="https://assetsio.gnwcdn.com/umbrella_corp_1.png?width=1200&height=1200&fit=crop&quality=100&format=png&enable=upscale&auto=webp" alt="Button Icon" width="40" height="20"/></button>

Disney Button


    <button class="flex items-center bg-white  border text-black font-bold py-2 pr-5 rounded">
    <img  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSyIS_GMENyqoWukYofDbpdwLZQoI5s0DmQiw&s" alt="Button Icon" width="50" height="20"/>
    Open AI
  </button>

Count Indicator Button


   <!-- component -->
<div class="flex items-center justify-center">
    
<button type="button" class="relative inline-flex items-center px-5 py-2.5 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
<svg class="w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 16">
<path d="m10.036 8.278 9.258-7.79A1.979 1.979 0 0 0 18 0H2A1.987 1.987 0 0 0 .641.541l9.395 7.737Z"/>
<path d="M11.241 9.817c-.36.275-.801.425-1.255.427-.428 0-.845-.138-1.187-.395L0 2.6V14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.5l-8.759 7.317Z"/>
</svg>
<span class="sr-only">Notifications</span>
Messages
  <div class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 -end-2 dark:border-gray-900">8</div>
</button>

  </div>

Indigo Circle Button


    <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>

Blue Circle 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>

Green Circle 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>

Pink Circle 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>

Orange Circle 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>

Yellow Circle 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>

Gray Circle 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>

Indigo Rounded Button


    <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>

Blue Rounded 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>

Amazing Hover Button

Hover Me


 <a href="https://websitecost.today/" target="_blank"
	class="group relative overflow-hidden bg-blue-600 focus:ring-4 focus:ring-blue-300 inline-flex items-center px-7 py-2.5 rounded-lg text-white justify-center">
	<span class="z-40">Hover Me</span>
	<svg class="z-40 ml-2 -mr-1 w-3 h-3 transition-all duration-300 group-hover:translate-x-1" fill="currentColor"
		viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
		<path fill-rule="evenodd"
			d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
			clip-rule="evenodd"></path>
	</svg>
	<div
		class="absolute inset-0 h-[200%] w-[200%] rotate-45 translate-x-[-70%] transition-all group-hover:scale-100 bg-white/30 group-hover:translate-x-[50%] z-20 duration-1000">
	</div>
</a>

Green Rounded 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>

Pink Rounded 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>

Side Hover Button


 <button class="before:ease relative h-12 w-40 overflow-hidden border border-black shadow-2xl before:absolute before:left-0 before:-ml-2 before:h-48 before:w-48 before:origin-top-right before:-translate-x-full before:translate-y-12 before:-rotate-90 before:bg-gray-900 before:transition-all before:duration-300 hover:text-white hover:shadow-black hover:before:-rotate-180">
      <span class="relative z-10">Slide hover</span>
    </button>

Orange Rounded 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>

Yellow Rounded 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>

Gray Rounded 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>

Netflix

 <button class="py-2 px-4 bg-red-600 text-white font-semibold rounded-lg transition-transform duration-200 hover:scale-105">Start Watching Now</button>

Processing Button


      <div class="flex  items-center justify-center">
        <button type="button" class="flex items-center rounded-lg bg-green-700 px-4 py-2 text-white" disabled>
          <svg class="mr-3 h-5 w-5 animate-spin text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
          </svg>
          <span class="font-medium"> Processing... </span>
        </button>
      </div>

Curtain Hover Effect

 <button class="before:ease relative h-12 w-40 overflow-hidden border border-blue-500 text-blue-500 shadow-2xl transition-all before:absolute before:top-1/2 before:h-0 before:w-64 before:origin-center before:-translate-x-20 before:rotate-45 before:bg-blue-500 before:duration-300 hover:text-white hover:shadow-blue-500 hover:before:h-64 hover:before:-translate-y-32">
      <span class="relative z-10">Skew curtain</span>
    </button>

Disney Button


         <button class="bg-white border border-black  px-8 w-38 rounded flex items-center">
        <div class="flex justify-center items-center w-full">
            <img class="mr-2 w-12 h-10" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSSEpAAy4WojeOlFUjE84IxCMIl3_sK8OiOeg&s" alt="Disney Logo" />
        </div>
    </button>

Sketch Button

<button class='px-4 py-2 rounded-md border border-black bg-white text-black text-sm hover:shadow-[4px_4px_0px_0px_rgba(0,0,0)] transition duration-200'>Sketch</button>

Simple Button

<button class='px-4 py-2 rounded-md border border-neutral-300 bg-neutral-100 text-neutral-500 text-sm hover:-translate-y-1 transform transition duration-200 hover:shadow-md'>Simple</button>

Invert Button

<button class='px-8 py-2 rounded-md bg-teal-500 text-white font-bold transition duration-200 hover:bg-white hover:text-black border-2 border-transparent hover:border-teal-500'>Invert it</button>

Tailwindcss Connect Button

<button class='bg-slate-800 no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-full p-px text-xs font-semibold leading-6 text-white inline-block'><span class='absolute inset-0 overflow-hidden rounded-full'><span class='absolute inset-0 rounded-full bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100'></span></span><div class='relative flex space-x-2 items-center z-10 rounded-full bg-zinc-950 py-0.5 px-4 ring-1 ring-white/10 '><span>Tailwind Connect</span><svg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path stroke='currentColor' strokeLinecap='round' strokeLinejoin='round' strokeWidth='1.5' d='M10.75 8.75L14.25 12L10.75 15.25'></path></svg></div><span class='absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover:opacity-40'></span></button>

Brutal Button

<button class='px-8 py-0.5  border-2 border-black dark:border-white uppercase bg-white text-black transition duration-200 text-sm shadow-[1px_1px_rgba(0,0,0),2px_2px_rgba(0,0,0),3px_3px_rgba(0,0,0),4px_4px_rgba(0,0,0),5px_5px_0px_0px_rgba(0,0,0)] dark:shadow-[1px_1px_rgba(255,255,255),2px_2px_rgba(255,255,255),3px_3px_rgba(255,255,255),4px_4px_rgba(255,255,255),5px_5px_0px_0px_rgba(255,255,255)] '>Brutal</button>

Favourite Button

<button class='px-8 py-2  bg-black text-white text-sm rounded-md font-semibold hover:bg-black/[0.8] hover:shadow-lg'>Favourite</button>

Outline Button

<button class='px-4 py-2 rounded-xl border border-neutral-600 text-black bg-white hover:bg-gray-100 transition duration-200'>Outline</button>

Shimmer Button

<button class='inline-flex h-12 animate-shimmer items-center justify-center rounded-md border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%] px-6 font-medium text-slate-400 transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50'>Shimmer</button>

Next.js Blue Button

<button class='shadow-[0_4px_14px_0_rgb(0,118,255,39%)] hover:shadow-[0_6px_20px_rgba(0,118,255,23%)] hover:bg-[rgba(0,118,255,0.9)] px-8 py-2 bg-[#0070f3] rounded-md text-white font-light transition duration-200 ease-linear'>Next.js Blue</button>

Next.js White Button

<button class='shadow-[0_4px_14px_0_rgb(0,0,0,10%)] hover:shadow-[0_6px_20px_rgba(93,93,93,23%)] px-8 py-2 bg-[#fff] text-[#696969] rounded-md font-light transition duration-200 ease-linear'>Next White</button>

Spotify Button

<button class='px-12 py-4 rounded-full bg-[#1ED760] font-bold text-white tracking-widest uppercase transform hover:scale-105 hover:bg-[#21e065] transition-colors duration-200'>Spotify</button>

Backdrop Blur Button

<button class='px-4 py-2 text-black backdrop-blur-sm border border-black rounded-md hover:shadow-[0px_0px_4px_4px_rgba(0,0,0,0.1)] bg-white/[0.2] text-sm transition duration-200'>Backdrop blur</button>

Playlist Button

<button class='shadow-[inset_0_0_0_2px_#616467] text-black px-12 py-4 rounded-full tracking-widest uppercase font-bold bg-transparent hover:bg-[#616467] hover:text-white dark:text-neutral-200 transition duration-200'>Playlist</button>

Figma Button

<button class='px-6 py-2 bg-black text-white rounded-lg font-bold transform hover:-translate-y-1 transition duration-400'>Figma</button>

Figma Outline Button

<button class='shadow-[0_0_0_3px_#000000_inset] px-6 py-2 bg-transparent border border-black dark:border-white dark:text-white text-black rounded-lg font-bold transform hover:-translate-y-1 transition duration-400'>Figma Outline</button>

Mario Vaiation


      <a href="#" class="bg-green-500 rounded-lg p-2 flex items-center justify-center hover:bg-blue-600 transition duration-300 ease-in-out">
    <img src="https://49iw5aq3b5e3nyxk.public.blob.vercel-storage.com/MushroomMarioKart8-ckIgqDXpzJuUv8e5WPXEkFt9gYgNIy.webp" alt="Mushroom" class="px-20 mr-2 h-9" />
  </a>

Made with love button


     <!-- component -->
<div class="flex">
  <button
    class="middle none center mr-4 flex items-center justify-center rounded-lg bg-pink-500 p-3 font-sans text-xs font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
    data-ripple-light="true"
  >
    <i class="fas fa-heart text-lg leading-none"></i>
  </button>
  <button
    class="middle none center mr-4 flex items-center justify-center rounded-lg bg-gradient-to-tr from-pink-600 to-pink-400 p-3 font-sans text-xs font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
    data-ripple-light="true"
  >
    <i class="fas fa-heart text-lg leading-none"></i>
  </button>
  <button
    class="middle none center mr-3 flex items-center justify-center rounded-lg border border-pink-500 p-3 font-sans text-xs font-bold uppercase text-pink-500 transition-all hover:opacity-75 focus:ring focus:ring-pink-200 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
    data-ripple-dark="true"
  >
    <i class="fas fa-heart text-lg leading-none"></i>
  </button>
  <button
    class="middle none center flex items-center justify-center rounded-lg p-3 font-sans text-xs font-bold uppercase text-pink-500 transition-all hover:bg-pink-500/10 active:bg-pink-500/30 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
    data-ripple-dark="true"
  >
    <i class="fas fa-heart text-lg leading-none"></i>
  </button>
</div>


<!-- stylesheet -->
<link
  rel="stylesheet"
  href="https://unpkg.com/@material-tailwind/html@latest/styles/material-tailwind.css"
/>

<!-- Font Awesome Link -->
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
  integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
  crossorigin="anonymous"
/>

<script src="https://unpkg.com/@material-tailwind/html@latest/scripts/ripple.js"></script>

Subscribe Now

Join Now


          <a href="#" class="flex items-center justify-center w-48 px-6 py-3 bg-blue-600 text-white font-bold rounded-lg hover:bg-blue-700 transition duration-300 ease-in-out">
            Join
            <span class="ml-2 bg-yellow-400 px-3 py-1 rounded text-black">
              Now
            </span>
          </a>

Contact Support

Help Desk


          <a href="#" class="flex items-center justify-center w-48 px-6 py-3 bg-gray-800 text-white font-bold rounded-lg hover:bg-gray-900 transition duration-300 ease-in-out">
            Help
            <span class="ml-2 bg-red-500 px-3 py-1 rounded text-white">
              Desk
            </span>
          </a>

Chatbot Button


          <div class="flex flex-col items-center gap-4 mb-6">
            <button class="mt-4 px-4 py-2 border border-gray-400 rounded-lg hover:bg-blue-500 hover:text-white transition duration-200 ease-in-out focus:outline-none">
              View Chatbot
            </button>
          </div>

Heart Button


          <button class="text-pink-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
            <i class="fas fa-heart"></i>
          </button>

Erotic Button

Porn hub

<a href="#" class="flex items-center justify-center w-48 px-11 py-3 bg-black text-white font-bold rounded-lg hover:bg-gray-900 transition duration-300 ease-in-out">
            Porn
            <span class="ml-2 bg-orange-500 px-3 py-1 rounded text-black">
              hub
            </span>
          </a>

Popover Button


<button
  data-ripple-light="true"
  data-popover-target="popover"
  class="middle none center rounded-lg bg-gradient-to-tr from-pink-600 to-pink-400 py-3 px-6 font-sans text-xs font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
>
  Show Popover
</button>


<script
  type="module"
  src="https://unpkg.com/@material-tailwind/html@latest/scripts/popover.js"
></script>

Mario Button


          <a href="#" class="bg-yellow-500 rounded-lg p-2 flex items-center justify-center hover:bg-red-600 transition duration-300 ease-in-out">
            <img src="https://49iw5aq3b5e3nyxk.public.blob.vercel-storage.com/MushroomMarioKart8-ckIgqDXpzJuUv8e5WPXEkFt9gYgNIy.webp" alt="Mushroom" class="px-20 mr-2 h-9  " />
          </a>

Create My Account

<button class="flex items-center justify-center w-full px-4 py-4 text-sm font-bold leading-6 capitalize duration-100 transform border-2 rounded-sm cursor-pointer border-green-300 focus:ring-4 focus:ring-green-500 focus:ring-opacity-50 focus:outline-none sm:w-auto sm:px-6 border-text hover:shadow-lg hover:-translate-y-1">Create My Account</button>

Instagram Button

<button class="flex items-center justify-center px-4 py-2 bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold rounded-full">Instagram Button</button>

Hover Center Effect


         <button class="relative h-12 w-40 overflow-hidden border border-indigo-600 text-indigo-600 shadow-2xl transition-all duration-200 before:absolute before:bottom-0 before:left-0 before:right-0 before:top-0 before:m-auto before:h-0 before:w-0 before:rounded-sm before:bg-indigo-600 before:duration-300 before:ease-out hover:text-white hover:shadow-indigo-600 hover:before:h-40 hover:before:w-40 hover:before:opacity-80">
      <span class="relative z-10">Center Hover</span>
    </button>

Fancy Button


         
            <button class="bg-gradient-to-b w-max mx-auto text-blue-500 font-semibold from-slate-50 to-blue-100 px-10 py-3 rounded-2xl shadow-blue-400 shadow-md border-b-4 hover:border-b hover:shadow-sm transition-all duration-500">
              Fancy button
            </button>

AI Animated Button

<button class="flex items-center justify-center px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-bold rounded-full transition duration-300 ease-in-out transform hover:scale-105 animate-pulse">AI Animated Button</button>

Primary Action

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Primary Action</button>

Blue Button


          <button class="rounded-full bg-blue-500 px-12 py-3 text-base mb-3 font-medium text-white transition duration-200 hover:bg-blue-600 active:bg-blue-700">
            Blue
          </button>

Outlined Red Button


          <button class="rounded-xl border-2 border-red-500 px-12 py-3 text-base mb-3 font-medium text-red-500 transition duration-200 hover:bg-red-600/5 active:bg-red-700/5">
            Red
          </button>

Gradient Button


          <button class="rounded-xl bg-gradient-to-br from-[#6025F5] to-[#FF5555] px-12 py-3 text-base font-medium text-white transition duration-200 hover:shadow-lg hover:shadow-[#6025F5]/50">
            Gradient
          </button>

Secondary Action

<button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded-full">Secondary Action</button>

Success

<button class="bg-green-500 hover:bg-green-700 text-white font-semibold py-2 px-4 border border-green-500 rounded">Success</button>

Danger

<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded inline-flex items-center">Danger</button>

Warning

<button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded-lg">Warning</button>

Rainbow Glow

<button class="relative inline-flex items-center justify-center px-8 py-4 text-lg font-bold text-white bg-gradient-to-r from-[#44BCFF] via-[#FF44EC] to-[#FF675E] rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900">Rainbow Glow</button>

Info

<button class="bg-cyan-500 hover:bg-cyan-700 text-white font-bold py-2 px-4 rounded-xl">Info</button>

Outline

<button class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded">Outline</button>

Disabled

<button class="bg-gray-300 text-gray-500 font-bold py-2 px-4 rounded opacity-50 cursor-not-allowed" disabled>Disabled</button>

Link

<button class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4">Link</button>

Small

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded text-xs">Small</button>

Large

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded text-lg">Large</button>

Shine Hover Effect Button

<button class="before:ease relative h-12 w-40 overflow-hidden border border-green-500 bg-green-500 text-white shadow-2xl transition-all before:absolute before:right-0 before:top-0 before:h-12 before:w-6 before:translate-x-12 before:rotate-6 before:bg-white before:opacity-10 before:duration-700 hover:shadow-green-500 hover:before:-translate-x-40">Shine</button>

Full Width

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full">Full Width</button>

Submit Proposal

<button class="bg-gradient-to-r from-green-400 to-blue-500 hover:from-blue-500 hover:to-green-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transform hover:scale-105 transition duration-300 ease-in-out">Submit Proposal</button>

Approve Request

<button class="bg-green-600 hover:bg-green-800 text-white font-semibold py-2 px-6 rounded-lg inline-flex items-center">Approve Request</button>

Launch Campaign

<button class="bg-purple-600 hover:bg-purple-800 text-white font-bold py-3 px-6 rounded-full shadow-md hover:shadow-xl transition-shadow duration-300">Launch Campaign</button>

Sign Contract

<button class="bg-gray-800 hover:bg-gray-900 text-white font-medium py-2 px-5 rounded-md border border-gray-700">Sign Contract</button>

Curtain Hover Button


            <button class="relative h-[50px] w-40 overflow-hidden border border-pink-400 bg-white text-pink-400 shadow-2xl transition-all before:absolute before:left-0 before:top-0 before:h-full before:w-0 before:duration-500 after:absolute after:right-0 after:top-0 after:h-full after:w-0 after:duration-500 hover:text-white hover:shadow-pink-400 hover:before:w-2/4 hover:before:bg-pink-400 hover:after:w-2/4 hover:after:bg-pink-400">
              <span class="relative z-10">Curtain</span>
            </button>

Smoosh Hover Button


            <button class="relative h-[50px] w-40 overflow-hidden border border-green-900 bg-white text-green-900 shadow-2xl transition-all before:absolute before:left-0 before:right-0 before:top-0 before:h-0 before:w-full before:bg-green-900 before:duration-500 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0 after:w-full after:bg-green-900 after:duration-500 hover:text-white hover:shadow-green-900 hover:before:h-2/4 hover:after:h-2/4">
              <span class="relative z-10">Smoosh</span>
            </button>

Alternate Hover Button


            <button class="group relative min-h-[50px] w-40 overflow-hidden border border-purple-500 bg-white text-purple-500 shadow-2xl transition-all before:absolute before:left-0 before:top-0 before:h-0 before:w-1/4 before:bg-purple-500 before:duration-500 after:absolute after:bottom-0 after:right-0 after:h-0 after:w-1/4 after:bg-purple-500 after:duration-500 hover:text-white hover:before:h-full hover:after:h-full">
              <span class="top-0 flex h-full w-full items-center justify-center before:absolute before:bottom-0 before:left-1/4 before:z-0 before:h-0 before:w-1/4 before:bg-purple-500 before:duration-500 after:absolute after:right-1/4 after:top-0 after:z-0 after:h-0 after:w-1/4 after:bg-purple-500 after:duration-500 hover:text-white group-hover:before:h-full group-hover:after:h-full"></span>
              <span class="absolute bottom-0 left-0 right-0 top-0 z-10 flex h-full w-full items-center justify-center group-hover:text-white">Alternate</span>
            </button>

Investor Relations

<button class="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded shadow-inner">Investor Relations</button>

Business Intelligence

<button class="bg-blue-700 hover:bg-blue-900 text-white font-semibold py-2 px-6 rounded-xl tracking-wide">Business Intelligence</button>

Data Analytics

<button class="bg-blue-600 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded-md border-b-4 border-blue-800">Data Analytics</button>

Project Management

<button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded shadow-lg transform hover:-translate-y-1 hover:scale-110 transition duration-300">Project Management</button>

Red Rounded Button


        <button class='relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm text-red-600 font-semibold rounded-lg group bg-gradient-to-br from-red-500 to-red-400 group-hover:from-red-500 group-hover:to-red-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>

Green Rounded 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-400 group-hover:from-green-500 group-hover:to-green-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>

Blue Rounded 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-400 group-hover:from-blue-500 group-hover:to-blue-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>

Swipe Effect Button


     <button class="text-red hover:before:bg-redborder-red-500 relative h-[50px] w-40 overflow-hidden border border-red-500 bg-white px-3 text-red-500 shadow-2xl transition-all before:absolute before:bottom-0 before:left-0 before:top-0 before:z-0 before:h-full before:w-0 before:bg-red-500 before:transition-all before:duration-500 hover:text-white hover:shadow-red-500 hover:before:left-0 hover:before:w-full"><span class="relative z-10">Swipe</span></button>

Purple Rounded Button


        <button class='relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm text-purple-600 font-semibold rounded-lg group bg-gradient-to-br from-purple-500 to-purple-400 group-hover:from-purple-500 group-hover:to-purple-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>

Orange Rounded 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-400 group-hover:from-orange-500 group-hover:to-orange-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>

Financial Report

<button class="bg-gray-600 hover:bg-gray-800 text-white font-medium py-2 px-5 rounded-md border-t-4 border-b-4 border-gray-900">Financial Report</button>

Sales Dashboard

<button class="bg-pink-500 hover:bg-pink-700 text-white font-semibold py-2 px-6 rounded-full shadow-md">Sales Dashboard</button>

Elevated Launch

<button class="relative inline-block h-full w-full rounded border-2 border-purple-500 bg-white px-3 py-1 text-base font-bold text-purple-500 transition duration-100 hover:bg-purple-500 hover:text-white">Elevated Launch</button>

Elevated Sign In

<button class="relative inline-block h-full w-full rounded border-2 border-indigo-500 bg-white px-3 py-1 text-base font-bold text-indigo-500 transition duration-100 hover:bg-indigo-500 hover:text-white">Elevated Sign In</button>

Elevated Download

<button class="relative inline-block h-full w-full rounded border-2 border-gray-600 bg-white px-3 py-1 text-base font-bold text-gray-600 transition duration-100 hover:bg-gray-600 hover:text-white">Elevated Download</button>

Elevated Subscribe

<button class="relative inline-block h-full w-full rounded border-2 border-pink-500 bg-white px-3 py-1 text-base font-bold text-pink-500 transition duration-100 hover:bg-pink-500 hover:text-white">Elevated Subscribe</button>

Elevated Contact Us

<button class="relative inline-block h-full w-full rounded border-2 border-teal-500 bg-white px-3 py-1 text-base font-bold text-teal-500 transition duration-100 hover:bg-teal-500 hover:text-white">Elevated Contact Us</button>

Customer Insights

<button class="bg-green-700 hover:bg-green-700 text-white font-thin py-2 px-4 rounded-full uppercase tracking-wide">Customer Insights</button>

Partner Portal

<button class="bg-purple-500 hover:bg-purple-700 text-white font-semibold py-2 px-5 rounded-lg border-l-4 border-purple-800">Partner Portal</button>

Login-Register Button


          <div class="flex items-center justify-center">
            <div class="border w-fit rounded-xl m-5 shadow-sm">
              <button class="px-4 py-2 rounded-l-xl text-white m-0 bg-red-500 hover:bg-red-600 transition">
                Login
              </button>
              <button class="px-4 py-2 rounded-r-xl bg-neutral-50 hover:bg-neutral-100 transition">
                Register
              </button>
            </div>
          </div>

Supply Chain

<button class="bg-blue-400 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-full inline-flex items-center animate-pulse">Supply Chain</button>

Resource Allocation

<button class="bg-indigo-600 hover:bg-indigo-800 text-white font-bold py-2 px-6 rounded-xl shadow-inner">Resource Allocation</button>

Risk Assessment

<button class="bg-red-600 hover:bg-red-800 text-white font-bold py-2 px-4 rounded-md border-dashed border-2 border-white">Risk Assessment</button>

Minecraft Play Now

<button class="bg-green-600 hover:bg-green-800 text-white font-bold py-2 px-4 rounded">Minecraft Play Now</button>

Tetris Start Game

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Tetris Start Game</button>

Super Mario Jump In

<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Super Mario Jump In</button>

The Legend of Zelda Begin Quest

<button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded">The Legend of Zelda Begin Quest</button>

Pac-Man Play Now

<button class="bg-yellow-400 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded">Pac-Man Play Now</button>

Quality Assurance

<button class="bg-green-400 hover:bg-green-600 text-white font-semibold py-2 px-5 rounded-lg shadow-sm hover:shadow-lg transition-shadow duration-200">Quality Assurance</button>

Compliance Check

<button class="bg-yellow-600 hover:bg-yellow-800 text-white font-medium py-2 px-4 rounded-md border-b-4 border-yellow-800">Compliance Check</button>

Executive Summary

<button class="bg-gray-700 hover:bg-gray-900 text-white font-bold py-3 px-7 rounded-full uppercase tracking-widest">Executive Summary</button>

Product Roadmap

<button class="bg-teal-600 hover:bg-teal-800 text-white font-semibold py-2 px-5 rounded-md shadow-lg hover:shadow-xl transition-shadow duration-300">Product Roadmap</button>

Team Collaboration

<button class="bg-orange-500 hover:bg-orange-700 text-white font-bold py-2 px-6 rounded-lg animate-bounce">Team Collaboration</button>

Innovation Lab

<button class="bg-purple-600 hover:bg-purple-800 text-white font-medium py-2 px-4 rounded-full transform hover:rotate-3 hover:scale-105 transition duration-300">Innovation Lab</button>

Rounded Primary Button

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Rounded Primary Button</button>

Rounded Danger Button

<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Rounded Danger Button</button>

Rounded Success Button

<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Rounded Success Button</button>

Outline Primary Button

<button class="border border-blue-500 text-blue-500 font-bold py-2 px-4 rounded">Outline Primary Button</button>

Outline Danger Button

<button class="border border-red-500 text-red-500 font-bold py-2 px-4 rounded">Outline Danger Button</button>

Outline Success Button

<button class="border border-green-500 text-green-500 font-bold py-2 px-4 rounded">Outline Success Button</button>

Gradient Warm Sunset

<button class="bg-gradient-to-r from-red-400 to-yellow-500 text-white font-bold py-2 px-4 rounded">Gradient Warm Sunset</button>

Gradient Cool Breeze

<button class="bg-gradient-to-r from-blue-400 to-indigo-500 text-white font-bold py-2 px-4 rounded">Gradient Cool Breeze</button>

Gradient Nature Blend

<button class="bg-gradient-to-r from-green-400 to-blue-500 text-white font-bold py-2 px-4 rounded">Gradient Nature Blend</button>

Growth Strategy

<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg border-l-4 border-green-800">Growth Strategy</button>

Performance Metrics

<button class="bg-blue-500 hover:bg-blue-700 text-white font-semibold py-2 px-6 rounded-md shadow-md hover:shadow-lg transition-shadow duration-200">Performance Metrics</button>

Revenue Forecast

<button class="bg-gray-600 hover:bg-gray-800 text-white font-bold py-2 px-5 rounded-full uppercase tracking-wide">Revenue Forecast</button>

Budget Planning

<button class="bg-yellow-500 hover:bg-yellow-700 text-white font-medium py-2 px-4 rounded-md border-dotted border-2 border-yellow-800">Budget Planning</button>

Human Resources

<button class="bg-pink-600 hover:bg-pink-800 text-white font-bold py-2 px-6 rounded-lg inline-flex items-center">Human Resources</button>

Talent Acquisition

<button class="bg-indigo-500 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-full animate-pulse">Talent Acquisition</button>

Brand Management

<button class="bg-red-500 hover:bg-red-700 text-white font-semibold py-2 px-5 rounded-md shadow-inner">Brand Management</button>

Google Search Button

<button class="bg-gradient-to-r from-blue-500 via-red-500 to-yellow-500 text-white font-bold py-2 px-4 rounded">Google Search Button</button>

Facebook Connect Button

<button class="bg-blue-600 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded">Facebook Connect Button</button>

Amazon Buy Now Button

<button class="bg-orange-500 hover:bg-orange-700 text-white font-bold py-2 px-4 rounded">Amazon Buy Now Button</button>

Apple Learn More Button

<button class="bg-gray-800 hover:bg-gray-900 text-white font-bold py-2 px-4 rounded">Apple Learn More Button</button>

Microsoft Start Button

<button class="bg-gradient-to-r from-red-500 via-green-500 to-blue-500 text-white font-bold py-2 px-4 rounded">Microsoft Start Button</button>

Netflix Watch Now Button

<button class="bg-red-700 hover:bg-red-800 text-white font-bold py-2 px-4 rounded">Netflix Watch Now Button</button>

Twitter Tweet Button

<button class="bg-blue-400 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Twitter Tweet Button</button>

Uber Ride Now Button

<button class="bg-black hover:bg-gray-800 text-white font-bold py-2 px-4 rounded">Uber Ride Now Button</button>

Airbnb Book Now Button

<button class="bg-pink-500 hover:bg-pink-700 text-white font-bold py-2 px-4 rounded">Airbnb Book Now Button</button>

Spotify Play Button

<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Spotify Play Button</button>

Global Operations

<button class="bg-blue-700 hover:bg-blue-900 text-white font-bold py-3 px-7 rounded-full uppercase">Global Operations</button>

Client Onboarding

<button class="bg-green-600 hover:bg-green-800 text-white font-medium py-2 px-5 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">Client Onboarding</button>

Support Ticket

<button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded-md border-t-4 border-gray-800">Support Ticket</button>

Schedule Meeting

<button class="bg-purple-500 hover:bg-purple-700 text-white font-semibold py-2 px-6 rounded-full transform hover:scale-110 transition duration-300">Schedule Meeting</button>

Feedback Form

<button class="bg-teal-500 hover:bg-teal-700 text-white font-medium py-2 px-4 rounded-lg shadow-sm">Feedback Form</button>

Policy Update

<button class="bg-yellow-600 hover:bg-yellow-800 text-white font-bold py-2 px-5 rounded-md border-b-4 border-yellow-800">Policy Update</button>

Order Now

<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-full shadow-lg animate-bounce">Order Now</button>

Join Webinar

<button class="bg-blue-600 hover:bg-blue-800 text-white font-semibold py-2 px-4 rounded-lg animate-pulse">Join Webinar</button>

Download Report

<button class="bg-green-500 hover:bg-green-700 text-white font-medium py-2 px-6 rounded-md shadow-md">Download Report</button>

Shop Now Button


        <button class="flex items-center justify-center px-6 py-3 bg-green-600 text-white font-bold rounded-lg hover:bg-green-700 transition duration-300 ease-in-out">
            Shop Now
            <svg xmlns="http://www.w3.org/2000/svg" class="ml-2 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12h-6m6 0l-3-3m3 3l-3 3"/>
            </svg>
        </button>

Learn More Button

Learn More →


        <a href="#" class="flex items-center justify-center w-full px-4 py-3 bg-blue-800 text-white font-semibold rounded-lg hover:bg-blue-700 transition duration-300 ease-in-out">
            Learn More
            <span class="ml-2 text-blue-300">→</span>
        </a>

Get Started Button


        <button class="flex items-center justify-center w-48 px-4 py-2 bg-orange-500 text-white font-bold rounded-full hover:bg-orange-600 transition duration-300 ease-in-out">
            Get Started
        </button>

Logout Button


        <button class="flex items-center justify-center w-40 px-4 py-2 bg-red-500 text-white font-semibold rounded-lg hover:bg-red-600 transition duration-300 ease-in-out">
            Logout
            <svg xmlns="http://www.w3.org/2000/svg" class="ml-2 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12h-6m6 0l-3-3m3 3l-3 3"/>
            </svg>
        </button>

Download Button

Download


        <a href="#" class="flex items-center justify-center w-48 px-4 py-2 bg-purple-600 text-white font-bold text-sm rounded-lg hover:bg-purple-700 transition duration-300 ease-in-out">
            Download
            <svg xmlns="http://www.w3.org/2000/svg" class="ml-2 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v9m0 0l-3-3m3 3l3-3m8 12H4"/>
            </svg>
        </a>

Facebook Button


      <button type="button" class="flex items-center justify-center w-48 px-4 py-2 bg-[#3b5998] text-white text-xs  font-medium rounded-lg hover:bg-[#3b5998]/90 transition duration-300 ease-in-out">
          Sign in with Facebook
          <svg class="ml-2 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 8 19">
              <path fill-rule="evenodd" d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z" clip-rule="evenodd"/>
          </svg>
      </button>

Twitter Button


      <button type="button" class="flex items-center justify-center w-48 px-4 py-2 bg-[#1da1f2] text-white text-sm  font-medium rounded-lg hover:bg-[#1da1f2]/90 transition duration-300 ease-in-out">
          Sign in with Twitter
          <svg class="ml-2 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 17">
              <path fill-rule="evenodd" d="M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z" clip-rule="evenodd"/>
          </svg>
      </button>

Github Button


      <button type="button" class="flex items-center justify-center w-48 px-4 py-2 bg-[#24292F] text-white text-sm  font-medium rounded-lg hover:bg-[#24292F]/90 transition duration-300 ease-in-out">
          Sign in with Github
          <svg class="ml-2 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z" clip-rule="evenodd"/>
          </svg>
      </button>

Google Button


      <button type="button" class="flex items-center justify-center w-48 px-4 py-2 bg-[#4285F4] text-white text-sm font-medium rounded-lg hover:bg-[#4285F4]/90 transition duration-300 ease-in-out">
          Sign in with Google
          <svg class="ml-2 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 19">
              <path fill-rule="evenodd" d="M8.842 18.083a8.8 8.8 0 0 1-8.65-8.948 8.841 8.841 0 0 1 8.8-8.652h.153a8.464 8.464 0 0 1 5.7 2.257l-2.193 2.038A5.27 5.27 0 0 0 9.09 3.4a5.882 5.882 0 0 0-.2 11.76h.124a5.091 5.091 0 0 0 5.248-4.057L14.3 11H9V8h8.34c.066.543.095 1.09.088 1.636-.086 5.053-3.463 8.449-8.4 8.449l-.186-.002Z" clip-rule="evenodd"/>
          </svg>
      </button>

Apple Button


      <button type="button" class="flex items-center justify-center w-48 px-4 py-2 bg-[#050708] text-white text-sm font-medium rounded-lg hover:bg-[#050708]/90 transition duration-300 ease-in-out">
          Sign in with Apple
          <svg class="ml-2 w-5 h-5" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="apple" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
              <path fill="currentColor" d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"></path>
          </svg>
      </button>

Add to Cart Button


    <button type="button" class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
        Add to cart
        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="m5 11 4-7"></path>
            <path d="m19 11-4-7"></path>
            <path d="M2 11h20"></path>
            <path d="m3.5 11 1.6 7.4a2 2 0 0 0 2 1.6h9.8c.9 0 1.8-.7 2-1.6l1.7-7.4"></path>
            <path d="m9 11 1 9"></path>
            <path d="M4.5 15.5h15"></path>
            <path d="m15 11-1 9"></path>
        </svg>
    </button>

Signup Free Button


    <button type="button" class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
        Signup free
        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M5 12h14"></path>
            <path d="m12 5 7 7-7 7"></path>
        </svg>
    </button>

YouTube Button

<button class="bg-white transform hover:-translate-y-3 border-2 w-12 h-12 rounded-full duration-500 text-red-500 border-red-500 hover:bg-red-500 hover:text-white text-2xl"><i class="fab fa-youtube"></i></button>

Snapchat Button

<button class="bg-white transform hover:-translate-y-3 border-2 w-12 h-12 rounded-full duration-500 text-yellow-300 border-yellow-300 hover:bg-yellow-300 hover:text-white text-2xl"><i class="fab fa-snapchat-ghost"></i></button>

LinkedIn Button

<button class="bg-white transform hover:-translate-y-3 border-2 w-12 h-12 rounded-full duration-500 text-blue-500 border-blue-500 hover:bg-blue-500 hover:text-white text-2xl"><i class="fab fa-linkedin-in"></i></button>

TikTok Button

<button class="bg-white transform hover:-translate-y-3 border-2 w-12 h-12 rounded-full duration-500 text-black border-black hover:bg-black hover:text-white text-2xl"><i class="fab fa-tiktok"></i></button>

Telegram Button

<button class="bg-white transform hover:-translate-y-3 border-2 w-12 h-12 rounded-full duration-500 text-blue-400 border-blue-400 hover:bg-blue-400 hover:text-white text-2xl"><i class="fab fa-telegram-plane"></i></button>

Pinterest Button

<button class="bg-white transform hover:-translate-y-3 border-2 w-12 h-12 rounded-full duration-500 text-red-500 border-red-500 hover:bg-red-500 hover:text-white text-2xl"><i class="fab fa-pinterest-p"></i></button>

Spotify Button

<button class="bg-white transform hover:-translate-y-3 border-2 w-12 h-12 rounded-full duration-500 text-green-500 border-green-500 hover:bg-green-500 hover:text-white text-2xl"><i class="fab fa-spotify"></i></button>

Discord Button

<button class="bg-white transform hover:-translate-y-3 border-2 w-12 h-12 rounded-full duration-500 text-indigo-500 border-indigo-500 hover:bg-indigo-500 hover:text-white text-2xl"><i class="fab fa-discord"></i></button>

Reddit Button

<button class="bg-white transform hover:-translate-y-3 border-2 w-12 h-12 rounded-full duration-500 text-yellow-600 border-yellow-600 hover:bg-yellow-600 hover:text-white text-2xl"><i class="fab fa-reddit-alien"></i></button>

Google Plus Button

<button class="bg-white transform hover:-translate-y-3 border-2 w-12 h-12 rounded-full duration-500 text-red-500 border-red-500 hover:bg-red-500 hover:text-white text-2xl"><i class="fab fa-google-plus-g"></i></button>

Skype Button

<button class="bg-white transform hover:-translate-y-3 border-2 w-12 h-12 rounded-full duration-500 text-blue-400 border-blue-400 hover:bg-blue-400 hover:text-white text-2xl"><i class="fab fa-skype"></i></button>

Line Button

<button class="bg-white transform hover:-translate-y-3 border-2 w-12 h-12 rounded-full duration-500 text-green-400 border-green-400 hover:bg-green-400 hover:text-white text-2xl"><i class="fab fa-line"></i></button>

This is all


  <button
type="button"
class="inline-block rounded bg-blue-700 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 motion-reduce:transition-none dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
That is all folks!
</button>

280+ Tailwind CSS Button templates for Business

Shadow Button

Rotating Button

Background Color Change Button

Facebook Button

Loading Button

Folded Corner Button

Dimensional Text Button

Dimensional Text Button 3

Google

Instagram Button

Figma

Winter White

Microsoft Button

Notion Project Button

Force Button

WhatsApp Button

Group Button

Group Button

Group Button

Group Button

Spark Button

FIFA Button

Twitter Button

Upload Button

Apocalypse Button

Disney Button

Count Indicator Button

Indigo Circle Button

Blue Circle Button

Green Circle Button

Pink Circle Button

Orange Circle Button

Yellow Circle Button

Gray Circle Button

Indigo Rounded Button

Blue Rounded Button

Amazing Hover Button

Green Rounded Button

Pink Rounded Button

Side Hover Button

Orange Rounded Button

Yellow Rounded Button

Gray Rounded Button

Netflix

Processing Button

Curtain Hover Effect

Disney Button

Sketch Button

Simple Button

Invert Button

Tailwindcss Connect Button

Brutal Button

Favourite Button

Outline Button

Shimmer Button

Next.js Blue Button

Next.js White Button

Spotify Button

Backdrop Blur Button

Playlist Button

Figma Button

Figma Outline Button

Mario Vaiation

Made with love button

Subscribe Now

Contact Support

Chatbot Button

Heart Button

Erotic Button

Popover Button

Mario Button

Create My Account

Instagram Button

Hover Center Effect

Fancy Button

AI Animated Button

Primary Action

Blue Button

Outlined Red Button