Hallo teman-teman, berjumpa kembali dengan saya Muhamad Rizal Hidayat (Murihat). Masih seperti biasa diwebsite dumetschool ini banyak sekali artikel yang bermanfaat dalam memberikan tutorial atau tips dan trik seputar desain website dan semoga teman-teman dapat dengan mudah dan semangat dalam mempelajari ilmu seputar desain website.

Pada Kesempatan kali ini saya akan membahas tentang Cara Membuat Button Outline Hover dengan CSS. Sebelum kita mulai, saya harapkan teman-teman sudah terlebih dahulu mengenal tentang HTML dan CSS supaya dipembahasan kali ini dapat dengan mudah dipahami. Dipembahasan kali ini mungkin sudah banyak ya teman-teman, jika sering search/baca-baca di google tentang button hover. Namun kali ini saya membuat button outline hover yaitu ketika mouse mengarah kebutton maka munculah garis luar pada button.

Oke langsung saja teman-teman, Pertama-tama jalankan/run text-editor yang teman-teman gunakan dan kemudian ketiklah/copy script HTML dibawah ini :

Jika sudah, langkah selanjutnya teman-teman ketik/copy kembali script CSS dibawah ini :

Maka hasil dari kedua script diatas menjadi seperti dibawah ini :

Jika sudah seperti diatas, silahkan teman-teman simpan dan silahkan teman-teman jalankan dibrowser yang teman-teman gunakan. Jika benar maka hasilnya akan terlihat seperti pada gambar dibawah ini :

Cara Membuat Button Outline Hover dengan CSS

Bagaimana teman-teman ? cukup mudah ya dalam Cara Membuat Button Outline Hover dengan CSS. untuk pengembangannya silahkan teman-teman modifikasi sendiri sesuai selera teman-teman dengan acuan seperti diatas.

Oke kalau begitu cukup sekian pembahasan kali ini tentang Cara Membuat Button Outline Hover dengan CSS semoga dapat bermanfaat buat teman-teman dan sampai bertemu di pembahasan selanjutnya.

Terimakasih