Hover.css ialah pustaka CSS3 yang berisi berbagai efek hover yang dapat Anda gunakan pada tombol, logo, gambar dan lainnya. hover.css meyediakan setidaknya lebih dari 40 efek hover yang menarik dan unik.
Diantara efek yang terdapat pada pustaka hover.css ialah efek transform 2D, border transitions, shadow dan glow transitions, efek speech bubbles, dan efek lipatan kertas (page curls). Berikut langkah untuk menggunakan hover.css.
Langkah 1
Terlebih dahulu donwload pustaka hover.css. Kemudian ekstrak file master.zip tersebut. Didalam folder css terdapat file hover.css dan hover-min.css, file inilah yang berisi berbagai macam efek hover yang dapat Anda gunakan. Setiap efek hover diwakili oleh sebuah class CSS. Nantinya apabila Anda ingin menggunakan salah satu efek hover tersebut cukup menuliskan nama class CSS pada elemen yang diinginkan.
Langkah 2
Untuk mencoba menggunakan pustaka hover.css, buatlah sebuah file misal index.html. Kemudian dibagian head HTML tambahkan pustaka hover.css.
<!DOCTYPE html>
<html>
<head>
<link href="css/hover.css" rel="stylesheet" media="all">
</head>
</html>
Kemudian dibagian body buatlah sebuah tombol. Tombol ini akan kita berikan efek grow-rotate.
<!DOCTYPE html>
<html>
<head>
<link href="css/hover.css" rel="stylesheet" media="all">
</head>
<body>
<a href="#" class="button grow-rotate">Kirim</a>
</body>
</html>
Untuk melihat hasilnya, silahkan jalankan file index.html pada web browser Anda.
Bagaimana, apakah efeknya muncul ? Berbagai efek ini dapat Anda ubah dan custom sesuai kebutuhan dan kreativitas Anda. Selamat mencoba.
