Membuat Menu Hover Sederhana Part 1

Membuat hover menu yang keren tidak perlu menguasai jquery ataupun teknik animasi yang kompleks. Cukup dengan css yang sederhana dapat membuat efek hover yang menarik dimata pengunjung.  Efek menu hover yang akan dibahas kali ini merupakan efek hover yang sederhana. Dengan menggunakan teknik border dan transisi sudah bisa membuat hover interaktif.

Sebagai latihan silakan buat dokumen HTML seperti berikut :

Selanjutnya buatlah style seperti berikut :

Coba perhatikan property border pada class link dan hovernya. Ketika dilakukan hover border berubah warna menjadi putih dengan nilai padding atas dan bawah 6px.

Selamat Mencoba.

DEMO Download