DEV Community

Cover image for Day 3: Button Styling in Tailwind CSS — Create Beautiful Buttons in One Line
Ruqaiya Beguwala
Ruqaiya Beguwala

Posted on • Originally published at Medium

Day 3: Button Styling in Tailwind CSS — Create Beautiful Buttons in One Line

#tailwindcss #webdev

Welcome back to 15 Days of Tailwind Tips — a short, actionable series for beginner and intermediate frontend developers who want to get better at Tailwind CSS without spending hours digging through the docs.

In today’s post, we’re going to cover something almost every UI needs: buttons. They’re everywhere — and Tailwind CSS makes it incredibly easy to style them with clarity, consistency, and control.

Let’s look at how you can create stylish, responsive, and accessible buttons in just a few utility classes.

Creating a Primary Button in One Line

A basic, solid-colored button with padding, rounded corners, and a hover effect can be done in one clean line:

<button class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700"> Click Me </button>
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • px-4 py-2: Adds horizontal and vertical padding
  • bg-indigo-600: Applies a primary background color
  • text-white: Makes the button text white for contrast
  • rounded: Adds subtle corner rounding
  • hover:bg-indigo-700: Darkens the button on hover

This gives you a fully functional, modern button — with no custom CSS required.

Creating an Outline Button

Want something less solid and more subtle? Use border utilities:

<button class="px-4 py-2 border border-indigo-600 text-indigo-600 rounded hover:bg-indigo-50"> Outline Button </button>
Enter fullscreen mode Exit fullscreen mode

This style works great for secondary actions or less prominent UI interactions.

Adding Transitions for a Smoother Feel

Tailwind also allows you to easily add smooth animations with transition classes:

<button class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 transition duration-200"> Smooth Button </button>
Enter fullscreen mode Exit fullscreen mode
  • transition: Enables transition effects
  • duration-200: Specifies how long the hover effect takes (200ms)

Disabled State for Buttons

Don’t forget accessibility. You can indicate a disabled state visually:

<button class="px-4 py-2 bg-gray-400 text-white rounded cursor-not-allowed" disabled> Disabled </button>
Enter fullscreen mode Exit fullscreen mode

This uses cursor-not-allowed to give feedback to the user and a gray background for clarity.

Responsive Button Sizing

You can make buttons adapt to different screen sizes like this:

<button class="px-4 py-2 md:px-6 md:py-3 bg-indigo-600 text-white rounded"> Responsive Button </button>
Enter fullscreen mode Exit fullscreen mode
  • Small padding on mobile
  • Increased padding on medium screens and up

Resuing button styles using @apply

  • Use focus:outline-none and focus:ring-2 for better accessibility
  • Add icons inside buttons with flex items-center gap-2
  • Use uppercase tracking-wide font-semibold for CTA-style buttons
  • Create reusable button styles with @apply in a CSS file or Tailwind's config

Example:

.btn-primary { @apply px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700; }
Enter fullscreen mode Exit fullscreen mode

Now you can use <button class="btn-primary"> across your app.

Advanced Tips

If you're comfortable with the basics, here are some advanced techniques to take your button designs further:

1. Adding Button States with group-hover

Want to style an icon inside a button when the button is hovered?

<button class="group flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 transition"> <span>Save</span> <svg class="w-4 h-4 transition group-hover:rotate-45" ...></svg> </button>
Enter fullscreen mode Exit fullscreen mode
  • group: Applies a class scope to parent
  • group-hover:rotate-45: Triggers animation on child when parent is hovered

2. Loading State with Tailwind Animations

Add a spinner inside a button for async actions:

<button class="flex items-center px-4 py-2 bg-indigo-600 text-white rounded gap-2"> <svg class="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none">...</svg> <span>Loading</span> </button>
Enter fullscreen mode Exit fullscreen mode
  • Use animate-spin with a rotating SVG for a lightweight loading state.

3. Using ring Utilities for Focus States

Improve accessibility and UI feedback with Tailwind’s focus ring:

<button class="px-4 py-2 bg-indigo-600 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-400"> Focus Me </button>
Enter fullscreen mode Exit fullscreen mode
  • This gives a visible border when the user tabs to the button via keyboard — an essential accessibility feature.

4. Thematic Variants Using Tailwind Config

Instead of repeating classes for each button type, define them in tailwind.config.js using custom classes or @apply. This keeps your code DRY and consistent across your app.

Conclusion

Buttons are one of the most interacted-with elements in any interface, and Tailwind CSS gives you full control over how they look, feel, and respond — all while keeping your HTML clean and consistent.

You can build everything from solid primary buttons to subtle outline styles and even animated states — all with composable utility classes that scale across your components.

In the next post, we’ll move into responsive grid layouts using Tailwind’s powerful grid system.

Top comments (0)