Hover Animated Navbar

Remove the bg-black in the outer div when using it. Hovering the button and each item in the navbar has a fun animation.

This tailwind example is contributed by Coastal UI, on 22-Nov-2024. Component is made with Tailwind v3.4. It is responsive.

Navigations Navbar

Author Coastal UI

Tailwind v3.4 3.9k 4

Fork Fullscreen

<div class="flex items-center justify-between h-24 w-full max-w-6xl w-full bg-black relative">
<div class="text-zinc-100 font-medium text-xl flex items-center gap-2">
    Company
  </div>
  <div class="absolute left-1/2 transform -translate-x-1/2 flex items-center justify-center text-zinc-400 text-sm font-semibold bg-zinc-950 rounded-full backdrop-blur-sm px-5 py-1 overflow-hidden border border-zinc-700">
    <button class="hover:text-zinc-100 transition duration-700 px-4 py-1.5 rounded-full relative group isolate">
        <div class="absolute -bottom-5 left-1/2 -translate-x-1/2  duration-700 w-8 h-6 blur-[12px] bg-zinc-700 opacity-0 group-hover:opacity-100 transition -z-10">
        </div>
        <div class="absolute -top-5 left-1/2 -translate-x-1/2  duration-700 w-8 h-6 blur-[12px] bg-zinc-700 opacity-0 group-hover:opacity-100 transition -z-10">
        </div>
        <span class="z-10 relative">Home</span>
    </button>
    <button class="hover:text-zinc-100 transition px-4 py-1.5 duration-700 rounded-full relative group isolate">
        <div class="absolute -bottom-5 left-1/2 -translate-x-1/2  duration-700 w-8 h-6 blur-[12px] bg-zinc-700 opacity-0 group-hover:opacity-100 transition -z-10">
        </div>
        <div class="absolute -top-5 left-1/2 -translate-x-1/2  duration-700 w-8 h-6 blur-[12px] bg-zinc-700 opacity-0 group-hover:opacity-100 transition -z-10">
        </div>
        <span class="z-10 relative">Products</span>
    </button>
    <button class="hover:text-zinc-100 transition px-4 py-1.5 duration-700 rounded-full relative group isolate">
        <div class="absolute -bottom-5 left-1/2 -translate-x-1/2  duration-700 w-8 h-6 blur-[12px] bg-zinc-700 opacity-0 group-hover:opacity-100 transition -z-10">
        </div>
        <div class="absolute -top-5 left-1/2 -translate-x-1/2  duration-700 w-8 h-6 blur-[12px] bg-zinc-700 opacity-0 group-hover:opacity-100 transition -z-10">
        </div>
        <span class="z-10 relative">Inquire</span>
    </button>
  </div>
  <div class="flex items-center justify-center gap-3">
    <button class="text-zinc-100 font-medium hover:text-zinc-300 transition">Log In</button>
    <button class="text-zinc-100 rounded-full px-5 py-1.5 bg-zinc-950 font-medium flex items-center transition border border-zinc-700 relative overflow-hidden group">
        Sign Up
        <svg class="inline-block ml-2 group-hover:translate-x-2 transition duration-1000" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
            <path fill="currentColor" d="M13.3 17.275q-.3-.3-.288-.725t.313-.725L16.15 13H5q-.425 0-.713-.288T4 12q0-.425.288-.713T5 11h11.15L13.325 8.175q-.3-.3-.313-.725t.288-.725q.3-.3.725-.288t.725.313l4.15 4.15q.15.15.213.325t.063.375q0 .2-.063.375t-.213.325l-4.15 4.15q-.3.3-.725.313t-.725-.288Z"/>
        </svg>
        <div class="absolute -left-6 top-1/2 -translate-y-1/2 w-12 h-3 bg-zinc-100 blur-[18px] group-hover:scale-[3] opacity-0 group-hover:opacity-100 transition duration-1000">

</div>
    </button>
  </div>
</div>