Bagaimana untuk Mencapai Perubahan Gaya Butang Berterusan pada Klik?

Pemilih Butang Ditekan

Masalah:

Anda menghadapi senario yang anda ingin ubah suai penampilan butang apabila ia ditekan untuk mencipta maklum balas visual yang ketara. Anda telah cuba menggunakan kelas pseudo :active, tetapi perubahan gaya hanya berlaku apabila anda mengklik dan menahan butang.

Jawapan:

Sementara :active pseudo-class mungkin kelihatan seperti pilihan yang sesuai, ia direka khusus untuk menggayakan elemen semasa ia sedang ditekan secara aktif. Untuk mencapai kesan yang anda inginkan, pendekatan alternatif disyorkan.

Pertimbangkan untuk menggunakan elemen penambat bukannya unsur. Ini mungkin tidak sejajar dengan keperluan awal anda, tetapi ia membuka kemungkinan tambahan jika anda tidak dapat mencari penyelesaian langsung menggunakan :

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