7 TailwindCSS Buttons

Jun 23, 2021

Tailwind ·16 min read

Written By

Jaysha

Here are 7 examples of basic Tailwind CSS buttons. These buttons examples were added to a React Tailwind project, but the Tailwind class attribute values work with HTML as well.

Check out the TailwindCSS section of Top 3 CSS Frameworks for Front-end Development if you are new to Tailwind.

TailwindCSS Buttons

Tailwind CSS comes with utilities for controlling background color, border radius, and text alignment, making buttons extremely easy to customize to your liking.

I've added a gray background to better see the white buttons.

Basic Primary Buttons

<a href="#" class="bg-white hover:bg-gray-200 text-black text-center py-2 px-4 rounded">
  Button
</a>
<a href="#" class="bg-black hover:bg-gray-900 text-white text-center py-2 px-4 rounded">
  Button
</a>
<a href="#" class="bg-gray-500 hover:bg-gray-700 text-white text-center py-2 px-4 rounded">
  Button
</a>
<a href="#" class="bg-red-500 hover:bg-red-700 text-white text-center py-2 px-4 rounded">
  Button
</a>
<a href="#" class="bg-yellow-500 hover:bg-yellow-700 text-white text-center py-2 px-4 rounded">
  Button
</a>
<a href="#" class="bg-green-500 hover:bg-green-700 text-white text-center py-2 px-4 rounded">
  Button
</a>
<a href="#" class="bg-blue-500 hover:bg-blue-700 text-white text-center py-2 px-4 rounded">
  Button
</a>   
<a href="#" class="bg-indigo-500 hover:bg-indigo-700 text-white text-center py-2 px-4 rounded">
  Button
</a>
<a href="#" class="bg-purple-500 hover:bg-purple-700 text-white text-center py-2 px-4 rounded">
  Button
</a>
<a href="#" class="bg-pink-500 hover:bg-pink-700 text-white text-center py-2 px-4 rounded">
  Button
</a>

Here are some basic buttons with a color change on the hover.

Outlined Secondary Buttons

<a href="#" class="bg-transparent hover:bg-white border border-bg-white text-white hover:text-black text-center py-2 px-4 rounded">
  Button
</a>
<a href="#" class="bg-transparent border border-black text-black hover:bg-black hover:text-white text-center py-2 px-4 rounded">
  Button
</a>
<a href="#" class="bg-transparent border border-gray-500 text-gray-500 hover:bg-gray-500 hover:text-white text-center py-2 px-4 rounded">
  Button
</a>
<a href="#" class="bg-transparent border border-red-500 text-red-500 hover:bg-red-500 hover:text-white text-center py-2 px-4 rounded">
  Button
</a>
<a href="#" class="bg-transparent border border-yellow-500 text-yellow-500 hover:bg-yellow-500 hover:text-white text-center py-2 px-4 rounded">
  Button
</a>
<a href="#" class="bg-transparent border border-green-500 text-green-500 hover:bg-green-500 hover:text-white text-center py-2 px-4 rounded">
  Button
</a>
<a href="#" class="bg-transparent border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white text-center py-2 px-4 rounded">
  Button
</a>   
<a href="#" class="bg-transparent border border-indigo-500 text-indigo-500 hover:bg-indigo-500 hover:text-white text-center py-2 px-4 rounded">
  Button
</a>
<a href="#" class="bg-transparent border border-purple-500 text-purple-500 hover:bg-purple-500 hover:text-white text-center py-2 px-4 rounded">
  Button
</a>
<a href="#" class="bg-transparent border border-pink-500 text-pink-500 hover:bg-pink-500 hover:text-white text-center py-2 px-4 rounded">
  Button
</a>

Next are some transparent buttons with colored text and borders. Be sure to add the border utility and specify the border color as class attribute values.

Light Buttons

<a href="#" class="bg-white hover:bg-gray-200 text-black text-center py-2 px-4 rounded">
  Button
</a>
<a href="#" class="bg-gray-200 hover:bg-gray-500 hover:text-white text-gray-500 text-center py-2 px-4 rounded">
  Button
</a>
<a href="#" class="bg-red-200 hover:bg-red-500 hover:text-white text-red-500 text-center py-2 px-4 rounded">
  Button
