Design buttons like a Pro with Tailwind CSS

Let's get down to business, today I'll show you some easy steps for creating clean, functional buttons with Tailwind CSS.

1. HTML markup

First, we need some basic HTML markup, all styling will happen through Tailwind classes.

<a href="#" class="...">
  Button
</a>

2. Display and spacing

Now on to adding classes to the class attribute. On mobile our button will be full-width otherwise, it will have some sane spacing defaults. The content is centered vertically as well as horizontally.

flex sm:inline-flex justify-center items-center px-5 py-2

3. Color

Next, we are adding background and text colors.

bg-blue-500 text-white

4. Text

Some simple text styling.

font-semibold text-center

5. Decoration

We are adding rounded borders and removing the default outline for a more polished look.

rounded-md outline-none

6. States

Don't forget to add states. Hover, active plus focus. These are important to give the user proper feedback.

hover:bg-blue-600 active:bg-blue-700 focus-visible:ring ring-blue-300

7. Transition

Finally adding a transition between the different states. Faster transition times usually work better for buttons (50ms to 150ms).

transition duration-100

Final result

---

<div class="bg-gray-100 py-16">
  <div class="flex flex-wrap justify-center gap-4 p-4">
    <a href="#" class="flex sm:inline-flex justify-center items-center bg-gradient-to-tr from-indigo-500 to-purple-400 hover:from-indigo-600 hover:to-purple-500 active:from-indigo-700 active:to-purple-600 focus-visible:ring ring-indigo-300 text-white font-semibold text-center rounded-md outline-none transition duration-100 px-5 py-2">
      Button 1
    </a>

    <a href="#" class="flex sm:inline-flex justify-center items-center bg-gradient-to-tr from-pink-500 to-red-400 hover:from-pink-600 hover:to-red-500 active:from-pink-700 active:to-red-600 focus-visible:ring ring-pink-300 text-white font-semibold text-center rounded-md outline-none transition duration-100 px-5 py-2">
      Button 2
    </a>

    <a href="#" class="flex sm:inline-flex justify-center items-center bg-blue-500 hover:bg-blue-600 active:bg-blue-700 focus-visible:ring ring-blue-300 text-white font-semibold text-center rounded-md outline-none transition duration-100 px-5 py-2">
      Button 3
    </a>

    <a href="#" class="flex sm:inline-flex justify-center items-center bg-green-500 hover:bg-green-600 active:bg-green-700 focus-visible:ring ring-green-300 text-white font-semibold text-center rounded-md outline-none transition duration-100 px-5 py-2">
      Button 4
    </a>
  </div>
</div>

More

👉 If you want to see more Tailwind CSS components and examples head over to Flowrift. It's a library full of beautifully designed Tailwind CSS UI blocks.