Butang ialah elemen boleh klik yang digunakan untuk melakukan tindakan tertentu. Menggunakan CSS, anda boleh menetapkan gaya butang yang berbeza salah satunya ialah menukar warna butang pada klik. Warna butang boleh ditetapkan menggunakan CSS “ : aktif ” pseudo-class.
Blog ini akan mengajar anda prosedur yang berkaitan dengan menukar warna butang pada klik. Untuk ini, pertama sekali, pelajari tentang : kelas pseudo aktif.
Jadi, mari kita mulakan!
Apakah ': aktif' dalam CSS?
Menukar warna butang pada klik dalam CSS boleh dilakukan dengan bantuan ' : aktif ” pseudo-class. Dalam HTML, ia menunjukkan elemen yang sedang diaktifkan apabila pengguna mengklik padanya. Selain itu, apabila menggunakan tetikus, pengaktifan bermula apabila kekunci tetikus ditekan.
Sintaks
a : aktif {
warna : hijau ;
}
“ a ” merujuk kepada elemen HTML di mana kelas :aktif akan digunakan.
Mari menuju ke contoh untuk memahami konsep yang dinyatakan.
Bagaimana untuk Mengubah Warna Butang pada Klik dalam CSS?
Untuk menukar warna butang pada klik, pertama, buat butang dalam fail HTML dan tetapkan nama kelas ' btn ”.
HTML
< badan >< butang kelas = 'btn' > Butang < / butang >
< / badan >
Seterusnya, dalam CSS, tetapkan warna butang. Untuk berbuat demikian, kami akan menggunakan ' .btn ” untuk mengakses butang dan menetapkan warna butang sebagai “ rgb(0, 255, 213) ”.
CSS
.btn {warna latar belakang : rgb ( 0 , 255 , 213 ) ;
}
Selepas itu, gunakan :kelas pseudo aktif pada butang sebagai “ .btn:aktif ” dan tetapkan warna butang yang akan ditunjukkan dalam keadaan aktifnya sebagai “ rgb(123, 180, 17) ”:
.btn : aktif {warna latar belakang : rgb ( 123 , 180 , 17 ) ;
}
Ini akan menunjukkan hasil berikut:
Sekarang, mari tambahkan tajuk dengan tag
dan nama kelas butang ' butang ”, di dalam teg .
HTML
< pusat >
< h1 > Tukar warna butang < / h1 >
< butang kelas = 'butang' > Klik Saya < / butang >
< / pusat >
Seterusnya, kami akan beralih ke CSS dan menggayakan butang dan menggunakan :aktif padanya. Untuk berbuat demikian, kami akan menetapkan gaya sempadan sebagai “ tiada ” dan berikan padding sebagai “ 15px ”. Selepas itu, tetapkan warna teks butang sebagai “ rgb(50, 0, 54) ' dan latar belakangnya sebagai ' rgb(177, 110, 149) ”, dan jejarinya sebagai “ 15px ”:
.butang {
sempadan : tiada ;
padding : 15px ;
warna : rgb ( lima puluh , 0 , 54 ) ;
warna latar belakang : rgb ( 177 , 110 , 149 ) ;
jejari sempadan : 15px ;
}
Ini akan menunjukkan hasil berikut:
Selepas itu, kami akan menggunakan :active pseudo-class pada butang sebagai “ .button:aktif ” dan tetapkan warna butang sebagai “ rgb(200, 255, 0) ”:
.butang : aktif {
warna latar belakang : rgb ( 200 , 255 , 0 ) ;
}
Sebaik sahaja anda melaksanakan semua kod di atas, pergi ke fail HTML dan laksanakannya untuk menyemak hasilnya:
Daripada output, ia boleh diperhatikan apabila butang diklik warnanya berubah mengikut kod warna RGB yang ditetapkan.
Kesimpulan
Untuk menukar warna butang pada klik dalam CSS, “ : aktif ” pseudo-class boleh digunakan. Lebih khusus lagi, ia boleh mewakili elemen butang apabila ia diaktifkan. Menggunakan kelas ini, anda boleh menetapkan warna butang yang berbeza apabila tetikus mengklik padanya. Artikel ini menerangkan prosedur untuk menukar warna butang pada klik dalam CSS.
HTML
< pusat >< h1 > Tukar warna butang < / h1 >
< butang kelas = 'butang' > Klik Saya < / butang >
< / pusat >
Seterusnya, kami akan beralih ke CSS dan menggayakan butang dan menggunakan :aktif padanya. Untuk berbuat demikian, kami akan menetapkan gaya sempadan sebagai “ tiada ” dan berikan padding sebagai “ 15px ”. Selepas itu, tetapkan warna teks butang sebagai “ rgb(50, 0, 54) ' dan latar belakangnya sebagai ' rgb(177, 110, 149) ”, dan jejarinya sebagai “ 15px ”:
.butang {sempadan : tiada ;
padding : 15px ;
warna : rgb ( lima puluh , 0 , 54 ) ;
warna latar belakang : rgb ( 177 , 110 , 149 ) ;
jejari sempadan : 15px ;
}
Ini akan menunjukkan hasil berikut:
Selepas itu, kami akan menggunakan :active pseudo-class pada butang sebagai “ .button:aktif ” dan tetapkan warna butang sebagai “ rgb(200, 255, 0) ”:
.butang : aktif {warna latar belakang : rgb ( 200 , 255 , 0 ) ;
}
Sebaik sahaja anda melaksanakan semua kod di atas, pergi ke fail HTML dan laksanakannya untuk menyemak hasilnya:
Daripada output, ia boleh diperhatikan apabila butang diklik warnanya berubah mengikut kod warna RGB yang ditetapkan.
Kesimpulan
Untuk menukar warna butang pada klik dalam CSS, “ : aktif ” pseudo-class boleh digunakan. Lebih khusus lagi, ia boleh mewakili elemen butang apabila ia diaktifkan. Menggunakan kelas ini, anda boleh menetapkan warna butang yang berbeza apabila tetikus mengklik padanya. Artikel ini menerangkan prosedur untuk menukar warna butang pada klik dalam CSS.