</a>
<a href="#" class="bg-yellow-200 hover:bg-yellow-500 hover:text-white text-yellow-500 text-center py-2 px-4 rounded">
  Button
</a>
<a href="#" class="bg-green-200 hover:bg-green-500 hover:text-white text-green-500 text-center py-2 px-4 rounded">
  Button
</a>
<a href="#" class="bg-blue-200 hover:bg-blue-500 hover:text-white text-blue-500 text-center py-2 px-4 rounded">
  Button
</a>   
<a href="#" class="bg-indigo-200 hover:bg-indigo-500 hover:text-white text-indigo-500 text-center py-2 px-4 rounded">
  Button
</a>
<a href="#" class="bg-purple-200 hover:bg-purple-500 hover:text-white text-purple-500 text-center py-2 px-4 rounded">
  Button
</a>
<a href="#" class="bg-pink-200 hover:bg-pink-500 hover:text-white text-pink-500 text-center py-2 px-4 rounded">
  Button
</a>

Here are some light-colored buttons. This effect is accomplished by selecting lighter background colors from the predefined Tailwind background-color utilities.

Buttons with Icons

<a href="#" class="bg-white hover:bg-gray-200 text-black py-2 px-4 rounded inline-flex items-center">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
  </svg>
  Button
</a>
 <a href="#" class="bg-black hover:bg-gray-900 text-white py-2 px-4 rounded inline-flex items-center">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
  </svg>
  Button
</a>
<a href="#" class="bg-gray-500 hover:bg-gray-700 text-white py-2 px-4 rounded inline-flex items-center">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
  </svg>
  Button
</a>
<a href="#" class="bg-red-500 hover:bg-red-700 text-white py-2 px-4 rounded inline-flex items-center">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
  </svg>
  Button
</a>
<a href="#" class="bg-yellow-500 hover:bg-yellow-700 text-white py-2 px-4 rounded inline-flex items-center">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
  </svg>  
  Button
</a>
<a href="#" class="bg-green-500 hover:bg-green-700 text-white py-2 px-4 rounded inline-flex items-center">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
  </svg>
  Button
</a>
<a href="#" class="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded inline-flex items-center">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
  </svg>
  Button
</a>   
<a href="#" class="bg-indigo-500 hover:bg-indigo-700 text-white py-2 px-4 rounded inline-flex items-center">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
  </svg>
  Button
</a>
<a href="#" class="bg-purple-500 hover:bg-purple-700 text-white py-2 px-4 rounded inline-flex items-center">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
  </svg>
  Button
</a>
<a href="#" class="bg-pink-500 hover:bg-pink-700 text-white py-2 px-4 rounded inline-flex items-center">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
  </svg>
  Button
</a>

The important utilities needed to add the icon in line with the button text are inline-flex and items-center.

The icons are from https://heroicons.com/. They are free to use and also made by Tailwind CSS.

Rounded Buttons

<a href="#" class="bg-white hover:bg-gray-200 text-black text-center py-2 px-4 rounded-full">
  Button
</a>
<a href="#" class="bg-black hover:bg-gray-900 text-white text-center py-2 px-4 rounded-full">
  Button
</a>
<a href="#" class="bg-gray-500 hover:bg-gray-700 text-white text-center py-2 px-4 rounded-full">
  Button
</a>
<a href="#" class="bg-red-500 hover:bg-red-700 text-white text-center py-2 px-4 rounded-full">
  Button
</a>
<a href="#" class="bg-yellow-500 hover:bg-yellow-700 text-white text-center py-2 px-4 rounded-full">
  Button
</a>
<a href="#" class="bg-green-500 hover:bg-green-700 text-white text-center py-2 px-4 rounded-full">
  Button
</a>
<a href="#" class="bg-blue-500 hover:bg-blue-700 text-white text-center py-2 px-4 rounded-full">
  Button
</a>   
<a href="#" class="bg-indigo-500 hover:bg-indigo-700 text-white text-center py-2 px-4 rounded-full">
  Button
</a>
<a href="#" class="bg-purple-500 hover:bg-purple-700 text-white text-center py-2 px-4 rounded-full">
  Button
</a>
<a href="#" class="bg-pink-500 hover:bg-pink-700 text-white text-center py-2 px-4 rounded-full">
  Button
</a>

