デフォルト、ホバー、アクティブ化という 3 つの異なる状態を持つボタンを作成するにはどうすればよいですか?

押されたボタン インジケーター

質問:

状態を視覚的に切り替えるボタンの作成インタラクションはユーザー インターフェイスの便利な機能です。ただし、提供されている CSS は、ボタンがアクティブに押されている間のみボタンのスタイルを変更します。意図された動作は、デフォルト状態、ホバー状態、およびアクティブ化された (押された) 状態の 3 つの異なる状態を持つことです。

答え:

< を使用している間;ボタン> タグでは目的の出力が得られない可能性があります。 タグを使用した別のアプローチを検討する価値があります。タグ。このソリューションは同様の機能を提供し、さらなる柔軟性を提供する可能性があります:

<code class="css">a {
  display: block;
  font-size: 18px;
  border: 2px solid gray;
  border-radius: 100px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

a:active {
  font-size: 18px;
  border: 2px solid green;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}

a:target {
  font-size: 18px;
  border: 2px solid red;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}</code>

<code class="html"><a id="btn" href="#btn">Demo</a></code>

以上がデフォルト、ホバー、アクティブ化という 3 つの異なる状態を持つボタンを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。