Bagaimana Saya Boleh Menggelapkan Butang pada Hover Menggunakan CSS?

Meningkatkan Penggelapan Butang dengan CSS

Apabila menuding pada butang, adalah perkara biasa untuk meningkatkan kesan visualnya dengan menggelapkan sedikit warna latar belakangnya. Walaupun menentukan secara manual kod hex yang lebih gelap boleh dilakukan, ia boleh membosankan.

Masukkan Teknik Bayangan CSS

Alternatif yang mudah melibatkan lapisan imej latar belakang gelap pada butang anda menggunakan imej latar belakang. Pendekatan ini mengekalkan warna teks butang sambil hanya menjejaskan latar belakang:

.button {
  display: inline-block;
  color: #fff;
  padding: 10px 20px;
  font-size: 20px;
  background-color: red;
}

.button:hover {
  background-image: linear-gradient(rgb(0 0 0/40%) 0 0);
}

Ini menambah kecerunan linear hitam kelegapan 40% di atas butang, menggelapkan dengan berkesan pada tuding. Kod yang terhasil:

<div class="button"> some text </div>
<div class="button">

Jadi, lain kali anda perlu menggelapkan latar belakang butang pada tuding, terima kebolehan hantaran bayangan CSS untuk penyelesaian yang ringan dan boleh disesuaikan.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Menggelapkan Butang pada Hover Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!