Défi : Boutons

Tâche

En utilisant Tailwind CSS, créez un bouton qui répond aux exigences suivantes :

1. Le bouton doit avoir un fond bleu (par exemple, bg-blue-500);
2. Lorsqu'on le survole, la couleur de fond doit changer pour une teinte de bleu plus foncée (par exemple, bg-blue-700);
3. Lorsqu'il est focalisé, le bouton doit avoir une couleur de fond jaune (par exemple, bg-yellow-500);
4. Lorsqu'il est actif (pressé), la couleur de fond doit changer pour une teinte de bleu encore plus foncée (par exemple, bg-blue-900);
5. Lorsqu'il est désactivé, le bouton doit apparaître avec une opacité de 50% et un curseur indiquant qu'il n'est pas cliquable.

• Utilisez hover:bg-blue-700 pour l'état de survol;
• Utilisez focus:bg-yellow-500 pour l'état de focus;
• Utilisez active:bg-blue-900 pour l'état actif;
• Utilisez opacity-50 cursor-not-allowed pour l'état désactivé.