-
Pure CSS Animated Bubble Indicator
HTML
CSS
JavaScript
<nav> <a href="#">Home</a> <a href="#">Gallery</a> <a href="#">Projects</a> <a href="#">Contact</a> <div class="bubble"></div> </nav>
nav { display: flex; justify-content: left; gap: 40px; position: relative; margin-top: 50px; } nav a { text-decoration: none; font-size: 20px; color: #222; padding: 10px 15px; position: relative; } nav .bubble { position: absolute; width: 90px; height: 40px; background: #00d9ff; border-radius: 40px; z-index: -1; top: 0; left: -100px; transition: 0.3s ease; } nav a:nth-child(1):hover~.bubble { left: 0px; } nav a:nth-child(2):hover~.bubble { left: 120px; } nav a:nth-child(3):hover~.bubble { left: 255px; } nav a:nth-child(4):hover~.bubble { left: 390px; }
Live Preview
- Pure CSS Animated Bubble Indicator