Making Buttons with Tailwind CSS
Making Buttons with Tailwind CSS
This tutorial is part of our Learn Tailwind CSS Guide

Making Buttons with Tailwind CSS

Lynne Buencamino's Profile
Lynne Buencaminoon Jul 7, 2021

Making Tailwind buttons is one of the first things you need to do when learning Tailwind CSS. Let's explore how to make them with the utility classes CSS framework.

Buttons create a way for users to make selections. They can be used to hide/show elements on a page, submit forms, toggle options, send an email, make a purchase, and lots more. Tailwind CSS allows us to build buttons in no time by using their custom classes.

<!-- button tags; info button bootstrap color teal is swapped out for simplicity; extra step will be added for color customizations -->
<div class="p-24 bg-purple-300 flex flex-col justify-center items-center">
   <h3 class="pb-10 font-bold text-4xl text-purple-700">Basic Buttons</h3>
   <div class="flex space-x-2 space-y-2 flex-wrap justify-center items-baseline">
      <button class="rounded-lg px-4 py-2 bg-blue-500 text-blue-100 hover:bg-blue-600 duration-300">Primary</button>
      <button class="rounded-lg px-4 py-2 bg-gray-600 text-gray-100 hover:bg-gray-700 duration-300">Secondary</button>
      <button class="rounded-lg px-4 py-2 bg-green-700 text-green-100 hover:bg-green-800 duration-300">Success</button>
      <button class="rounded-lg px-4 py-2 bg-red-600 text-red-100 hover:bg-red-700 duration-300">Danger</button>
      <button class="rounded-lg px-4 py-2 bg-yellow-500 hover:bg-yellow-600 duration-300">Warning</button>
      <button class="rounded-lg px-4 py-2 bg-green-300 hover:bg-green-400 duration-300">Info</button>
      <button class="rounded-lg px-4 py-2 bg-gray-200 hover:bg-gray-300 duration-300">Light</button>
      <button class="rounded-lg px-4 py-2 bg-gray-900 text-gray-100">Dark</button>
      <button class="rounded-lg px-4 py-2 underline text-blue-500 hover:text-blue-600 duration-300">Link</button>
   </div>
</div>
<div class="p-24 bg-purple-50 flex flex-col justify-center items-center">
  <h3 class="pb-10 font-bold text-4xl text-purple-700">Outline Buttons</h3>
  <!-- outline buttons; info button bootstrap color teal is swapped out for simplicity; extra step will be added for color customizations -->
  <div class="flex space-x-2 space-y-2 flex-wrap justify-center items-baseline">
    <button class="rounded-lg px-4 py-2 border-2 border-blue-500 text-blue-500 hover:bg-blue-600 hover:text-blue-100 duration-300">
      Primary
    </button>
    <button class="rounded-lg px-4 py-2 border-2 border-gray-600 text-gray-600 hover:bg-gray-600 hover:text-gray-100 duration-300">
      Secondary
    </button>
    <button class="rounded-lg px-4 py-2 border-2 border-green-700 text-green-700 hover:bg-green-700 hover:text-green-100 duration-300">
      Success
    </button>
    <button class="rounded-lg px-4 py-2 border-2 border-red-600 text-red-600 hover:bg-red-600 hover:text-red-100 duration-300">
      Danger
    </button>
    <button class="rounded-lg px-4 py-2 border-2 border-yellow-500 text-yellow-500 hover:bg-yellow-500 hover:text-yellow-100 duration-300">
      Warning
    </button>
    <button class="rounded-lg px-4 py-2 border-2 border-green-300 text-green-300 hover:bg-green-300 hover:text-green-100 duration-300">
      Info
    </button>
    <button class="rounded-lg px-4 py-2 border-2 border-gray-200 text-gray-200 hover:bg-gray-200 hover:text-gray-900 duration-300">
      Light
    </button>
    <button class="rounded-lg px-4 py-2 border-2 border-gray-900 text-gray-900 hover:bg-gray-900 hover:text-gray-100 duration-300">
      Dark
    </button>
    <button class="rounded-lg px-4 py-2 underline text-blue-500 ">Link</button>
  </div>
