-
Pure CSS Animated Bubble Indicator
HTML
CSS
JavaScript
Home
Gallery
Projects
Contact
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