如何使用 HTML 和 CSS 建立具有推送和彈出效果的切換按鈕？

在HTML 和CSS 中建立切換按鈕

問題：

問題：

如何創建🎜>使用CSS 的切換按鈕，點擊時保持壓入狀態，再次點擊時彈出？

答案：

為功能切換按鈕實現純 CSS 解決方案具有挑戰性。另一種方法是利用使用 CSS 設計樣式並輔以 JavaScript 的複選框。

jQuery 實作：

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

建議的解決方案包括一個簡單的 jQuery 函數和兩個背景圖像表示不同的按鈕狀態。這是一個範例：

以上是如何使用 HTML 和 CSS 建立具有推送和彈出效果的切換按鈕？的詳細內容。更多資訊請關注PHP中文網其他相關文章！