Wie erstelle ich mit HTML und CSS eine Umschalttaste mit Push-In- und Pop-Out-Effekt?

Erstellen einer Umschaltschaltfläche in HTML und CSS

Frage:

Wie kann ich erstellen eine Umschalttaste in HTML mit CSS, die beim Klicken eingedrückt bleibt und bei erneutem Klicken herausspringt?

Antwort:

Implementierung einer reinen CSS-Lösung für eine funktionale Umschalttaste ist herausfordernd. Ein alternativer Ansatz besteht darin, ein mit CSS gestaltetes und mit JavaScript ergänztes Kontrollkästchen zu verwenden.

jQuery-Implementierung:

Die empfohlene Lösung umfasst eine einfache jQuery-Funktion und zwei Hintergrundbilder dazu bezeichnen die verschiedenen Tastenzustände. Hier ein Beispiel:

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

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit HTML und CSS eine Umschalttaste mit Push-In- und Pop-Out-Effekt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!