Comment créer un effet de type bouton avec un changement de style à la sortie en CSS ?

Sélecteur de bouton enfoncé

En CSS, vous pouvez utiliser la pseudo-classe :active pour styliser les éléments sur lesquels vous cliquez et maintenez votre doigt. Cependant, ce comportement n'est pas idéal pour les boutons, car le style du bouton ne changera que lorsqu'il est maintenu enfoncé.

Pour obtenir l'effet souhaité, à savoir que le bouton change de style après avoir été enfoncé et relâché, vous pouvez utiliser un tag au lieu d'un bouton :

CSS :

<code class="css">a {
  display: block;
  font-size: 18px;
  border: 2px solid gray;
  border-radius: 100px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

a:active {
  font-size: 18px;
  border: 2px solid green;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}

a:target {
  font-size: 18px;
  border: 2px solid red;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}</code>

HTML :

<code class="html"><a id="btn" href="#btn">Demo</a></code>

Ce code crée un lien qui se comporte comme un bouton. Lorsque l'on clique sur le lien, son style passe au vert. Ensuite, lorsque le bouton de la souris est relâché, le style du lien passe au rouge.

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!