Boutons

Les boutons sont des éléments interactifs fondamentaux dans la conception web. Tailwind CSS fournit une variété d'utilitaires pour styliser efficacement les boutons et gérer leurs différents états, tels que survol, focus et actif.

Style de Bouton de Base

Pour styliser un bouton de base, vous pouvez utiliser des utilitaires pour la couleur de fond, la couleur du texte, le rembourrage, le rayon de bordure et le poids de la police.

Explication

1. bg-yellow-500: Définit la couleur de fond sur une teinte de bleu;
2. text-white: Définit la couleur du texte en blanc;
3. font-bold: Rend le texte en gras;
4. py-2: Ajoute un remplissage vertical (0.5rem ou 8px);
5. px-4: Ajoute un remplissage horizontal (1rem ou 16px);
6. rounded: Ajoute de petits coins arrondis.

État au survol

Pour changer l'apparence d'un bouton lorsque l'utilisateur le survole, vous pouvez utiliser le préfixe hover: avec n'importe quelle classe utilitaire.

hover:bg-blue-700: Change la couleur de fond en bleu foncé lorsque le bouton est survolé.

État de Focus

Pour styliser un bouton lorsqu'il est en focus (par exemple, lorsqu'il est sélectionné à l'aide du clavier), vous pouvez utiliser le préfixe focus: avec n'importe quelle classe utilitaire.

Dans cet exemple, lorsque vous survolez un bouton avec le curseur de la souris, il devient bleu. Si vous utilisez le bouton Tab, le bouton deviendra rouge.

États Actifs et Désactivés

Les états actifs et désactivés sont utilisés plus rarement. Cependant, nous devrions également les considérer.

Pour styliser un bouton lorsqu'il est actif (par exemple, lorsqu'il est cliqué), vous pouvez utiliser le préfixe active: avec n'importe quelle classe utilitaire.

Pour styliser un bouton lorsqu'il est désactivé (par exemple, lorsqu'il ne peut pas être interagi avec), vous pouvez utiliser le préfixe disabled: avec n'importe quelle classe utilitaire.

Explication

1. active:bg-green-800: Change la couleur de fond en une teinte plus foncée de vert lorsque le bouton est actif (pressé);
2. opacity-50: Réduit l'opacité du bouton pour le faire paraître désactivé;
3. cursor-not-allowed: Change le curseur pour indiquer que le bouton n'est pas cliquable;
4. Attribut disabled: Le rend non interactif.

Exemple de tous les états

Combinaison de tous les états en un seul exemple

Explication

1. bg-blue-500: Définit la couleur de fond par défaut;
2. hover:bg-blue-700: Change la couleur de fond au survol;
3. focus:outline-none: Supprime le contour de focus par défaut;
4. focus:ring-2: Ajoute un anneau de focus d'une largeur de 2 pixels;
5. focus:ring-blue-600: Définit la couleur de l'anneau de focus;
6. focus:ring-opacity-50: Définit l'opacité de l'anneau de focus;
7. active:bg-blue-800: Change la couleur de fond lorsque le bouton est actif;
8. text-white: Définit la couleur du texte en blanc;
9. font-bold: Rend le texte en gras;
10. py-2: Ajoute une marge intérieure verticale;
11. px-4: Ajoute une marge intérieure horizontale;
12. rounded: Ajoute de petits coins arrondis.

Remarque

Si vous avez besoin d'approfondir le composant de bouton Tailwind, voici un lien vers la documentation officielle.