Navbar UI Dot effect CSS :Hover Animation

I tried making a cool navbar UI dot effect animation using Html CSS. Mainly the :hover CSS keyword is playing the main role here.

Namaste!

NavBar UI Dot Effect

In this tutorial, I tried for making a cool navbar UI dot effect animation using Html CSS. Mainly the :hover CSS keyword is playing the main role here.

Let’s enjoy, have fun!

NavBar UI Dot Effect Youtube Tutorial

NavBar UI Dot Effect Full Tutorial

NavBar UI Dot Effect Source Code Free Download

To get the navbar UI dot effect source code, Copy below-provided code and replace it with your code files

.html file code

Put below code inside your html file’s <body> Your Code Here </body> tags

These tags are used here : <ul>, <li>, <a>, <span>

<ul>
        <li class="nav-list-item">
            <a href="" class="nav-link">Home</a>
            <span class="nav-dot"></span>
        </li>
        <li class="nav-list-item">
            <a href="" class="nav-link">Blog</a>
            <span class="nav-dot"></span>
        </li>
        <li class="nav-list-item">
            <a href="" class="nav-link">Services</a>
            <span class="nav-dot"></span>
        </li>
        <li class="nav-list-item">
            <a href="" class="nav-link">About</a>
            <span class="nav-dot"></span>
        </li>
        <li class="nav-list-item">
            <a href="" class="nav-link">Contact</a>
            <span class="nav-dot"></span>
        </li>
    </ul>

.css file code

Put below code inside your CSS file’s <style> Your Code Here </style> tags

These classes & Properties are used here: display, background, color, border-radius, :hover, margin

body {
    display: grid;
    justify-content: center;
    height: 100vh;
    align-items: center;
    background: #111d5e;
}

ul {
    list-style: none;
    border: 0.1px solid #ddd;
    padding: 10px 20px;
    border-radius: 10px;
    width: 150px;
    background-color: #fff;
}

ul:hover {
    box-shadow: #0000001a 0px 1px 3px 0px, #0000000f 0px 1px 2px 0px;
}

.nav-list-item {
    letter-spacing: 0.9px;
    font-size: 16px;
    position: relative;
    margin: 8px auto;
}

.nav-link {
    text-decoration: none;
    color: #111d5e;
    font-family: sans-serif;
    font-weight: 600;
}

.nav-dot {
    position: absolute;
    top: 5px;
    right: -5px;
    width: 5px;
    height: 5px;
    background-color: transparent;
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
}

.nav-link:hover {
    color: #1d31a0;
}

.nav-link:hover~.nav-dot {
    background-color: #c70039;
}

Subscribe to Us on YouTube

Just keep exploring the codes, and do something creative with programming code. coding is always fun.

So, have fun! #happycoding #codinghindi

Thank You!

Share your love
Default image
Neeraj Lamba
Articles: 38

Leave a Reply

Your email address will not be published.

I'm not a robot *Captcha loading...

5 Movies that Programmers Should Watch Best Search Engine for Developers – You.com 06 Free Website Hosting Providers for Developers You should Know Learn Programming while playing games learn about Operating systems and OS Structure Design
Secured By miniOrange