Comment ajouter des effets de survol aux boutons de style case à cocher avec CSS ?

Implémentation d'effets de survol sur des boutons de style case à cocher à l'aide de CSS

Créer des apparences de type bouton pour les cases à cocher à l'aide de CSS est une pratique courante. Bien que l'amélioration visuelle puisse être obtenue efficacement, l'absence d'effets de survol peut limiter l'interactivité de l'utilisateur. Cet article répond au problème de l'ajout d'effets de survol aux boutons de style case à cocher.

Un exemple d'implémentation utilisant HTML et CSS est fourni :

HTML :

<code class="html"><div id="ck-button">
  <label>
    <input type="checkbox" value="1">
    <span>red</span>
  </label>
</div></code>

CSS :

<code class="css">div label input {
  margin-right: 100px;
}

body {
  font-family: sans-serif;
}

#ck-button {
  margin: 4px;
  background-color: #EFEFEF;
  border-radius: 4px;
  border: 1px solid #D0D0D0;
  overflow: auto;
  float: left;
}

#ck-button label {
  float: left;
  width: 4.0em;
}

#ck-button label span {
  text-align: center;
  padding: 3px 0px;
  display: block;
}

#ck-button label input {
  position: absolute;
  top: -20px;
}

#ck-button input:checked + span {
  background-color: #911;
  color: #fff;
}

#ck-button:hover {
  background: red;
}</code>

Pour activer l'effet de survol, une nouvelle règle CSS est ajoutée au mix :

<code class="css">#ck-button:hover {
  background: red;
}</code>

Cette règle modifie le La couleur d'arrière-plan du bouton devient rouge lorsque l'utilisateur le survole, fournissant le retour visuel souhaité et améliorant la convivialité.

Démo en direct :

[Voir la démo en direct sur JSFiddle](http://jsfiddle.net/zAFND/4/)

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!