DEV Community

Codewithrandom Blogs
Codewithrandom Blogs

Posted on

Navbar Hover Effect using HTML & CSS

In this article, we create a Navbar Hover Effect Using HTML and CSS. We create designs like the navbar tab style and then style using Hover Effect Using Css.

So we use only HTML and CSS for this Navbar Hover Effect. So let's start with html Code for creating a baisc Structure Of Navbar.

Html Code For Navbar Hover Effect 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navbar Hover Effect Using Html And Css</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="navbar">
        <li class="list-item"><i class="fa-solid fa-house"></i>
            <span class="list-item-name">Home</span>
        </li>
        <li class="list-item">
            <i class="fa-solid fa-user"></i>
            <span class="list-item-name">Profile</span>
        </li>
        <li class="list-item">
            <i class="fa-solid fa-gear"></i>
            <span class="list-item-name">Settings</span>
        </li>
        <li class="list-item">
            <i class="fa-solid fa-bag-shopping"></i>
            <span class="list-item-name">Bag</span>
        </li>
    </div>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

This is our html code, we use html boilerplate code, and some ul/li tags to create the navbar hover effect. We use font awesome CDN to show icons in the html code section, then we style the Navbar Hover Effect with Css.

CSS Code For Navbar Hover Effect 

@import url(&#34;
https://fonts.googleapis.com/css2?family=Inter:wght@200;
300;
400;
500&amp;
display=swap&#34;
);
 :root {
     --highlight: #5756e6;
}
 * {
     box-sizing: border-box;
}
 body {
     background-color: #a4b1e6;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
     font-family: &#34;
    Inter&#34;
    , sans-serif;
}
 .navbar {
     border-radius: 32px;
     background-color: white;
     display: flex;
     justify-content: space-between;
     width: 100%;
     max-width: 400px;
     box-shadow: 0 14px 28px #8f9cd4, 0 10px 10px #8f9cd4;
}
 .list-item {
     list-style-type: none;
     flex-basis: 100%;
     min-height: 80px;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     color: #555;
     transform: translateY(0);
     transition: transform 0.5s ease, opacity 0.2s ease;
     cursor: pointer;
}
 .list-item-name {
     font-size: 13px;
     font-weight: 500;
     position: absolute;
     transform: translate(0, 50px);
     transition: transform 0.5s ease, opacity 0.2s ease;
     opacity: 0;
}
 .list-item:hover {
     color: var(--highlight);
     transform: translateY(-6px);
}
 .list-item:hover .list-item-name {
     transform: translateY(20px);
     opacity: 1;
}
 @media (max-width: 350px) {
     .navbar {
         flex-direction: column;
         align-items: center;
         max-width: 120px;
         padding-bottom: 20px;
    }
     .list-item {
         flex-basis: auto;
    }
     .list-item:hover .list-item-name {
         transform: translateY(25px);
    }
}
Enter fullscreen mode Exit fullscreen mode

So this whole code is for styling our navbar and we use media query also so our navbar is completely responsive. Now you can see this video and screenshot of the project view.

So we did our Navbar Hover Effect project only using html and css. Hope you like our project if you want more projects click on the home page section and you found 100+ Frontend projects.

if you have any confusion Comment below or you can contact us by filling out our contact us form from the home section.

Code By - Sasha

written by - Codewithrandom

Top comments (0)