Cara Membuat Efek Hover pada Menu

16/09/2018    Risman Hakim    1051     Website

Cara Membuat Efek Hover pada Menu - Hover pada CSS merupakan suatu properti CSS yang dapat kita manfaatkan untuk membuat suatu efek yang sangat beragam, hover bisa kita terapkan dan bisa dikombinasikan pada hampir semua elemen HTML. Contoh sederhana penerapan hover yang sering kita jumpai adalah pada gambar, elemen button, menu. Nah, pada kesempatan kali ini saya akan bagikan tutorial efek hover mengenai bagaimana Cara Membuat Efek Hover pada Menu. Buat kalian yang ingin membuat efek hover tidak ada salahnya untuk mencoba tutorial berikut ini.

Langkah 1 : Cara Membuat Efek Hover pada Menu

Baik, langsung saja kita mulai praktek membuat efek hover menu dengan membuat struktur HTML sebagai langkah awalnya, dan membuat list menu seperti berikut ini.

<body>
    <menu>
      <ul>
        <li><a href="#">home</a></li>
        <li><a href="#">products</a></li>
        <li><a href="#">services</a></li>
        <li><a href="#">contact</a></li>
      </ul>
    </menu>
</body>

Langkah 2 : Cara Membuat Efek Hover pada Menu

Langkah berikutnya setelah membuat struktur HTML adalah mendesain list menu, seperti warna, layout dan juga tentunya efek hover menu. Untuk itu silahkan kalian ketikan sintak CSS berikut ini.

@import url('https://fonts.googleapis.com/css?family=Ubuntu');
body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1B1464;
}
menu ul {
    list-style-type: none;
}
menu li {
    width: 8em;
    height: 2em;
    font-size: 25px;
    color: #FFC312;
    border-left: 0.08em solid;
    position: relative;
    margin-top: 0.8em;
    cursor: pointer;
    border-radius: 30px 30px;
}
menu li::before,
menu li::after {
    content: '';
    position: absolute;
    width: inherit;
    border-left: 0.1em solid;
    margin-left: -2px;
    z-index: -1;
}
menu li::before {
    height: 80%;
    top: 10%;
    left: -0.3em;
    filter: brightness(0.8);
    border-radius: 25px 25px;
}
menu li::after {
    height: 60%;
    top: 20%;
    left: -0.57em;
    filter: brightness(0.6);
    border-radius: 25px 25px;
}
menu li a {
    text-decoration: none;
    height: 92%;
    border: 0.08em solid #E91E63;
    background-color: #1B1464;
    display: flex;
    color: #FFC312;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    text-transform: capitalize;
    transform: translateX(-0.65em);
    transition: 0.5s;
    border-radius: 30px 30px;
    font-family: 'Ubuntu', sans-serif;
}
menu li:hover a {
    transform: translateX(0.15em);
}

Setelah semua sintak CSS dan HTML telah diketikan, selanjutnya simpan filenya kemudian kalian bisa membuka hasil akhirnya pada browser masing - masing.

Baik, cukup sekian tutorial tentang efek hover, semoga tutorial Cara Membuat Efek Hover pada Menu ini bisa bermanfaat dan selamat mencoba :)

Web Design, HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More