Tailwind CSS Simple Button Examples

In this tutorial we will see simple button, rounded button , hovered button , outline button, button with Icon, examples with Tailwind CSS

Tool Use

Tailwind CSS 2.x

Heroicons Icons

👉 View Demo

Setup Project

Using CDN

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

or

Example 1

Simple Button

<button class="px-6 py-2 text-white bg-red-600" type="button">
     Button
</button>
<button class="px-6 py-2 text-white bg-indigo-600" type="button">
     Button
 </button>

Example 2

Rounded Button

<button class="px-6 py-2 text-white bg-red-600 rounded-full" type="button">
    Button
</button>
<button class="px-6 py-2 text-white bg-indigo-600 rounded-full" type="button">
    Button
</button>

Example 3

Hovered Effect Button

<button class="px-6 py-2 text-white bg-red-600 rounded-full hover:bg-red-400 hover:text-red-200"
        type="button">Button
</button>
<button class="px-6 py-2 text-white bg-indigo-600 rounded-full hover:bg-indigo-400 hover:text-indigo-200"
        type="button">Button
</button>

Example 4

Outline Button

<button class="px-6 py-2 text-indigo-700 border-2 border-indigo-500 rounded-full hover:bg-indigo-500 hover:text-indigo-100">Button</button>
<button class="px-6 py-2 text-red-700 border-2 border-red-500 rounded-full hover:bg-red-500 hover:text-red-100">Button</button>

Example 5

Button With Icon

<button class="inline-flex items-center px-6 py-2 text-indigo-100 bg-indigo-700 rounded-full hover:bg-indigo-800">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2 text-green-800 bg-white rounded-full" fill="none"
        viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
    </svg>
    <span>Button</span>
</button>
<button class="inline-flex items-center px-6 py-2 text-red-100 bg-red-700 rounded-full hover:bg-red-800">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2 text-green-800 bg-white rounded-full" fill="none"
        viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
    </svg>
    <span>Button</span>
</button>

See Also 👇