You are currently viewing Navbar Hover Effect using HTML & 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.

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

 

Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here

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

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

Leave a Reply