Bagaimana untuk Mencipta Kesan seperti Butang dengan Perubahan Gaya pada Keluaran dalam CSS?

Pemilih Butang Ditekan

Dalam CSS, anda boleh menggunakan :kelas pseudo aktif untuk menggayakan elemen yang sedang diklik dan ditahan. Walau bagaimanapun, tingkah laku ini tidak sesuai untuk butang, kerana gaya butang hanya akan berubah semasa ia ditekan.

Untuk mencapai kesan yang diingini apabila butang menukar gaya selepas ia ditekan dan dilepaskan, anda boleh menggunakan tag bukannya butang:

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>

Kod ini mencipta pautan yang berkelakuan seperti butang. Apabila pautan diklik, gayanya bertukar kepada hijau. Kemudian, apabila butang tetikus dilepaskan, gaya pautan bertukar kepada merah.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Kesan seperti Butang dengan Perubahan Gaya pada Keluaran dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!