In this section, we'll learn how to use the Active Button After Click feature in Tailwind CSS.
Create a button that becomes active after clicking using the Tailwind CSS classes active:bg-blue-800, along with focus:outline-none and focus:ring focus:border-blue-300.
<button class="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded focus:outline-none focus:ring focus:border-blue-300 active:bg-blue-800">
Active Button
</button>
tailwind css active button
Create an outlined active button that activates upon clicking using Tailwind CSS.
<button class="border border-blue-500 text-blue-500 font-semibold hover:bg-blue-500 hover:text-white py-2 px-4 rounded focus:outline-none focus:ring focus:border-blue-300">
Outlined Active Button
</button>
tailwind css outlined active button
Tailwind CSS primary active button with shadow effect.
<button class="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded shadow-md focus:outline-none active:bg-blue-800 focus:ring focus:border-blue-300">
Primary Button
</button>
Tailwind CSS button with a gradient background that becomes active, featuring an icon.
<button class="bg-gradient-to-r from-purple-400 to-blue-500 active:bg-blue-800 hover:from-purple-500 hover:to-blue-600 text-white py-2 px-4 rounded focus:outline-none focus:ring focus:border-blue-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 2a1 1 0 00-1 1v5H5a1 1 0 100 2h4v5a1 1 0 102 0v-5h4a1 1 0 100-2h-4V3a1 1 0 00-1-1z" clip-rule="evenodd" />
</svg>
Button with Icon
</button>
tailwind css gradient active button with icon
