Comment styliser un bouton en utilisant CSS

CSS est un langage utilisé pour le style des pages Web. Il peut obtenir de nombreux effets intéressants, notamment le style des boutons. Dans cet article, nous verrons comment styliser les boutons à l'aide de CSS.

Créer un bouton en HTML

Tout d'abord, créez un bouton dans la page HTML, comme indiqué ci-dessous :

<button>我是一个按钮</button>

Ici, la balise <button> du HTML est utilisée pour créer un bouton.

Définissez le style de base du bouton

Ensuite, nous pouvons utiliser CSS pour définir le style de base du bouton, y compris la taille, la couleur, la police, la bordure, etc.

button {
  font-size: 16px;
  padding: 10px 20px;
  background-color: #3f51b5;
  color: #fff;
  border: none;
  border-radius: 5px;
}

Ce code définira la taille de la police de tous les boutons à 16 pixels et définira le remplissage à 10 pixels en haut et en bas et à 20 pixels à gauche et à droite. La couleur d'arrière-plan du bouton est #3f51b5 (bleu foncé) et sa couleur de premier plan est le blanc. Le bouton n'a pas de bordure et un rayon de coin de 5 pixels.

Effet de survol

Nous pouvons également ajouter des effets de survol au bouton. Par exemple, lorsque l'utilisateur passe le pointeur de la souris sur un bouton, la couleur d'arrière-plan du bouton passe au bleu clair.

button:hover {
  background-color: #2196f3;
}

Effet d'activation

Lorsque le bouton est cliqué, nous pouvons ajouter un effet d'activation, comme changer la couleur d'arrière-plan du bouton :

button:active {
  background-color: #1e88e5;
}

Effet de désactivation

Lorsque le bouton est désactivé, nous pouvons changer l'apparence du bouton, comme changer la couleur du texte et la couleur d’arrière-plan pour rendre le bouton invalide.

button:disabled {
  background-color: #ccc;
  color: #999;
  cursor: not-allowed;
}

Ce code définit la couleur d'arrière-plan du bouton sur gris, la couleur du texte sur gris foncé et le style du pointeur sur un symbole interdit.

Conclusion

Dans les pages Web, les boutons sont un élément très courant, et de nombreux effets intéressants peuvent être obtenus grâce au CSS. Cet article explique comment utiliser CSS pour définir le style de base, l'effet de survol, l'effet d'activation et l'effet de désactivation du bouton. Avec ces conseils, vous pouvez ajouter de nombreux éléments dynamiques intéressants à votre site Web et améliorer l’expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!