Cara Membuat Efek Animasi Hover dengan Hover.css

Posted on

Halo sahabat programmer, jumpa lagi dengan lambecode. Pembahasan kita kali ini adalah Cara Membuat Efek Animasi Hover Pada Element HTML dengan Menggunakan Plugin Hover.css. Dalam dunia pemrograman, kata ataupun sebutan hover sudah sangat umum. Apalagi pada sisi front end website ataupun aplikasi. Bagi seorang desainer UI(User Interface) dari sebuah website, hover merupakan elemen yang sangat penting untuk membuat tampilan menjadi lebih interaktif dan menarik. Apa itu hover? Mengapa sangat penting pada UI sebuah website? Pengertian gampangnya, hover merupakan efek atau animasi yang muncul ketika sebuah elemen html menerima action(aksi) dari mouse ataupun keyboard. Jika website zaman sekarang tidak memiliki animasi hover sama sekali, website tersebut akan dikatakan kudet atau versi lama dari sebuah website. Oleh karena itu, animasi hover  di sini sangat penting untuk mendukung kenyamanan pengguna website. Untuk lebih jelasnya, ikuti tutorial Cara Membuat Efek Animasi Hover dengan Hover.css berikut ini

Hover.css

Hover.css merupakan plugin css dengan basic engine CSS3 yang dapat diaplikasikan pada elemen HTML. Plug in ini menyediakan animasi hover yang menarik dan sangat mudah untuk digunakan oleh pemula ataupun yang sudah mahir dalam membuat custom css. Yang membuat hover.css sangat mudah karena cara menggunakannya hanya tinggal plug n play(tinggal pasang class css dan langsung jalan). Ada banyak efek animasi yang sudah disediakan oleh hover.css. Dimulai dari animasi yang simpel sampai yang rumit tersedia, tergantung digunakan untuk website seperti apa kebutuhannya.

Instalasi Hover.css

  • NPM

  • Bower

  • CDN

  • Offline Installer, download di sini

 

Cara Menggunakan Hover.css

Cara menggunakan hover. css sangat mudah sekali. Hanya dengan memasukkan class yang sudah disediakan hover.css pada elemen HTML. Namun sebelum itu, anda harus memasukkan cssnya terlebih dahulu ke dalam file index.

Untuk lebih jelasnya, perhatikan demo berikut ini.

See the Pen BvPRXj by b1em8in (@b1em8in) on CodePen.

Untuk melihat nama class, anda dapat membongkar css yang telah disediakan atau dengan mengakses langsung Hover.css

Leave a Reply

Your email address will not be published. Required fields are marked *