Comment créer un bouton avec trois états distincts : par défaut, survol et activé ?

Indicateur de bouton enfoncé

Question :

Création d'un bouton qui active visuellement son état l'interaction peut être une fonctionnalité utile dans les interfaces utilisateur. Cependant, le CSS fourni ne modifie le style du bouton que lorsqu'il est activement enfoncé. Le comportement prévu est d'avoir trois états distincts : un état par défaut, un état de survol et un état activé (appuyé).

Réponse :

Lors de l'utilisation d'un < ;bouton> peut ne pas donner le résultat souhaité, il vaut la peine d'explorer une approche alternative en utilisant un étiqueter. Cette solution offre des fonctionnalités similaires et peut offrir une flexibilité supplémentaire :

<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>

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

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!