Tailwind CSS Button Styles for Business
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.
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>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
<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
<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
<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>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-11 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
<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>
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>
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-11 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>
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>
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-11 mr-2 h-9" />
</a>
Subscribe 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
<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>
Erotic Button
<a href="#" class="flex items-center justify-center w-48 px-6 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>
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-11 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>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>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>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>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>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>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>