Kali ini kenny akan membagikan kode untuk membuat tombol dengan gaya animasi hanya dengan CSS dan HTML. Kode kali ini lumayan gampang untuk pemula pun bisa di terapkan di blogger.
Tombol animasi hover adalah saat kursor melakukan hover ( kursor berada di suatu tempat bagian website ) akan menghasilkan efek tertentu.
Tombol hover animasi ini bisa kalian gunakan untuk blogger, wordpress atau sekedar pembelajaran saja. Tetapi kenny kali ini hanya akan memberikan untuk blogger saja.
Baca Juga: Membuat Download Box Anime
Efek yang kenny gunakan kali ini sederhana saja. Berikut kode HTML dan CSSnya
<a href="#">
<input type="button" class="tombol" value="DOWNLOAD"></input>
</a>
Ubah tanda # diatas dengan link kalian, dan ubah tulisan DOWNLOAD sesuai kenginan kalian.
<style>
.tombol{ width:150px; height:50px; border:solid 5px #39e039; border-radius:0px; margin:2px 2px 2px 2px; padding:2px 2px 2px 2px; color:#000000; background-color:#b0afc3; font:20px bold arial Black; transition:2s; duration:2s; }
.tombol:hover{ border-radius:10px;color:#ffffff; background-color:#2196F3; transition:2s; duration:2s; border:dotted 5px #fff; }
</style>
Jika ingin memasang di blogger letakkan CSS diatas sebelum tag /head
Memang tampilannya sederhana tetapi tetap menarik untuk sebuah website download mp3, video, ataupun buku.
Terimakasih.