Buttons Examples of building buttons with Tailwind CSS.

Sumit Rana
Sumit Rana
.
1 min read

Buttons

Examples of building buttons with Tailwind CSS.
Tailwind doesn't include pre-designed button styles out of the box, but they're easy to build using existing utilities.
Here are a few examples to help you get an idea of how to build components like this using Tailwind.
Simple
Button
<!-- Using utilities: --> <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> Button </button> <!-- Extracting component classes: --> <button class="btn btn-blue"> Button </button> <style> .btn { @apply font-bold py-2 px-4 rounded; } .btn-blue { @apply bg-blue-500 text-white; } .btn-blue:hover { @apply bg-blue-700; } </style>

Pill

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

Outline

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

Bordered

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

Disabled

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

3D

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

Elevated

Button
<button class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow"> Button </button>

Groups

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

Icons

Download
<button class="bg-gray-300 hover:bg-gray-400 text-gray-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>Download</span> </button>
Sumit Rana
Written By

Sumit Rana

Coding wold

Coding wold

Coding wold. Follow to join Coding wold + followers.

You may also like