</div>
<div class="p-24 bg-purple-200 flex flex-col justify-center items-center">
   <h3 class="pb-10 font-bold text-4xl text-purple-700">Button Sizes</h3>
    <!-- button sizes -->
    <div class="flex flex-wrap justify-center items-baseline">
      <!-- large button -->
      <div class="px-5">
         <h3 class="font-bold pb-2 text-center">Large Button</h3>
         <button class="rounded-lg px-8 py-2 text-xl bg-blue-500 text-blue-100 hover:bg-blue-600 duration-300">Large</button>
         <button class="rounded-lg px-8 py-2 text-xl border-2 border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-blue-100 duration-300">Large</button>
      </div>
      <!-- small button -->
      <div class="px-5">
         <h3 class="font-bold pt-4 pb-2 text-center">Small Button</h3>
         <button class="rounded px-4 py-2 text-xs bg-blue-500 text-blue-100 hover:bg-blue-600 duration-300">Small</button>
         <button class="rounded px-4 py-2 text-xs border-2 border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-blue-100 duration-300">Small</button>
      </div>
   </div>
</div>
<div class="p-24 bg-purple-700 flex flex-col justify-center items-center">
   <h3 class="pb-10 font-bold text-4xl text-purple-100">Block Buttons with Grids</h3>
   <!-- buttons with grid -->
   <div class="w-full grid grid-col-12 gap-y-5 gap-x-2">
      <!-- full width -->
      <p class="col-span-12 font-bold text-purple-300">Full width</p>
      <button class="col-span-12 rounded-lg px-4 py-2 bg-green-700 text-green-100 hover:bg-green-800 duration-300">Submit</button>
      <!-- half width -->
      <p class="col-span-12 font-bold text-purple-300">Half width</p>
      <button class="col-span-6 rounded-lg px-4 py-2 bg-green-700 text-green-100 hover:bg-green-800 duration-300">Submit</button>
      <!-- grid (left-aligned) -->
      <p class="col-span-12 font-bold text-purple-300">Grid (Left Aligned)</p>
      <button class="col-span-2 rounded-lg px-4 py-2 bg-green-700 text-green-100 hover:bg-green-800 duration-300">Submit</button>
      <button class="col-span-2 rounded-lg px-4 py-2 bg-green-700 text-green-100 hover:bg-green-800 duration-300">Submit</button>
      <!-- right aligned -->
      <p class="col-span-12 font-bold text-purple-300">Right Aligned</p>
         <button class="col-start-8 col-end-10 rounded-lg px-4 py-2 bg-green-700 text-green-100 hover:bg-green-800 duration-300">Submit</button>
         <button class="col-start-10 col-end-12 rounded-lg px-4 py-2 bg-green-700 text-green-100 hover:bg-green-800 duration-300">Submit</button>
   </div>
</div>
<div class="p-24 bg-purple-400 flex flex-col justify-center items-center">
  <h3 class="pb-10 font-bold text-4xl text-purple-700">Disabled State</h3>
  <!-- disabled states -->
  <div class="flex space-x-2 space-y-2 flex-wrap justify-center items-baseline">
    <button class="rounded-lg px-8 py-2 bg-green-700 text-green-100 hover:bg-green-800 duration-300">
      Submit
    </button>
    <button
      class="rounded-lg px-8 py-2 bg-green-700 text-green-100 opacity-50 cursor-not-allowed disabled:opacity-50"
      disabled
    >
      Submit
    </button>
  </div>
</div>

Our CodePen needs to include Tailwind CSS. So let's create a new CodePen and add Tailwind under the CSS settings.

Adding Tailwind to CodePen

Bootstrap has been one of the most popular front-end toolkit for prebuilt components. The main difference between Bootstrap and Tailwind is that Tailwind has no predefined styles and all styling (including buttons) are built from scratch.

Bootstrap has nine button styles that are predefined and labeled for specific purposes--which we'll use for inspiration when building our Tailwind buttons.

