How to Create an Animated Navigation Bar with Hover Effects Using Only HTML & CSS

Alizeh Codes July 06, 2025

 Looking to make your website stand out with a stylish, animated navigation bar? In this tutorial, we’ll show you how to create a clean and modern navbar with hover effects using only HTML and CSS – no JavaScript required!

Whether you're a beginner in web development or a frontend enthusiast, this is a fun and easy project to level up your UI design skills.



💡 What You'll Build:

A simple yet professional navigation bar that:

Uses pure CSS for hover animations 

Has a clean layout and modern feel

Works great for portfolios, personal sites, or landing pages



📹 Watch the Video Tutorial

👉 Watch on YouTube



 In this video, we walk you through the full process step-by-step. Perfect for visual learners!



🛠️ Technologies Used:

HTML5 for structure

CSS3 for styling and animations

(No JavaScript needed!)



🧩 Features:

Smooth hover effects using transition, transform, and hover pseudo-classes

Minimalist and elegant design

Customizable colors, fonts, and spacing



🧾 Source Code:

You can find the full source code in the video or copy it directly below:

HTML:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Navigation Menu Bar</title>
    <!-- stylesheet  -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Products</a>
        <a href="#">Services</a>
        <a href="#">Contact</a>
        <span></span>
    </nav>

</body>
</html>

CSS:


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #000;
}
nav{
    position: relative;
    width: 526px;
    height: 50px;
    background-color: #222;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}
nav a{
    position: relative;
    display: inline-block;
    font-size: 1em;
    color: #fff;
    text-decoration: none;
    padding: 0 26px;
    z-index: 1;
}
nav span{
    position: absolute;
    top: 0;
    left: 0;
    width: 95px;
    height: 100%;
    background: linear-gradient(45deg, #2e3192, #1bffff);
    border-radius: 8px;
    transition: .5s ease;
}
nav a:nth-child(1):hover~span{
    left: 0;
}
nav a:nth-child(2):hover~span{
    left: 95px;
}
nav a:nth-child(3):hover~span{
    left: 189px;
    width: 110px;
}
nav a:nth-child(4):hover~span{
    left: 298px;
    width: 115px;
}
nav a:nth-child(5):hover~span{
    left: 413px;
    width: 115px;
}



📌 Final Thoughts:

This animated navbar is a great addition to any website. It's simple, responsive-ready, and gives your site a modern, polished look – all with just HTML and CSS!



📈 Tags:

HTML CSS Navbar WebDesign Frontend HoverEffects NoJS CSSAnimations


Tags:

Post a Comment

0 Comments