7 easy ways to create Tailwind CSS Button

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

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.

Also Read – Pentagon Menu using CSS

Well, don’t need a pre-built button component we can create our own. We can use Tailwind utility classes to create our own button component.

All the source code for this project is available at Codepen.

Here’s how to create the Tailwind CSS button.

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>

With that this article ends here.