Bootstrap's Buttons

In Tailwind, we'll begin by making a button by using the button tag and we'll label each button to match Bootstrap's nine labels.

html<button>Primary</button>
<button>Secondary</button>
<button>Success</button>
<button>Danger</button>
<button>Warning</button>
<button>Info</button>
<button>Light</button>
<button>Dark</button>
<button>Link</button>

It's not much, but we've got text! Now, let's add styling.

Each of the nine buttons will include:

html<!-- primary button -->
<button class="rounded-lg px-4 py-2 bg-blue-500 text-blue-100">Primary</button>

<!-- secondary button -->
<button class="rounded-lg px-4 py-2 bg-gray-600 text-gray-100">
  Secondary
</button>

<!-- success button -->
<button class="rounded-lg px-4 py-2 bg-green-700 text-green-100">
  Success
</button>

<!-- danger button -->
<button class="rounded-lg px-4 py-2 bg-red-600 text-red-100">Danger</button>

<!-- warning button -->
<button class="rounded-lg px-4 py-2 bg-yellow-500">Warning</button>

<!-- info button -->
<button class="rounded-lg px-4 py-2 bg-green-300">Info</button>

<!-- light button -->
<button class="rounded-lg px-4 py-2 bg-gray-200">Light</button>

<!-- dark button -->
<button class="rounded-lg px-4 py-2 bg-gray-900 text-gray-100">Dark</button>

<!-- link -->
<button class="rounded-lg px-4 py-2 underline text-blue-500">Link</button>

<div class="p-24 h-screen bg-purple-300 flex flex-col justify-center items-center">
   <div class="flex space-x-2 space-y-2 flex-wrap justify-center items-baseline">
      <button class="rounded-lg px-4 py-2 bg-blue-500 text-blue-100">Primary</button>
      <button class="rounded-lg px-4 py-2 bg-gray-600 text-gray-100">Secondary</button>
      <button class="rounded-lg px-4 py-2 bg-green-700 text-green-100">Success</button>
      <button class="rounded-lg px-4 py-2 bg-red-600 text-red-100">Danger</button>
      <button class="rounded-lg px-4 py-2 bg-yellow-500">Warning</button>
      <button class="rounded-lg px-4 py-2 bg-green-300">Info</button>
      <button class="rounded-lg px-4 py-2 bg-gray-200">Light</button>
      <button class="rounded-lg px-4 py-2 bg-gray-900 text-gray-100">Dark</button>
      <button class="rounded-lg px-4 py-2 underline text-blue-500">Link</button>
   </div>
</div>

When hovering over our buttons, we want them to becomee slightly darker.

Add these hover properties to your button class.

  • hover:bg-{color}: Manipulates the background color on hover. In this case, we want the background color to become a darker shade.
  • duration-300: Adjusts the transition duration to 300ms.
html<button class="... bg-blue-500 hover:bg-blue-600 text-blue-100  duration-300">
  Primary
</button>
☝️Pro Tip
Don't forget to adjust the text-color if the background becomes too light or too dark for the text. Use the same color in a darker or lighter shade for your text color for better color matching.

<div class="p-24 h-screen bg-purple-300 flex flex-col justify-center items-center">
   <div class="flex space-x-2 space-y-2 flex-wrap justify-center items-baseline">
      <button class="rounded-lg px-4 py-2 bg-blue-500 text-blue-100 hover:bg-blue-600 duration-300">Primary</button>
      <button class="rounded-lg px-4 py-2 bg-gray-600 text-gray-100 hover:bg-gray-700 duration-300">Secondary</button>
      <button class="rounded-lg px-4 py-2 bg-green-700 text-green-100 hover:bg-green-800 duration-300">Success</button>
      <button class="rounded-lg px-4 py-2 bg-red-600 text-red-100 hover:bg-red-700 duration-300">Danger</button>
      <button class="rounded-lg px-4 py-2 bg-yellow-500 hover:bg-yellow-600 duration-300">Warning</button>
      <button class="rounded-lg px-4 py-2 bg-green-300 hover:bg-green-400 duration-300">Info</button>
      <button class="rounded-lg px-4 py-2 bg-gray-200 hover:bg-gray-300 duration-300">Light</button>
      <button class="rounded-lg px-4 py-2 bg-gray-900 text-gray-100">Dark</button>
      <button class="rounded-lg px-4 py-2 underline text-blue-500 hover:text-blue-600 duration-300">Link</button>
   </div>
