css menukar warna butang

Dalam pembangunan web, butang adalah elemen yang sangat diperlukan. Butang boleh menambah interaktiviti pada tapak web atau aplikasi dan meningkatkan pengalaman pengguna. Warna butang juga mempunyai kesan penting terhadap keindahan antara muka keseluruhan dan pengalaman pengendalian pengguna. Dalam artikel ini, kami akan menerangkan cara menukar warna butang menggunakan CSS.

1. Warna CSS

Dalam CSS, warna boleh dinyatakan dalam cara berikut:

1 Kod warna heksadesimal: #RRGGBB, di mana RR, GG , BB mewakili kod warna merah, hijau dan biru masing-masing. Contohnya, #FF0000 mewakili merah, #00FF00 mewakili hijau, #0000FF mewakili biru, #FFFFFF mewakili putih dan #000000 mewakili hitam.

Format 2.RGB: rgb(R, G, B), dengan R, G dan B mewakili nilai warna merah, hijau dan biru masing-masing, antara 0-255. Contohnya, rgb(255, 0, 0) mewakili merah, rgb(0, 255, 0) mewakili hijau dan rgb(0, 0, 255) mewakili biru.

3. Format RGBA: rgba(R, G, B, A), dengan R, G, B mewakili nilai warna merah, hijau dan biru masing-masing, A mewakili ketelusan, antara 0 -1 antara. Sebagai contoh, rgba(255, 0, 0, 0.5) mewakili merah lut sinar.
4. Nama warna: Beberapa nama warna yang dipratentukan ditakrifkan dalam CSS, seperti merah, hijau, biru, putih, hitam, dsb. Anda boleh menggunakan nama ini secara langsung untuk mewakili warna.

2 Tukar warna butang

Menukar warna butang boleh dicapai dalam dua cara berikut:

1

Anda boleh menggunakan atribut gaya dalam teg HTML untuk mentakrifkan gaya CSS, contohnya:

aea040de713cd743ba545355e12cf12bKlik saya929d67108637313ce832cd0d2cfd4168
7a766ea05486930017614b5a53f01815Klik me9ed91f71425ac736fb4fb53b170a4523

Kod di atas menetapkan warna latar belakang butang kepada merah.

Selain menukar warna latar belakang, anda juga boleh menukar warna sempadan dan warna teks butang melalui CSS. Contohnya, helaian gaya berikut menetapkan warna latar belakang butang kepada merah, warna jidar kepada biru dan warna teks kepada putih:

.butang{

background-color:#FF0000;
border:1px solid #00FFFF;
color:#FFFFFF;

}

Melalui kaedah di atas, kita boleh menukar warna butang dengan mudah, dengan itu mencapai pengalaman pengguna yang lebih baik dan reka bentuk antara muka yang lebih cantik.

Atas ialah kandungan terperinci css menukar warna butang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!