Navbar Hover Effect Using Html And Css | Hover Effect Navbar

Table of Contents

Navbar Hover Effect Using Html And Css | Hover Effect Navbar

In this article, we create a simple navbar and give a perfect hover effect. We create designs like navbar tab style and then style using css. So we use only html and css for this navbar hover effect. So let’s start with html.

Html Code Section

<!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>

This is our html code, we use html boilerplate code, and some ul/li tag to create the navbar. We use font awesome CDN to show icons in the html code section, then we style the navbar with css.

Here is the Output with only html code!

Navbar Hover Effect Using Html

Css Code

@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);
    }
}

So this whole code 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.

Quiz Project Using Javascript

Final Output

Navbar Hover Effect Using css

Navbar Hover Effect Using css

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

Quiz Project Using Javascript

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

Share on:

Leave a Comment