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

Effets de survol pour les boutons personnalisés de style case à cocher en CSS

Lors de la création de cases à cocher de style personnalisé qui ressemblent à des boutons, vous souhaiterez peut-être ajouter un survol effets pour améliorer l’expérience utilisateur. Voici comment y parvenir en utilisant CSS :

HTML :

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

CSS :

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

Ce code cible l'élément #ck-button en utilisant la pseudo-classe :hover lorsque l'utilisateur le survole. La propriété background est ensuite définie sur rouge, modifiant la couleur d'arrière-plan du bouton au survol.

Démo :

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!