Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Défi : Boutons | Construction de Composants de Base
Tailwind CSS pour le Développement Web

bookDé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.
index.html

index.html

copy
  • 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é.
index.html

index.html

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 2

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Awesome!

Completion rate improved to 3.57

bookDéfi : Boutons

Glissez pour afficher le menu

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.
index.html

index.html

copy
  • 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é.
index.html

index.html

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 2
some-alt