</div>

We already have the padding and shape of our buttons, so we can just remove background colors and add borders to create outlined buttons which will be filled-in when hovering.

By using the Primary Button example, the only new class we're adding is border.

html<!-- primary button -->
<button
  class="rounded-lg px-4 py-2 border-2 border-blue-500 text-blue-500 hover:bg-blue-600 hover:text-blue-100 duration-300"
>
  Primary
</button>

Keep in mind that we also want to change the text-{color} to match the border-{color}.

Then on hover:, add in a background color and pick a matching text color.

And we have a a cool outlined button from Tailwind!


<div class="p-24 h-screen bg-purple-50 flex flex-col justify-center items-center">
   <div class="flex space-x-2 space-y-2 flex-wrap justify-center items-baseline">
      <button class="rounded-lg px-4 py-2 border-2 border-blue-500 text-blue-500 hover:bg-blue-600 hover:text-blue-100 duration-300">Primary</button>
      <button class="rounded-lg px-4 py-2 border-2 border-gray-600 text-gray-600 hover:bg-gray-600 hover:text-gray-100 duration-300">Secondary</button>
      <button class="rounded-lg px-4 py-2 border-2 border-green-700 text-green-700 hover:bg-green-700 hover:text-green-100 duration-300">Success</button>
      <button class="rounded-lg px-4 py-2 border-2 border-red-600 text-red-600 hover:bg-red-600 hover:text-red-100 duration-300">Danger</button>
      <button class="rounded-lg px-4 py-2 border-2 border-yellow-500 text-yellow-500 hover:bg-yellow-500 hover:text-yellow-100 duration-300">Warning</button>
      <button class="rounded-lg px-4 py-2 border-2 border-green-300 text-green-300 hover:bg-green-300 hover:text-green-100 duration-300">Info</button>
      <button class="rounded-lg px-4 py-2 border-2 border-gray-200 text-gray-200 hover:bg-gray-200 hover:text-gray-900 duration-300">Light</button>
      <button class="rounded-lg px-4 py-2 border-2 border-gray-900 text-gray-900 hover:bg-gray-900 hover:text-gray-100 duration-300">Dark</button>
      <button class="rounded-lg px-4 py-2 underline text-blue-500 ">Link</button>
   </div>
</div>

Tailwind uses font sizes and padding to manipulate the size of their buttons. We'll make two button sizes to choose from:

  • Large
  • Small

In Tailwind, font sizes ranges from text-xs to text-9xl. We can literally make a button with a font size as small as 0.75rem to a font size as large as 8rem.

📝Note
If you're not too familiar with rem, rem is the root element's font size. One rem is equal to 16 pixels. Check out this px to REM converter.

Increase the font size to text-xl. We'll also increase the button's right and left padding to px-8 to give a the button a little more room.

html<!-- large button -->
<button
  class="rounded-lg px-8 py-2 text-xl bg-blue-500 text-blue-100 hover:bg-blue-600 duration-300"
>
  Large
</button>

And here's the small buttons. We'll decrease the font size to text-xs and leave the padding to the way we had it.

html<!-- small button -->
<button
  class="rounded px-4 py-2 text-xs bg-blue-500 text-blue-100 hover:bg-blue-600 duration-300"
>
  Small
</button>

