Hallo sobat program, bertemu lagi dengan saya Rizal dan masih diwebsite Dumetschool, Pada kesempatan kali ini kita akan membahas tentang Cara Membuat Button Hover Text dengan HTML CSS. yang nantinya akan membuat hover menjadi sebuah text yang menarik.

Mungkin dipembahasan kali ini sudah cukup banyak ya tentang button hover effect atau yang lainnya, namun disini saya akan mencoba dengan menggunakan text dan sentuhan effect animasi dan pemanfaatan pseudo element. Dan Sebenarnya hanya untuk iseng saja hehe, ya mudah-mudahan bermanfaat dan berguna buat teman-teman.

Cara Membuat Button Hover Text dengan HTML CSS

Oke tanpa basa-basi lagi, mari kita langsung coba membuatnya ya teman-teman, pertama jalankan/run text-editornya kemudian ketiklah script seperti dibawah ini :

Pada kode diatas saya menggunakan tag a untuk link yang nantinya saya design agar menjadi bentuk tombol dan span untuk digunakan saat dihover maka tampil. Oke langkah selanjutnya, tambahkan kode Style CSS nya seperti pada contoh dibawah ini :

Jika sudah, maka hasil dari kedua script diatas menjadi seperti dibawah ini :

Oke, langsung saja coba dijalankan/run dibrowser yang teman-teman gunakan. Jika benar maka hasilnya akan menjadi seperti pada gambar dibawah ini :

Cara Membuat Button Hover Text dengan HTML CSS

Jadi hover text akan tampil ketika cursor mengarah di button tersebut, hehe cukup mudah ya teman-teman ? jadi seperti itu contoh sederhana dalam Cara Membuat Button Hover Text dengan HTML CSS Silahkan di explore lagi ya teman-teman.

Oke kalau begitu cukup sekian pembahasan kali ini tentang Cara Membuat Button Hover Text dengan HTML CSS semoga dapat bermanfaat dan sampai bertemu dipembahasan selanjutnya.

Terimakasih