Bagaimana untuk menggayakan butang menggunakan CSS

CSS ialah bahasa yang digunakan untuk penggayaan halaman web Ia boleh mencapai banyak kesan menarik, termasuk butang penggayaan. Dalam artikel ini, kami akan membincangkan cara menggayakan butang menggunakan CSS.

Membuat butang dalam HTML

Mula-mula, buat butang dalam halaman HTML, seperti yang ditunjukkan di bawah:

<button>我是一个按钮</button>

Di sini, teg <button> HTML ialah digunakan untuk mencipta butang.

Tetapkan gaya asas butang

Seterusnya, kita boleh menggunakan CSS untuk menetapkan gaya asas untuk butang, termasuk saiz, warna, fon, jidar, dsb.

button {
  font-size: 16px;
  padding: 10px 20px;
  background-color: #3f51b5;
  color: #fff;
  border: none;
  border-radius: 5px;
}

Kod ini akan menetapkan saiz fon semua butang kepada 16 piksel, dan menetapkan padding kepada 10 piksel atas dan bawah serta 20 piksel kiri dan kanan. Warna latar belakang butang ialah #3f51b5 (biru tua) dan warna latar depannya berwarna putih. Butang tidak mempunyai sempadan dan jejari sudut 5 piksel.

Kesan tuding

Kami juga boleh menambah kesan tuding pada butang. Sebagai contoh, apabila pengguna menuding tetikus di atas butang, warna latar belakang butang berubah kepada biru muda.

button:hover {
  background-color: #2196f3;
}

Aktifkan kesan

Apabila butang diklik, kita boleh menambah kesan pengaktifan, seperti menukar warna latar belakang butang:

button:active {
  background-color: #1e88e5;
}

Lumpuhkan kesan

Apabila butang dilumpuhkan, kita boleh menukar rupa butang, seperti menukar warna teks dan warna latar belakang, untuk menjadikan butang kelihatan dilumpuhkan.

button:disabled {
  background-color: #ccc;
  color: #999;
  cursor: not-allowed;
}

Kod ini menetapkan warna latar belakang butang kepada kelabu, warna teks kepada kelabu gelap dan gaya penunjuk kepada simbol terlarang.

Kesimpulan

Dalam halaman web, butang adalah elemen yang sangat biasa, dan banyak kesan menarik boleh dicapai melalui CSS. Artikel ini memperkenalkan cara menggunakan CSS untuk menetapkan gaya asas, kesan tuding, kesan pengaktifan dan kesan penyahaktifan butang. Dengan petua ini, anda boleh menambah banyak elemen dinamik yang menarik pada tapak web anda dan meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimana untuk menggayakan butang menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!