Buttons in Tailwind CSS 4 – Complete Guide
Buttons are one of the most important UI components in modern web applications. They are used for actions like:
- submitting forms
- navigation
- opening modals
- triggering events
- user interactions
Tailwind CSS makes it very easy to design buttons using utility classes without writing custom CSS.
In this tutorial you will learn:
- Basic button styles
- Button colors
- Button sizes
- Hover effects
- Gradient buttons
- Icon buttons
- Outline buttons
- Responsive buttons
- Real UI examples
We will use the Tailwind CSS 4 CDN.
https://unpkg.com/@tailwindcss/browser@4
Step 1: Setup Tailwind CSS CDN
Create a simple HTML file.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<h1 class="text-3xl font-bold mb-6">
Tailwind Button Examples
</h1>
</body>
</html>
Now Tailwind utilities are ready to use.
Basic Button
The simplest Tailwind button includes:
- background color
- padding
- rounded corners
Example
<button class="bg-blue-500 text-white px-4 py-2 rounded">
Click Me
</button>
Explanation:
| Class | Purpose |
|---|---|
| bg-blue-500 | button background color |
| text-white | text color |
| px-4 py-2 | padding |
| rounded | border radius |
Button Colors
Tailwind allows you to easily change button colors.
Example
<div class="flex gap-4">
<button class="bg-blue-500 text-white px-4 py-2 rounded">
Primary
</button>
<button class="bg-green-500 text-white px-4 py-2 rounded">
Success
</button>
<button class="bg-red-500 text-white px-4 py-2 rounded">
Danger
</button>
</div>
Common button types:
| Type | Example |
|---|---|
| Primary | bg-blue-500 |
| Success | bg-green-500 |
| Danger | bg-red-500 |
| Warning | bg-yellow-500 |
| Dark | bg-gray-800 |
Button Sizes
You can adjust button sizes using padding utilities.
Example
<div class="flex gap-4">
<button class="bg-blue-500 text-white px-3 py-1 rounded text-sm">
Small
</button>
<button class="bg-blue-500 text-white px-4 py-2 rounded">
Medium
</button>
<button class="bg-blue-500 text-white px-6 py-3 rounded text-lg">
Large
</button>
</div>
Hover Effects
Hover effects improve user interaction.
Example
<button class="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded transition">
Hover Button
</button>
Explanation:
| Class | Role |
|---|---|
| hover:bg-blue-700 | darker color on hover |
| transition | smooth animation |
Outline Buttons
Outline buttons have borders instead of solid backgrounds.
Example
<button class="border border-blue-500 text-blue-500 px-4 py-2 rounded hover:bg-blue-500 hover:text-white transition">
Outline Button
</button>
Used commonly in:
- secondary actions
- minimal UI designs
Gradient Buttons
Gradients create modern button styles.
Example
<button class="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-6 py-2 rounded-lg shadow hover:from-blue-600 hover:to-purple-700">
Gradient Button
</button>
Features:
- gradient background
- hover gradient effect
- shadow
Icon Buttons
Buttons can include icons for better UX.
Example
<button class="flex items-center gap-2 bg-blue-500 text-white px-4 py-2 rounded">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 4v16m8-8H4"/>
</svg>
Add Item
</button>
Used in:
- action buttons
- dashboards
- admin panels
Rounded Buttons
Tailwind allows fully rounded buttons.
Example
<button class="bg-green-500 text-white px-6 py-2 rounded-full">
Rounded Button
</button>
Common for:
- call-to-action buttons
- pill buttons
Disabled Button
Buttons can also be disabled.
Example
<button class="bg-gray-400 text-white px-4 py-2 rounded cursor-not-allowed">
Disabled
</button>
Used in forms when actions are unavailable.
Responsive Buttons
Buttons can adapt across different screen sizes.
Example
<button class="bg-blue-500 text-white px-4 py-2 md:px-6 md:py-3 rounded">
Responsive Button
</button>
Behavior:
| Screen | Size |
|---|---|
| Mobile | Small button |
| Tablet/Desktop | Larger button |
Button Group Example
Buttons can be grouped together.
<div class="flex">
<button class="bg-blue-500 text-white px-4 py-2 rounded-l">
Left
</button>
<button class="bg-blue-600 text-white px-4 py-2">
Middle
</button>
<button class="bg-blue-700 text-white px-4 py-2 rounded-r">
Right
</button>
</div>
Common in:
- pagination
- filters
- toolbars
Real Example – Call to Action Buttons
<div class="flex gap-4">
<button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg">
Get Started
</button>
<button class="border border-blue-600 text-blue-600 px-6 py-3 rounded-lg hover:bg-blue-600 hover:text-white">
Learn More
</button>
</div>
Used in landing pages and marketing websites.
Why Use Tailwind Buttons?
Faster UI Development
Tailwind utilities make button styling quick.
Flexible Design
You can create multiple button styles easily.
Responsive Components
Buttons adapt across different screen sizes.
Clean and Maintainable Code
No need for custom CSS.
FAQs
How do you create a button in Tailwind?
Example:
<button class="bg-blue-500 text-white px-4 py-2 rounded">
Button
</button>
How do you add hover effects?
Use hover utilities.
Example:
hover:bg-blue-700
Can Tailwind create gradient buttons?
Yes.
Example:
bg-gradient-to-r from-blue-500 to-purple-600
How do you create outline buttons?
Use border utilities.
Example:
border border-blue-500 text-blue-500
Can buttons be responsive?
Yes.
Example:
md:px-6 md:py-3
Your Feedback
Help us improve by sharing your thoughts
Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.
Quick Links
© 2023 - 2026 OnlineLearner.in | All Rights Reserved.