Comment utiliser CSS pour obtenir des effets de clic sur un bouton

Comment utiliser CSS pour obtenir des effets de clic sur les boutons

Avant-propos :
Dans la conception Web moderne, les boutons sont l'un des éléments indispensables dans l'interaction des pages. Un bon style de bouton peut non seulement améliorer l’expérience utilisateur, mais également améliorer l’effet visuel de la page. Cet article présentera une méthode d'utilisation de CSS pour obtenir des effets de clic sur un bouton, ajoutant de la dynamique et de l'interactivité à la page.

1. Style de bouton de base
Avant de réaliser l'effet de clic sur le bouton, vous devez d'abord définir le style de bouton de base. Vous pouvez utiliser des sélecteurs de pseudo-classe CSS pour définir des styles pour les boutons. Les pseudo-classes couramment utilisées incluent :hover et :focus.

Exemple de code :

.button {
  padding: 10px 20px;
  background-color: #2196f3;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button:hover {
  background-color: #0d8bf2;
}

.button:focus {
  outline: none;
  box-shadow: 0 0 5px #0d8bf2;
}

Analyse :

1. définit un sélecteur de classe nommé .button, qui représente le style du bouton.
2. Définissez le remplissage, la couleur d'arrière-plan, la couleur de la police, la bordure et d'autres propriétés du bouton.
3. Utilisez la pseudo-classe :hover pour définir le style du bouton lorsque la souris survole, et vous pouvez changer la couleur d'arrière-plan du bouton.
4. Utilisez la pseudo-classe :focus pour définir le style lorsque le bouton obtient le focus, et vous pouvez ajouter des bordures et des effets d'ombre.

2. Effet de clic
L'effet de clic du bouton peut être obtenu à l'aide du sélecteur de pseudo-classe CSS : actif. La pseudo-classe :active prend effet lorsque le bouton est enfoncé.

Exemple de code :

.button:active {
  background-color: #0b6de1;
  transform: translateY(2px);
}

Analyse :

1. Ajoutez la pseudo-classe :active après le sélecteur de classe .button pour indiquer le style du bouton lorsqu'il est enfoncé.
2. Modifiez la couleur d'arrière-plan du bouton pour donner l'impression que le bouton est enfoncé.
3. Utilisez l'attribut transform pour obtenir l'effet de déplacer le bouton vers le bas de 2 pixels.

3. Exemple de code complet

<button class="button">按钮</button>

.button {
  padding: 10px 20px;
  background-color: #2196f3;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button:hover {
  background-color: #0d8bf2;
}

.button:focus {
  outline: none;
  box-shadow: 0 0 5px #0d8bf2;
}

.button:active {
  background-color: #0b6de1;
  transform: translateY(2px);
}

Analyse :

1. Utilisez la balise
2. Le code CSS comprend le style de base du bouton, le style de survol de la souris, le style de focus et le style d'effet de clic.

Conclusion :
En utilisant des sélecteurs de pseudo-classe CSS et des attributs de transformation, nous pouvons facilement obtenir l'effet de clic des boutons. Cette méthode est non seulement simple et facile à comprendre, mais permet également d'obtenir divers effets de bouton en ajustant la valeur de l'attribut de style. J'espère que cet article pourra vous aider à obtenir des effets de clic sur les boutons dans la conception de pages.

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!