<div class="p-24 h-screen bg-purple-200 flex flex-col justify-center items-center">
   <!-- button sizes -->
   <div class="flex flex-wrap justify-center items-baseline">
      <!-- large button -->
      <div class="px-5">
         <h3 class="font-bold pb-2 text-center">Large Button</h3>
         <button class="rounded-lg px-8 py-2 text-xl bg-blue-500 text-blue-100 hover:bg-blue-600 duration-300">Large</button>
         <button class="rounded-lg px-8 py-2 text-xl border-2 border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-blue-100 duration-300">Large</button>
      </div>
      <!-- small button -->
      <div class="px-5">
         <h3 class="font-bold pt-4 pb-2 text-center">Small Button</h3>
         <button class="rounded px-4 py-2 text-xs bg-blue-500 text-blue-100 hover:bg-blue-600 duration-300">Small</button>
         <button class="rounded px-4 py-2 text-xs border-2 border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-blue-100 duration-300">Small</button>
      </div>
   </div>
</div>

A really cool thing about making buttons in Tailwind is that we can also use grids to adjust sizing and placement of buttons.

Understanding and Setting up the Grid

Grids can get a little confusing once we start to stack them. I know it still gets me to slow down and break them down a little whenever I use them.

So let's get a brief introduction or refresher to grids. Grids are split horizontally (rows) and/or vertically (columns). The grid we're using is split into 12 template columns using col-span-12.

You can count the columns and see the split of what we're going to build here 👇.

Block Buttons with Grid Split

Using Tailwind's grid utilities, the grid's parent div will include:

  • w-full: We'll set the width to take the full width of our parent div.
  • grid: This class allows us to use the grid utitlites in Tailwind.
  • grid-col-12: Specify the amount of columns using Tailwind's grid template. We'll use the max columns (12).
  • gap-y-5 & gap-x-2: This gap can be used for spacing the gutters in Tailwind's grids and flexboxes.
HTML<div class="w-full grid grid-col-12 gap-y-5 gap-x-2">

<!-- grid buttons here -->

</div>

The div that starts our grid will hold two elements:

  • p tag: We'll add this p tag description above each button we make. We'll style this with a simple text color and weight change. This description will also take all 12 columns, so add col-span-12.
  • button tag: We'll use the 'success' button styling for this example. Since we want this button to span the whole grid, add col-span-12 to the button.

Looking good for a full-width button using a grid!


  <div class="p-24 h-screen bg-purple-700 flex flex-col justify-center items-center">
    <div class="w-full grid grid-col-12 gap-y-5 gap-x-2">
      <p class="col-span-12 font-bold text-purple-300">Full width</p>
        <button class="col-span-12 rounded-lg px-4 py-2 bg-green-700 text-green-100 hover:bg-green-800 duration-300">Submit</button>
    </div>
  </div>

