Tombol adalah elemen yang dapat diklik yang digunakan untuk melakukan tindakan tertentu. Menggunakan CSS, Anda dapat mengatur berbagai gaya tombol, salah satunya adalah mengubah warna tombol saat diklik. Warna tombol dapat diatur menggunakan CSS “ :aktif ” kelas semu.
Blog ini akan mengajarkan Anda prosedur yang terkait dengan mengubah warna tombol saat diklik. Untuk ini, pertama, pelajari tentang :active pseudo-class.
Jadi, mari kita mulai!
Apa itu ':aktif' di CSS?
Mengubah warna tombol saat klik di CSS dimungkinkan dengan bantuan ' :aktif ” kelas semu. Dalam HTML, ini menunjukkan elemen yang sedang diaktifkan ketika pengguna mengkliknya. Apalagi saat menggunakan mouse, aktivasi dimulai saat tombol mouse ditekan.
Sintaksis
sebuah : aktif {
warna : hijau ;
}
“ sebuah ” mengacu pada elemen HTML di mana kelas :active akan diterapkan.
Mari kita menuju contoh untuk memahami konsep yang dinyatakan.
Bagaimana Mengubah Warna Tombol pada Klik di CSS?
Untuk mengubah warna tombol saat diklik, pertama, buat tombol di file HTML dan tetapkan nama kelas “ btn ”.
HTML
< tubuh >< tombol kelas = 'btn' > Tombol < / tombol >
< / tubuh >
Selanjutnya, di CSS, atur warna tombol. Untuk melakukannya, kita akan menggunakan “ .btn ” untuk mengakses tombol dan mengatur warna tombol sebagai “ rgb(0, 255, 213) ”.
CSS
.btn {warna latar belakang : rgb ( 0 , 255 , 213 ) ;
}
Setelah itu, terapkan :active pseudo-class pada tombol sebagai “ .btn:aktif ” dan atur warna tombol yang akan ditampilkan dalam status aktif sebagai “ rgb(123, 180, 17) ”:
.btn : aktif {warna latar belakang : rgb ( 123 , 180 , 17 ) ;
}
Ini akan menunjukkan hasil berikut:
Sekarang, mari kita tambahkan heading dengan tag
dan nama kelas tombol “ tombol ”, di dalam tag .
HTML
< tengah >
< h1 > Ubah warna tombol < / h1 >
< tombol kelas = 'tombol' > Klik Saya < / tombol >
< / tengah >
Selanjutnya, kita akan pindah ke CSS dan memberi style pada tombol dan menerapkan :active di atasnya. Untuk melakukannya, kita akan mengatur gaya perbatasan sebagai “ tidak ada ” dan berikan padding sebagai “ 15px ”. Setelah itu, atur warna teks tombol sebagai “ rgb(50, 0, 54) ” dan latar belakangnya sebagai “ rgb(177, 110, 149) ”, dan radiusnya sebagai “ 15px ”:
.tombol {
berbatasan : tidak ada ;
lapisan : 15px ;
warna : rgb ( lima puluh , 0 , 54 ) ;
warna latar belakang : rgb ( 177 , 110 , 149 ) ;
radius batas : 15px ;
}
Ini akan menunjukkan hasil berikut:
Setelah itu, kita akan menerapkan :active pseudo-class pada tombol sebagai “ .tombol:aktif ” dan atur warna tombol sebagai “ rgb(200, 255, 0) ”:
.tombol : aktif {
warna latar belakang : rgb ( 200 , 255 , 0 ) ;
}
Setelah Anda menerapkan semua kode di atas, buka file HTML dan jalankan untuk melihat hasilnya:
Dari output tersebut dapat diamati ketika tombol diklik warnanya berubah sesuai dengan kode warna RGB yang ditentukan.
Kesimpulan
Untuk mengubah warna tombol pada klik di CSS, tombol “ :aktif ” pseudo-class dapat digunakan. Lebih khusus lagi, ini dapat mewakili elemen tombol saat diaktifkan. Menggunakan kelas ini, Anda dapat mengatur warna tombol yang berbeda ketika mouse mengkliknya. Artikel ini menjelaskan prosedur untuk mengubah warna tombol pada klik di CSS.
HTML
< tengah >< h1 > Ubah warna tombol < / h1 >
< tombol kelas = 'tombol' > Klik Saya < / tombol >
< / tengah >
Selanjutnya, kita akan pindah ke CSS dan memberi style pada tombol dan menerapkan :active di atasnya. Untuk melakukannya, kita akan mengatur gaya perbatasan sebagai “ tidak ada ” dan berikan padding sebagai “ 15px ”. Setelah itu, atur warna teks tombol sebagai “ rgb(50, 0, 54) ” dan latar belakangnya sebagai “ rgb(177, 110, 149) ”, dan radiusnya sebagai “ 15px ”:
.tombol {berbatasan : tidak ada ;
lapisan : 15px ;
warna : rgb ( lima puluh , 0 , 54 ) ;
warna latar belakang : rgb ( 177 , 110 , 149 ) ;
radius batas : 15px ;
}
Ini akan menunjukkan hasil berikut:
Setelah itu, kita akan menerapkan :active pseudo-class pada tombol sebagai “ .tombol:aktif ” dan atur warna tombol sebagai “ rgb(200, 255, 0) ”:
.tombol : aktif {warna latar belakang : rgb ( 200 , 255 , 0 ) ;
}
Setelah Anda menerapkan semua kode di atas, buka file HTML dan jalankan untuk melihat hasilnya:
Dari output tersebut dapat diamati ketika tombol diklik warnanya berubah sesuai dengan kode warna RGB yang ditentukan.
Kesimpulan
Untuk mengubah warna tombol pada klik di CSS, tombol “ :aktif ” pseudo-class dapat digunakan. Lebih khusus lagi, ini dapat mewakili elemen tombol saat diaktifkan. Menggunakan kelas ini, Anda dapat mengatur warna tombol yang berbeda ketika mouse mengkliknya. Artikel ini menjelaskan prosedur untuk mengubah warna tombol pada klik di CSS.