Button Group Normal, Active And Disabled

Discover the versatility of button groups for web design - learn how to implement and style normal, active, and disabled buttons effectively.

HTML + Tailwind
<div class="space-x-2"> <!-- Normal Button --> <button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-md">Normal</button> <!-- Active Button --> <button class="px-4 py-2 bg-green-500 hover:bg-green-600 text-white rounded-md active:bg-green-700">Active</button> <!-- Disabled Button --> <button class="px-4 py-2 bg-gray-400 text-white rounded-md cursor-not-allowed" disabled>Disabled</button> </div>
Abdelmjid Saber

Abdelmjid Saber


I love learning and creating something new fast, secure and clean code applications.