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:

Klik saya

Kod di atas menetapkan warna latar belakang butang kepada merah.

2. Melalui helaian gaya CSS

, anda boleh menentukan gaya CSS dalam fail luaran dan memautkan fail ke dokumen HTML. Contohnya, cipta fail helaian gaya button.css dengan kandungan berikut:

.butang{

background-color:#FF0000;

Salin selepas log masuk

}

Rujuk fail helaian gaya dalam dokumen HTML dan tambah butang Atribut kelas ditetapkan kepada butang, contohnya:

Klik me

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;

Salin selepas log masuk

}

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!