Navbar UI Dot effect CSS :Hover Animation

Namaste!

Table of Contents

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