Tombol adalah bagian mendasar dari HTML yang melakukan berbagai tugas. Dengan menggunakan CSS, Anda dapat mendesain dan menata tombol. Ada berbagai cara untuk mendesain tombol, seperti mewarnai tombol, mengubah ukuran, mengarahkan kursor, dan banyak lagi.

Pada artikel ini, pertama, kita akan belajar cara membuat tombol, lalu mengubah warna tombol saat dilayangkan.

Mari kita mulai!

Bagaimana Mengubah Warna Tombol saat Arahkan di CSS?

Di CSS, “ : arahkan ” digunakan untuk mengubah warna tombol pada hover. “ : arahkan ” adalah kelas semu yang memungkinkan perubahan perilaku elemen HTML saat mouse di atasnya, seperti elemen seperti tautan, tombol, gambar, dan banyak lagi.

Sintaks dari : arahkan disediakan di bawah ini.

Sintaksis

Dalam sintaks yang disediakan di atas, “ sebuah ” mengacu pada elemen HTML di mana “ : arahkan ” diterapkan. Di CSS, Anda dapat mengatur perilaku hover dari elemen HTML, seperti warna, ukuran, dan lebar elemen.

Langkah 1: Buat Div dan Tombol

Dalam HTML, pertama, kita akan membuat div dan menambahkan heading dengan

dan tombol menggunakan tag. Di sini, kami akan menetapkan nama kelas tombol sebagai “ btn ” dan teks tombol sebagai “ Arahkan pada saya ”.

HTML

Hasil dari kode yang disebutkan di atas diberikan di bawah ini. Anda dapat melihat bahwa judul dan tombol dibuat:

Sekarang, pindah ke CSS untuk menata div dan tombol satu per satu.

Langkah 2: Tombol Gaya dan Div

Pertama, kita akan menata wadah yang dibuat dengan menggunakan “ div ”. Kemudian, kita akan mengatur ketinggian div sebagai “ 250px ” dan warna latar belakang sebagai “ rgb(199, 173, 192) ”. Kami juga akan menggunakan properti perbatasan untuk menyesuaikan batas div, lebar sebagai “ 5px ”, gaya sebagai “ padat ”, dan warnai sebagai “ rgb(40, 2, 55) ”.

CSS

Output yang diberikan di bawah ini menunjukkan bahwa gaya yang ditambahkan berhasil diterapkan pada div:

Pada langkah selanjutnya, kita akan menata tombol menggunakan CSS.

Sekarang, kita akan menata tombol menggunakan “ .btn ” untuk mengakses tombol yang dibuat dalam HTML. Setelah itu, kita akan menyembunyikan batas tombol dengan mengatur “ tidak ada ” sebagai nilai properti perbatasan. Setelah itu, kita akan mengatur ukuran font menjadi “ besar ” dan bantalan tombol ke “ 10px ” untuk membuat spasi antara konten tombol dan batas tombol. Pada akhirnya, kita akan mengatur warna teks dan latar belakang sebagai “ rgb(50, 0, 54) ' dan ' rgb(193, 54, 135) ”:

Tombol sekarang ditata:

Selanjutnya, kami akan menerapkan “ : arahkan ” untuk mengubah warna tombol saat mengarahkan kursor.

Langkah 3: Ubah Warna Tombol pada Arahkan

Sekarang, kita akan menggunakan “ .btn:hover ” untuk menautkan tombol dengan elemen kelas semu hover. Akibatnya, hover akan diterapkan ke tombol. Selanjutnya, kita akan mengatur warna latar belakang dan warna teks tombol sebagai “ rgb(66, 2, 41) ' dan ' rgb(119, 255, 0) ”. Warna-warna ini akan diterapkan ke tombol saat mouse di atasnya:

Pada output yang disediakan di bawah ini, Anda dapat melihat bahwa, warna tombol berubah ketika mouse melayang di atasnya:

Itu dia! Kami telah menjelaskan metode untuk mengubah warna tombol di hover menggunakan CSS.

Kesimpulan

Untuk mengubah warna tombol saat mengarahkan kursor, tombol “ : arahkan ” elemen pseudo-class digunakan. Untuk melakukannya, tautkan tombol dengan :hover dan atur warna tombol, yang akan berubah saat kita mengarahkan kursor ke atasnya. Pada artikel ini, kami telah menjelaskan metode untuk mengubah warna tombol di hover dan memberikan contohnya.