Membuat Hover dengan Rounded pada CSS3

Website yang akan sering dikunjungi oleh user adalah website yang jelas isi kontenya dan tentu saja jelas navigasinya. Navigasi yang baik akan membuat user yang mengunjungi menjadi paham akan struktur website, tidak bingung harus kemana saat ingin mencari informasi. Begitu pentingnya navigasi dalam sebuah website. Jika navigasi buruk akan berdampak pada jumlah visitor website tersebut. Karena sudah jelas, tidak akan membuat user betah berlama-lama pada website yang buruk strukturnya.

Nah pada artikel kali ini kita akan mencoba membuat navigasi terlihat menarik, yaitu membuat hover dengan rounded pada CSS3. Bagi yang belum tahu hover adalah terjadinya perubahan pada objek yang disorot oleh mouse. Pada artikel ini kita akan membuat efek melingkar pada menu pada saat disorot oleh mouse kalian dengan fitur dari CSS3. Tentu sudah bukan rahasia umum lagi bahwa CSS3 telah memberikan begitu banyak perubahan pada fitur-fitur css. Jika dulu ingin membuat menu melingkar harus diedit pada photoshop menjadi sebuah format gambar. Sekarang kalian bisa membuatnya dengan code CSS.

Oke langsung saja kita mulai prakteknya, kalian bisa ikuti contoh code dibawah ini.

round.html

Setelah disimpan kalian bisa lihat pada browser. Jika berhasil maka tampilanya akan seperti ini.

Kalian bisa coba untuk mengarahkan mouse kalian kesalah satu menu. Akan terjadi perubahan pada box merah menjadi lingkarang seperti gambar dibawah ini.

Hal ini terjadi pada fungsi css hover yang memberikan nilai border-radius. Sehingga pada saat mouse mengarah pada menu, akan terjadi perubahan dari kotak menjadi lekukan pada ujung kotak sebesar 20px.

Dan ada efek tambahan yang kalian bisa lihat sendiri hasilnya. Jika kalian mengarahkan mouse akan ada efek delay pada saat terjadi perubahan. Hal tersebut karena fungsi dari transition yang diberi nilai sebanyak 0.4 detik. Mudah bukan ?

Oke sekian pembahasan mengenai cara membuat hover dengan rounded pada CSS3. Semoga bermanfaat.