Maison > Article > interface Web > 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!