Sticky Responsive Navbar with Glass Sign-Up Button

<header class="sticky top-3 z-50 text-white w-full max-w-4xl">
  <div class="mx-auto max-w-7xl px-3">
    <div class="h-14 flex ring-1 ring-white/10 bg-slate-900 rounded-full pr-2.5 pl-2.5 items-center justify-between">
      <div class="flex gap-0 items-center">
        <svg class="md:w-14 md:h-14 w-[36px] h-[36px]" viewBox="0 0 48 48" aria-hidden="true" stroke-width="2"
          style="width: 36px; height: 36px;;">
          <path d="M24 8 L36 16 L36 32 L24 40 L12 32 L12 16 Z" fill="currentColor" class=""></path>
        </svg>
        <span class="text-base font-semibold tracking-tight font-sans">AdaFlow</span>
      </div>
      <nav class="hidden md:flex items-center gap-8 text-sm text-slate-300">
        <a href="#" class="hover:text-white transition font-sans" title="Link disabled in preview mode">Product</a>
        <a href="#" class="hover:text-white transition font-sans" title="Link disabled in preview mode">Solutions</a>
        <a href="#" class="hover:text-white transition font-sans" title="Link disabled in preview mode">Pricing</a>
        <a href="#" class="hover:text-white transition font-sans" title="Link disabled in preview mode">Customers</a>
      </nav>
      <div class="hidden md:flex items-center gap-3">
        <button class="px-3 py-1.5 text-sm rounded-md text-slate-300 hover:text-white transition font-sans">Log in</button>
        <button class="liquid-glass-button relative inline-flex h-10 cursor-pointer outline-none overflow-hidden transition-all duration-300 ease-out text-sm font-medium text-white/90 bg-gradient-to-r from-white/10 to-white/5 border-white/15 border rounded-full pr-6 pl-6 shadow-lg backdrop-blur-xl items-center justify-center hover:bg-gradient-to-r hover:from-white/15 hover:to-white/10" style="box-shadow: 0 0 6px rgba(0,0,0,0.03), 0 2px 6px rgba(0,0,0,0.08), inset 3px 3px 0.5px -3px rgba(255,255,255,0.2), inset -3px -3px 0.5px -3px rgba(255,255,255,0.1), inset 1px 1px 1px -0.5px rgba(255,255,255,0.3), inset -1px -1px 1px -0.5px rgba(255,255,255,0.15), inset 0 0 6px 6px rgba(255,255,255,0.05), inset 0 0 2px 2px rgba(255,255,255,0.02), 0 0 12px rgba(0,0,0,0.1);">
  <div class="absolute inset-0 rounded-full overflow-hidden pointer-events-none">
    <div class="absolute inset-0 bg-gradient-to-br from-white/8 via-transparent to-white/3"></div>
  </div>
  <span class="relative z-10">Sign Up</span>
  <script>
    (function(){const button = document.querySelector('.liquid-glass-button');if(button){button.addEventListener('click', function(e){const rect = this.getBoundingClientRect();const x = e.clientX - rect.left;const y = e.clientY - rect.top;const ripple = document.createElement('span');ripple.className = 'absolute rounded-full bg-gradient-radial from-white/30 to-transparent pointer-events-none animate-ping';ripple.style.left = x - 25 + 'px';ripple.style.top = y - 25 + 'px';ripple.style.width = '50px';ripple.style.height = '50px';ripple.style.animation = 'ripple 0.6s linear';this.appendChild(ripple);setTimeout(() => ripple.remove(), 600);});}})()
  </script>
  
  <style>
    @keyframes ripple {
      0% {
        transform: scale(0);
        opacity: 1
      }
  
      100% {
        transform: scale(2);
        opacity: 0
      }
    }
  </style>
</button>
      </div>
      <button class="md:hidden inline-flex items-center justify-center rounded-md p-2 hover:bg-white/5">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="menu" class="lucide lucide-menu h-5 w-5"><path d="M4 12h16"></path><path d="M4 18h16"></path><path d="M4 6h16"></path></svg>
          </button>
    </div>
  </div>
</header>