Explore our collection of business-oriented button styles created with Tailwind CSS. These buttons are designed to enhance your web applications with professional and functional UI elements.
<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>
<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>
<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>
<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>
<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>
<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>
<button class="px-6 py-2 bg-black text-white rounded-lg font-bold transform hover:-translate-y-1 transition duration-400"> Figma </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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Primary Action</button>
<button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded-full">Secondary Action</button>
<button class="bg-green-500 hover:bg-green-700 text-white font-semibold py-2 px-4 border border-green-500 rounded">Success</button>
<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded inline-flex items-center">Danger</button>
<button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded-lg">Warning</button>
<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>
<button class="bg-cyan-500 hover:bg-cyan-700 text-white font-bold py-2 px-4 rounded-xl">Info</button>
<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>
<button class="bg-gray-300 text-gray-500 font-bold py-2 px-4 rounded opacity-50 cursor-not-allowed" disabled>Disabled</button>
<button class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4">Link</button>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded text-xs">Small</button>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded text-lg">Large</button>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full">Full Width</button>
<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>
<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>
<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>
<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>
<button class="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded shadow-inner">Investor Relations</button>
<button class="bg-blue-700 hover:bg-blue-900 text-white font-semibold py-2 px-6 rounded-xl tracking-wide">Business Intelligence</button>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<button class="bg-pink-500 hover:bg-pink-700 text-white font-semibold py-2 px-6 rounded-full shadow-md">Sales Dashboard</button>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<button class="bg-indigo-600 hover:bg-indigo-800 text-white font-bold py-2 px-6 rounded-xl shadow-inner">Resource Allocation</button>
<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>
<button class="bg-green-600 hover:bg-green-800 text-white font-bold py-2 px-4 rounded">Minecraft Play Now</button>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Tetris Start Game</button>
<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Super Mario Jump In</button>
<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>
<button class="bg-yellow-400 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded">Pac-Man Play Now</button>
<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>
<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>
<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>
<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>
<button class="bg-orange-500 hover:bg-orange-700 text-white font-bold py-2 px-6 rounded-lg animate-bounce">Team Collaboration</button>
<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>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Rounded Primary Button</button>
<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Rounded Danger Button</button>
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Rounded Success Button</button>
<button class="border border-blue-500 text-blue-500 font-bold py-2 px-4 rounded">Outline Primary Button</button>
<button class="border border-red-500 text-red-500 font-bold py-2 px-4 rounded">Outline Danger Button</button>
<button class="border border-green-500 text-green-500 font-bold py-2 px-4 rounded">Outline Success Button</button>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<button class="bg-indigo-500 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-full animate-pulse">Talent Acquisition</button>
<button class="bg-red-500 hover:bg-red-700 text-white font-semibold py-2 px-5 rounded-md shadow-inner">Brand Management</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>
<button class="bg-blue-600 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded">Facebook Connect Button</button>
<button class="bg-orange-500 hover:bg-orange-700 text-white font-bold py-2 px-4 rounded">Amazon Buy Now Button</button>
<button class="bg-gray-800 hover:bg-gray-900 text-white font-bold py-2 px-4 rounded">Apple Learn More Button</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>
<button class="bg-red-700 hover:bg-red-800 text-white font-bold py-2 px-4 rounded">Netflix Watch Now Button</button>
<button class="bg-blue-400 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Twitter Tweet Button</button>
<button class="bg-black hover:bg-gray-800 text-white font-bold py-2 px-4 rounded">Uber Ride Now Button</button>
<button class="bg-pink-500 hover:bg-pink-700 text-white font-bold py-2 px-4 rounded">Airbnb Book Now Button</button>
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Spotify Play Button</button>
<button class="bg-blue-700 hover:bg-blue-900 text-white font-bold py-3 px-7 rounded-full uppercase">Global Operations</button>
<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>
<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>
<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>
<button class="bg-teal-500 hover:bg-teal-700 text-white font-medium py-2 px-4 rounded-lg shadow-sm">Feedback Form</button>
<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>
<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>
<button class="bg-blue-600 hover:bg-blue-800 text-white font-semibold py-2 px-4 rounded-lg animate-pulse">Join Webinar</button>
<button class="bg-green-500 hover:bg-green-700 text-white font-medium py-2 px-6 rounded-md shadow-md">Download Report</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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>