7 easy ways to create Tailwind CSS Button

As we all know that Tailwind doesn’t include pre-built button components like Bootstrap do.

It can be difficult for devs coming from a component-based CSS framework. (At least it was difficult for me) While it can be frustrating for beginners but it is by design because Tailwind is a utility-first CSS framework.

Simple tailwind CSS button

This is a simple tailwind CSS button in red color. Ya, I like red.

<button
  class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
>
  Simple Button
</button>

Pill tailwind CSS button

We can turn the above button to a pill button by changing the utility class rounded to rounded-full

<button
  class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full"
>
  Pill Button
</button>

Outline tailwind CSS button

For an outline button, we need to add a border to it

<button
  class="bg-transparent hover:bg-red-500 text-red-700 font-semibold hover:text-white py-2 px-4 border border-red-500 hover:border-transparent rounded"
>
  Outline Button
</button>

Border tailwind CSS button

We already know how to add a border in tailwind CSS so why not mix the simple button with it

<button
  class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 border border-red-700 rounded"
>
  Border Button
</button>

Disabled tailwind CSS button

Now you must be wondering that what if I don’t want the user to click my button (for some reason or you just like to bully your users) Luckily for you, there’s a solution

<button
  class="bg-red-500 text-white font-bold py-2 px-4 rounded opacity-50 cursor-not-allowed"
>
  Disabled Button
</button>

Group tailwind CSS button

What if you like unity and would like your buttons to be together then this is for you

<div class="inline-flex">
  <button
    class="bg-red-300 hover:bg-red-400 text-red-800 font-bold py-2 px-4 rounded-l"
  >
    Prev
  </button>
  <button
    class="bg-red-300 hover:bg-red-400 text-red-800 font-bold py-2 px-4 rounded-r"
  >
    Next
  </button>
</div>

Icon tailwind CSS button

You can also create an icon button with tailwind CSS

<button
  class="bg-red-300 hover:bg-red-400 text-red-800 font-bold py-2 px-4 rounded inline-flex items-center"
>
  <svg
    class="fill-current w-4 h-4 mr-2"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 20 20"
  >
    <path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z" />
  </svg>
  <span>Icon Button</span>
</button>

Remember sharing is caring! I need that juicy money from ads.

Simple tailwind CSS button#

Pill tailwind CSS button#

Outline tailwind CSS button#

Border tailwind CSS button#

Disabled tailwind CSS button#

Group tailwind CSS button#

Icon tailwind CSS button#