Navbar Hover Effect Using css

Navbar Hover Effect using HTML & CSS

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.

50+ HTML, CSS & JavaScript Projects With Source Code

Code bySasha
Project DownloadLink Available Below
Language usedHTML and CSS
External link / DependenciesYES
ResponsiveYES
Navbar Hover Effect Table

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>

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.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Here is the Output with only html code!

Navbar Hover Effect using HTML & CSS
Navbar Hover Effect using HTML Code Preview

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

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.

Restaurant Website Using HTML and CSS

Final Output

Navbar Hover Effect using HTML & CSS

Navbar Hover Effect using HTML & CSS

Navbar Hover Effect using HTML & CSS
Navbar Hover Effect using HTML & CSS

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.

Build Multiple Choice Quiz App With HTML ,CSS and 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

Which code editor do you use for this Navbar Hover Effect coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

YES! this is a responsive project

Do you use any external links to create this project?

YES!



Tags: , ,

Leave a Reply