The only change (besides the p tag's description of the button) is the size of the button. Half-width buttons using Tailwind's grid is exactly that. Half of 12, which is 6. So our button's column span should be col-span-6.

HTML<!-- half-width button -->
<button class="col-span-6 rounded-lg px-4 py-2 bg-green-700 text-green-100 hover:bg-green-800 duration-300">Submit</button>

By default, content is left-aligned. So we just want to span the number of columns of each button. We'll make two buttons to span 2 columns each using col-span-2.

HTML<!-- submit button one -->
<button class="col-span-2 rounded-lg px-4 py-2 bg-green-700 text-green-100 hover:bg-green-800 duration-300">Submit</button>

<!-- submit button two -->
<button class="col-span-2 rounded-lg px-4 py-2 bg-green-700 text-green-100 hover:bg-green-800 duration-300">Submit</button>

This get's a little tricky. Aligning things to the right using grids takes a little more work. We're going to use Tailwind's grid column start/end feature which lets you pick and choose where we want the button to start and stop.

We want to span each of our two buttons 2 columns. So we'll start by aligning our first button 4 columns back and count 2 forward by adding the classes col-start-9 and col-end-11. Then our next button to span 2 columns from there by adding col-start-11 and col-end-13.

HTML<!-- submit button one -->
<button class="col-start-9 col-end-11 rounded-lg px-4 py-2 bg-green-700 text-green-100 hover:bg-green-800 duration-300">Submit</button>

<!-- submit button two -->
<button class="col-start-11 col-end-13 rounded-lg px-4 py-2 bg-green-700 text-green-100 hover:bg-green-800 duration-300">Submit</button>

Sneaky, sneaky! Did you notice we ended at 13 and not at 12?

☝️Pro Tip
CSS grids don't start at 0, but start at 1. Keep that in mind when using col-start, col-end, row-start, and/or row-end utilities. Tailwind grids can be split up to 12 equal template columns and 6 equal template rows. So when wanting end a column at its 12th column, use col-end-13 instead of col-end-12

We'll just add them altogether and there you have it! Take a look at the grid buttons you just made in Tailwind!


<div class="p-24 bg-purple-700 flex flex-col justify-center items-center">
   <!-- buttons with grid -->
   <div class="w-full grid grid-col-12 gap-y-5 gap-x-2">
      <!-- full width -->
      <p class="col-span-12 font-bold text-purple-300">Full width</p>
      <button class="col-span-12 rounded-lg px-4 py-2 bg-green-700 text-green-100 hover:bg-green-800 duration-300">Submit</button>
      <!-- half width -->
      <p class="col-span-12 font-bold text-purple-300">Half width</p>
      <button class="col-span-6 rounded-lg px-4 py-2 bg-green-700 text-green-100 hover:bg-green-800 duration-300">Submit</button>
      <!-- grid (left-aligned) -->
      <p class="col-span-12 font-bold text-purple-300">Grid (Left Aligned)</p>
      <button class="col-span-2 rounded-lg px-4 py-2 bg-green-700 text-green-100 hover:bg-green-800 duration-300">Submit</button>
      <button class="col-span-2 rounded-lg px-4 py-2 bg-green-700 text-green-100 hover:bg-green-800 duration-300">Submit</button>
      <!-- right aligned -->
      <p class="col-span-12 font-bold text-purple-300">Grid (Right Aligned)</p>
      <button class="col-start-9 col-end-11 rounded-lg px-4 py-2 bg-green-700 text-green-100 hover:bg-green-800 duration-300">Submit</button>
      <button class="col-start-11 col-end-13 rounded-lg px-4 py-2 bg-green-700 text-green-100 hover:bg-green-800 duration-300">Submit</button>
   </div>

A button is disabled when the user is unable to use the button because the button is inactive. We can add the disabled feature by applying Tailwind's disabled: prefix.

Add disabled:opacity-50 which will decrease the opacity of a disabled button.

Then, add a cursor to create a not allowed icon by using the Tailwind's class cursor-not-allowed.

Finally to disable your button, add disabled attribute to your button.

HTML<!-- disabled button -->
<button class="rounded-lg px-8 py-2 bg-green-700 text-green-100 cursor-not-allowed disabled:opacity-50" disabled>Submit</button>

Here is what your button will look like when disabled:

<div class="p-24 h-screen bg-purple-400 flex flex-col justify-center items-center">
   <div class="flex space-x-2 space-y-2 flex-wrap justify-center items-baseline">
      <button class="rounded-lg px-4 py-2 bg-green-700 text-green-100 hover:bg-green-800 duration-300">Submit</button>
      <button class="rounded-lg px-4 py-2 bg-green-700 text-green-100 opacity-50 cursor-not-allowed disabled:opacity-50" disabled>Submit</button>
   </div>
</div>

Whoa. That was a lot of buttons. But Tailwind makes it fun to style and customize your buttons. You can recreate any button you see out there, even Bootstrap's predefined buttons like we did here.

We were able to recreate Bootstrap's filled-in buttons, outlined buttons, change button sizes, make buttons using a grid, and took it a step further to make a disabled button.

I hope you had fun! Want to learn more about Tailwind CSS? Check out Better Dev's Getting Started with Tailwind course.

Lynne Buencamino

Lynne Buencamino

Lynne Buencamino is an UI/UX Designer. Solves problems to create purposeful designs. Enjoys finding that perfect mesh between business goals and user experience.

Comments

What did you think of the article? Let us know!
(these comments are powered by GitHub issues and use 0 trackers)