Hallo sobat program, bertemu lagi dengan saya Rizal dan masih diwebsite dumetschool yang sangat bermanfaat ini. Pada kesempatan kali ini saya akan memberikan tips dan tutorial dalam membuat hover background. Maka judul pembahasan kali ini saya berikan judul Cara Membuat Hover Background-color dengan HTML CSS.

Hal pertama yang terbenak dalam hati dan fikiran saya adalah saat saya ingin menghover sebuat text yang sudah saya modifikasi menjadi sebuah tombol button namun disitu munculah perasaan ingin yang dihover itu adalah sebuah background-color dan setelah saya searching sana sini akhirnya dapat pencerahan dari codepen.io dalam membuatnya.

Oke tanpa basa basi lagi mari langsung saja kita mulai untuk mencoba Cara Membuat Hover Background-color dengan HTML CSS. Nantinya disini kita memanfaatkan pseudo element serta animation pada CSS.

Langsung saja langkah pertama jalankan/run text-editornya lalu kemudian ketiklah script HTML seperti pada contoh dibawah ini :

Langkah selanjutnya, silahkan ketik script CSS nya seperti pada contoh dibawah ini :

Jika sudah kedua script diatas maka langkah berikutnya silahkan teman-teman simpan dan coba dijalankan dibrowser yang teman-teman gunakan.

Kalau berhasil maka hasilnya akan sesuai seperti pada contoh gambar dibawah ini :

Cara Membuat Hover Background-color dengan HTML CSS

Dari hasil diatas itu saya membuat ketika cursor mendekati objek maka animasi background warna dari kanan ke kiri akan dijalankan, kurang lebihnya seperti itu hehe.

Oke kalau begitu cukup sekian dipembahasan kali ini tentang Cara Membuat Hover Background-color dengan HTML CSS. Semoga dapat bermanfaat dan sampai bertemu dipembahasan selanjutnya.

TERIMA KASIH