HTML と CSS を使用してプッシュインおよびポップアウト効果のあるトグル ボタンを作成する方法

HTML と CSS でトグル ボタンを作成する

質問:

どうすれば作成できますかクリックすると押し込まれたままになり、再度クリックすると飛び出す CSS を使用した HTML のトグル ボタン?

回答:

機能的なトグル ボタン用の純粋な CSS ソリューションの実装挑戦的です。別のアプローチは、CSS を使用してスタイル設定され、JavaScript で補足されたチェックボックスを利用することです。

jQuery 実装:

推奨される解決策には、単純な jQuery 関数と 2 つの背景画像が含まれます。はさまざまなボタンの状態を示します。以下に例を示します:

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

以上がHTML と CSS を使用してプッシュインおよびポップアウト効果のあるトグル ボタンを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。