Floating Glass Navbar

Live Preview
<nav class="glass flex items-center gap-2 p-2 rounded-full px-6 shadow-2xl">
        <a href="#" class="px-4 py-2 rounded-full bg-white text-indigo-600 font-bold shadow-sm">Home</a>
        <a href="#" class="px-4 py-2 rounded-full text-slate-600 hover:bg-white/50">Services</a>
        <a href="#" class="px-4 py-2 rounded-full text-slate-600 hover:bg-white/50">Contact</a>
    </nav>
    <script>
        document.querySelectorAll('button').forEach(btn => {
            btn.addEventListener('mousedown', function () { this.classList.add('scale-95'); });
            btn.addEventListener('mouseup', function () { this.classList.remove('scale-95'); });
        });
    </script>

Related components

More items from the merged UI library.

View all