Jumpa lagi dengan sobat Jago Coding… Hem.. Kemaren baru aja Saya posting soal Animasi Hover Menu Dengan Css kali ini saya mau share lagi tentang animasi hover tapi kali ini Hover Tombol dengan Css.
Na Loh Apa lagi tuh animasi tombol..!!?? Trus bedanya dengan aniamasi menu hover apa..!! Tenang2, tetep sama kok Cuma bedanya kali ini sebuah tombol yang akan kita buat animasinya.. Emank bisa y Css buat animasi untuk tombol..!!??
Bisa donk dengan versi CSS sekarang yang semakin diperbaharui maka bukan gak mungkin CSS membuat suatu objek menjadi lebih interaktif.. Pokoknya Css 2 jempol d karena POWERFULL bgt..!!
Sebelum kita masuk ke contohnya , animasi hover itu apa sich..!!?? Trus gimana cara buat animasi. Saya jawab y, Animasi Hover adalah : suatu perubahan yang terjadi ketika mouse kita arahkan ke suatu objek. Biar ada sedikit gambaran lihat ilustrasi dibawah ini dlu y..
Gmana ne makin penasaran kan..!!?? Yaudah d biar makin jelas Kita langsung kekodenya aja. Buka Notepad atau text editor lain punya teman2. Terus ketik d kode CSS dibawah ini:
<style>
.tombol{
width:150px;
height:50px;
border:solid 5px green;
border-radius:0px;
margin:2px 2px 2px 2px;
padding:2px 2px 2px 2px;
color:#AB00B9;
background-color:#00BDC9;
font:20px bold arial Black;
transition:2s;
duration:2s;
}
.tombol:hover{
border-radius:10px;
color:#2ECC0D;
background-color:#CF3C0D;
transition:2s;
duration:2s;
border:dotted 5px red;
}
</style>
Kalau udah Kita panggil d objek dibody dengan cara ketik kode dibawah ini tepat diantara kode <body>….</body>
<input type="button" class="tombol" value="DOWNLOAD"></input>
Simpan dengan nama apa aja,misalkan button.html atau button.htm
Setelah itu double klik file button.htmlnya, coba d arahin kursor kearah button(tombol), terjadi perubahan gak dengan tombol..
Nah sesuai dengan kesimpulan gambar diatas tombol akan berubah bentuk selama ketika mouse kita arahkan kearah tombol.. disinilah fungsi :hover yang di tag .tombol:hover.. sebenarnya bukan Cuma :hover ada beberapa lagi seperti :active, :visited, dan :links tapi penjelasan ini akan saya bahas d di tutorial selanjutnya.
Mudah2n tutor ini berguna buat teman, jika masih ada yang belum di pahami tolong dikomen aja y dibawah buat saya kritikan itu penting untuk membangun… dan Jangan lupa kunjungi terus Jagocoding.com yah untuk terus dapatkan tutor terbaru… salam Sobat Jaco..
