Tailwind CSS Buttons
Button is used to start an instant operation and is used when triggers an action or event
Default Buttons
<button
type="button"
class="btn inline-flex items-center gap-x-2 bg-green-600 text-white border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-100"
>
Button
</button>
<button
type="button"
class="btn inline-flex items-center gap-x-2 bg-yellow-500 text-white border-yellow-500 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-yellow-600 hover:border-yellow-600 active:bg-yellow-600 active:border-yellow-600 focus:outline-none focus:ring-4 focus:ring-yellow-100"
>
Button
</button>
<button
type="button"
class="btn inline-flex items-center gap-x-2 bg-red-600 text-white border-red-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-red-600 hover:border-red-600 active:bg-red-600 active:border-red-600 focus:outline-none focus:ring-4 focus:ring-red-100"
>
Button
</button>
<button
type="button"
class="btn inline-flex items-center gap-x-2 bg-cyan-400 text-white border-cyan-400 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-cyan-600 hover:border-cyan-600 active:bg-cyan-600 active:border-cyan-600 focus:outline-none focus:ring-4 focus:ring-cyan-100"
>
Button
</button>
<button
type="button"
class="btn inline-flex items-center gap-x-2 bg-gray-200 text-gray-800 border-gray-200 border disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-gray-700 hover:border-gray-700 active:bg-gray-700 active:border-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-300"
>
Button
</button>
<button
type="button"
class="btn inline-flex items-center gap-x-2 bg-gray-800 text-white border-gray-800 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-gray-900 hover:border-gray-900 active:bg-gray-900 active:border-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300"
>
Button
</button>Outline Buttons
<button
type="button"
class="btn inline-flex items-center gap-x-2 bg-transparent text-green-600 border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-100"
>
Button
</button>
<button
type="button"
class="btn inline-flex items-center gap-x-2 bg-transparent text-yellow-500 border-yellow-500 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-yellow-600 hover:border-yellow-600 active:bg-yellow-600 active:border-yellow-600 focus:outline-none focus:ring-4 focus:ring-yellow-100"
>
Button
</button>
<button
type="button"
class="btn inline-flex items-center gap-x-2 bg-transparent text-red-600 border-red-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-red-600 hover:border-red-600 active:bg-red-600 active:border-red-600 focus:outline-none focus:ring-4 focus:ring-red-100"
>
Button
</button>
<button
type="button"
class="btn inline-flex items-center gap-x-2 bg-transparent text-cyan-400 border-cyan-400 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-cyan-600 hover:border-cyan-600 active:bg-cyan-600 active:border-cyan-600 focus:outline-none focus:ring-4 focus:ring-cyan-100"
>
Button
</button>
<button
type="button"
class="btn inline-flex items-center gap-x-2 bg-transparent text-gray-600 border-gray-300 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-gray-700 hover:border-gray-700 active:bg-gray-700 active:border-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-300"
>
Button
</button>
<button
type="button"
class="btn inline-flex items-center gap-x-2 bg-transparent text-gray-800 border-gray-800 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-gray-900 hover:border-gray-900 active:bg-gray-900 active:border-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300"
>
Button
</button>Sizes
<button
type="button"
class="btn btn-sm inline-flex items-center gap-x-2 bg-green-600 text-white border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-100"
>Button
</button>
<button
type="button"
class="btn inline-flex items-center gap-x-2 bg-green-600 text-white border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-100"
>
Button
</button>
<button
type="button"
class="btn btn-lg inline-flex items-center gap-x-2 bg-green-600 text-white border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-100"
>
Button</button>with Icons
<a
href="#"
class="btn btn-sm inline-flex items-center justify-center gap-x-2 h-8 w-8 px-0 bg-gray-200 text-gray-800 border-gray-200 border disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-gray-700 hover:border-gray-700 active:bg-gray-700 active:border-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-arrows-exchange"
width="14"
height="14"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M7 10h14l-4 -4"></path>
<path d="M17 14h-14l4 4"></path>
</svg>
</a>
<a
href="#"
class="btn inline-flex items-center gap-x-2 px-0 h-10 w-10 justify-center bg-gray-200 text-gray-800 border-gray-200 border disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-gray-700 hover:border-gray-700 active:bg-gray-700 active:border-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-arrows-exchange"
width="20"
height="20"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M7 10h14l-4 -4"></path>
<path d="M17 14h-14l4 4"></path>
</svg>
</a>
<a
href="#"
class="btn inline-flex items-center gap-x-2 px-0 h-12 w-12 justify-center bg-gray-200 text-gray-800 border-gray-200 border disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-gray-700 hover:border-gray-700 active:bg-gray-700 active:border-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-arrows-exchange"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M7 10h14l-4 -4"></path>
<path d="M17 14h-14l4 4"></path>
</svg>
</a>