CSS でリリース時にスタイルが変更されるボタンのような効果を作成する方法

押されたボタン セレクター

CSS では、:active 疑似クラスを使用して、現在クリックされ保持されている要素のスタイルを設定できます。ただし、ボタンのスタイルは押している間だけ変更されるため、この動作はボタンにとっては理想的ではありません。

ボタンを押して放した後にボタンのスタイルを変更するという望ましい効果を実現するには、 ボタンの代わりにタグ:

CSS:

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

HTML:

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

このコードは、ボタンのように動作するリンクを作成します。リンクをクリックすると、そのスタイルが緑色に変わります。その後、マウス ボタンを放すと、リンクのスタイルが赤に変わります。

以上がCSS でリリース時にスタイルが変更されるボタンのような効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。