Membuat Animasi Hover Pada Navigasi Menu Menggunakan HTML dan CSS – Pada artikel kali ini kalian akan mempelajari cara membuat animasi hover pada navigasi menu menggunakan HTML dan CSS. Seperti yang kita tahu, Navigasi bar (navigation bar) atau navigasi menu atau biasanya disebut dengan navbar merupakan komponen penting dan ada pada banyak website di dunia. Navigasi menu digunakan sebagai menu yang berisi kumpulan link yang bersifat umum pada suatu website. Dalam kasus ini kita akan membuat menu-menu yang terdiri atas Home, Info, Java, Javascript, dan Kotlin. Simak artikel dan source code dibawah ini untuk membuat animasi hover pada navigasi menu menggunakan HTML dan CSS.
Daftar Isi
Kode CSS
Berikut ini adalah kode CSS untuk membuat animasi hover pada navigasi menu menggunakan HTML dan CSS.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
background: linear-gradient(to right, #0159ab, #3c1053);
}
.top-menu{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.top-menu a{
color: rgb(233, 233, 233);
text-decoration: none;
font-size: 1.5rem;
margin: 20px;
padding: 15px, 30px;
background: rgba(255, 255, 255, 0.1);
position: relative;
transition: all .4s;
}
.top-menu a:hover{
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.24);
}
.top-menu a::before{
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0%;
background: linear-gradient(to top, #0159ab, #3c1053);
z-index: -1;
transition: all .4s;
}
.top-menu a:hover::before{
height: 50%;
}
Kode HTML
Berikut ini adalah kode HTML untuk membuat membuat animasi hover pada navigasi menu menggunakan HTML dan CSS.
<!DOCTYPE html> <html> <head> <TITLE>Efek Hover Pada Navigasi Menu</TITLE> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="top-menu"> <a href="#">Home</a> <a href="#">Info</a> <a href="#">Java</a> <a href="#">Javascript</a> <a href="#">Kotlin</a> </div> </body> </html>
Hasil yang diperoleh
Berikut ini adalah hasil yang diperoleh saat menjalankan source code HTML dan CSS diatas pada browser di komputer atau laptop kalian.
Simak video dibawah ini untuk melihat hasilnya.
Temukan source code HTML dan CSS lainnya hanya di Inpows.
Baca Juga
Membuat Teks dengan Warna Gradien Menggunakan HTML dan CSS
Menyembunyikan Action Bar Pada Android
Konversi Milidetik ke Detik dan Menit di Kotlin
Memahami Read Write dan Menampilkan Gambar Menggunakan OpenCV di Python