Comment créer un bouton bascule avec un effet Push-In et Pop-Out en utilisant HTML et CSS ?

Création d'un bouton bascule en HTML et CSS

Question :

Comment puis-je créer un bouton bascule en HTML utilisant CSS qui reste enfoncé lorsque vous cliquez dessus et ressort lorsque vous cliquez à nouveau ?

Réponse :

Implémentation d'une solution CSS pure pour un bouton bascule fonctionnel est un défi. Une approche alternative consiste à utiliser une case à cocher stylisée à l'aide de CSS et complétée par JavaScript.

Implémentation de jQuery :

La solution recommandée implique une simple fonction jQuery et deux images d'arrière-plan pour désignent les différents états des boutons. Voici un exemple :

<code class="javascript">$(document).ready(function() {
  $('a#button').click(function() {
    $(this).toggleClass("down");
  });
});</code>

<code class="css">a {
  background: #ccc;
  cursor: pointer;
  border-top: solid 2px #eaeaea;
  border-left: solid 2px #eaeaea;
  border-bottom: solid 2px #777;
  border-right: solid 2px #777;
  padding: 5px 5px;
}

a.down {
  background: #bbb;
  border-top: solid 2px #777;
  border-left: solid 2px #777;
  border-bottom: solid 2px #eaeaea;
  border-right: solid 2px #eaeaea;
}</code>

<code class="html"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="button" title="button">Press Me</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!