Add the utility rounded-full to the button to create a pill shape.

Circular Buttons

<a href="#" class="bg-white hover:bg-gray-200 text-black text-center py-2 px-4 rounded-full h-14 w-14 inline-flex items-center">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
  </svg>
</a>
<a href="#" class="bg-black hover:bg-gray-900 text-white text-center py-2 px-4 rounded-full h-14 w-14 inline-flex items-center">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
  </svg>
</a>
<a href="#" class="bg-gray-500 hover:bg-gray-700 text-white text-center py-2 px-4 rounded-full h-14 w-14 inline-flex items-center">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
  </svg>
</a>
<a href="#" class="bg-red-500 hover:bg-red-700 text-white text-center py-2 px-4 rounded-full h-14 w-14 inline-flex items-center">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
  </svg>
</a>
<a href="#" class="bg-yellow-500 hover:bg-yellow-700 text-white text-center py-2 px-4 rounded-full h-14 w-14 inline-flex items-center">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
  </svg>
</a>
<a href="#" class="bg-green-500 hover:bg-green-700 text-white text-center py-2 px-4 rounded-full h-14 w-14 inline-flex items-center">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
  </svg>
</a>
<a href="#" class="bg-blue-500 hover:bg-blue-700 text-white text-center py-2 px-4 rounded-full h-14 w-14 inline-flex items-center">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
  </svg>
</a>   
<a href="#" class="bg-indigo-500 hover:bg-indigo-700 text-white text-center py-2 px-4 rounded-full h-14 w-14 inline-flex items-center">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
  </svg>
</a>
<a href="#" class="bg-purple-500 hover:bg-purple-700 text-white text-center py-2 px-4 rounded-full h-14 w-14 inline-flex items-center">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
  </svg>
</a>
<a href="#" class="bg-pink-500 hover:bg-pink-700 text-white text-center py-2 px-4 rounded-full h-14 w-14 inline-flex items-center">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
  </svg>
</a>

Add a height and a width to the button or link. Also, add the utilities rounded-full, inline-flex and items-center.

3D Buttons

<a href="#" class="bg-gray-200 hover:bg-gray-100 border-b-4 border-gray-400 hover:border-gray-200 text-black text-center py-2 px-4 rounded">
  Button
</a>
<a href="#" class="bg-gray-800 hover:bg-gray-700 border-b-4 border-black hover:border-gray-800 text-white text-center py-2 px-4 rounded">
  Button
</a>
<a href="#" class="bg-gray-500 hover:bg-gray-400 border-b-4 border-gray-700 hover:border-gray-500 text-white text-center py-2 px-4 rounded">
  Button
</a>
<a href="#" class="bg-red-500 hover:bg-red-400 border-b-4 border-red-700 hover:border-red-500 text-white text-center py-2 px-4 rounded">
  Button
</a>
<a href="#" class="bg-yellow-500 hover:bg-yellow-400 border-b-4 border-yellow-700 hover:border-yellow-500 text-white text-center py-2 px-4 rounded">
  Button
</a>
<a href="#" class="bg-green-500 hover:bg-green-400 border-b-4 border-green-700 hover:border-green-500 text-white text-center py-2 px-4 rounded">
  Button
</a>
<a href="#" class="bg-blue-500 hover:bg-blue-400 border-b-4 border-blue-700 hover:border-blue-500 text-white text-center py-2 px-4 rounded">
  Button
</a>   
<a href="#" class="bg-indigo-500 hover:bg-indigo-400 border-b-4 border-indigo-700 hover:border-indigo-500 text-white text-white text-center py-2 px-4 rounded">
  Button
</a>
<a href="#" class="bg-purple-500 hover:bg-purple-400 border-b-4 border-purple-700 hover:border-purple-500 text-white text-white text-center py-2 px-4 rounded">
  Button
</a>
<a href="#" class="bg-pink-500 hover:bg-pink-400 border-b-4 border-pink-700 hover:border-pink-500 text-white text-white text-center py-2 px-4 rounded">
  Button
</a>

Add a border-b-4, for the bottom border, then change the background and border color on hover.

Let me know if you want to see any other Tailwind CSS button variations in the comments below.

Tailwind

Written By

Jaysha

Hello! I enjoy learning about new CSS frameworks, animation libraries, and SEO.