Animated Navigation Bar in HTML and CSS

Hey, developers welcome to Day 10 of our 90Days 90Projects challenge. And in Day 10 we are going to create a Navbar with a hover effect using HTML and CSS.

So to run the code you just need to copy the HTML and CSS code and run it into your code Editor. 

Preview

our team page design html css, our team page template,our team html template free, our team page html template html

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title> Navbar Hover Effect </title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="navbar">
        <h2>Geeks Help</h2>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
    <!-- Main Section for the content -->
    <main>
        <h2>Main Content Goes Here</h2>
    </main>

    <!-- Navbar Hover Effect created by raju_webdev -->
</body>
</html>


CSS Code

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    width: 100%;
    height: 100vh;
    background-color: rgb(254, 254, 254);
}

.navbar {
    width: 100%;
    padding: 3rem 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 4rem;
    background: rgb(26, 25, 25);
}

.navbar h2 {
    color: white;
}

ul {
    display: flex;
}

li {
    list-style: none;
}

ul li a {
    text-decoration: none;
    padding: 5px 1rem;
    margin: 0 10px;
    color: rgb(232, 228, 102);
    position: relative;
}

ul li a::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    border-top: 2px solid rgb(232, 228, 102);
    border-left: 2px solid rgb(232, 228, 102);
    transition: all .4s;
}

ul li a::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    box-sizing: border-box;
    border-bottom: 2px solid rgb(232, 228, 102);
    border-right: 2px solid rgb(232, 228, 102);
    transition: all .4s;
}

ul li a:hover:after,
ul li a:hover::before {
    content: '';
    width: 10%;
    height: 20%;
    transform: rotate(360deg);
}

Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days 90Projects Page- Visit Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad