Premium Blue Gradient Button

<button type="button" aria-label="Primary action" class="group relative inline-flex items-center gap-2 rounded-3xl px-6 py-3 bg-gradient-to-b from-blue-500/20 to-blue-600/40 text-sky-50 font-medium tracking-tight cursor-pointer outline-none transition-all duration-300 ease-out ring-1 ring-sky-400/10 hover:ring-sky-400/30 hover:shadow-[0_0_0_3px_rgba(56,189,248,0.08)] focus-visible:ring-2 focus-visible:ring-sky-400/50 shadow-[inset_0_0_12px_rgba(151,200,255,0.44)] hover:shadow-[inset_0_0_14px_rgba(151,200,255,0.60)] hover:bg-gradient-to-b hover:from-blue-500/25 hover:to-blue-600/50">
  <span class="absolute inset-0 rounded-3xl z-0" style="background: linear-gradient(180deg, rgba(8,77,126,0) 0%, rgba(8,77,126,0.42) 100%), rgba(59,130,246,0.22); box-shadow: inset 0 0 12px rgba(151,200,255,0.44);"></span>
  <span class="absolute inset-0 rounded-3xl z-0 opacity-0 transition-opacity duration-300 ease-out group-hover:opacity-100" style="background: linear-gradient(180deg, rgba(8,77,126,0) 0%, rgba(8,77,126,0.54) 100%), rgba(59,130,246,0.30); box-shadow: inset 0 0 14px rgba(151,200,255,0.60);"></span>
  <span class="pointer-events-none absolute inset-0 rounded-3xl z-10" style="padding: 1px; background: linear-gradient(180deg, rgba(184,238,255,0.24) 0%, rgba(184,238,255,0) 100%), linear-gradient(0deg, rgba(184,238,255,0.32), rgba(184,238,255,0.32)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; border-radius: 1.5rem;"></span>
  <span class="relative z-20 flex items-center gap-2">
    <span class="text-[15px] leading-none">Button</span>
    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-sky-100/90 transition-transform duration-300 ease-out group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
      <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"></path>
    </svg>
  </span>
</button>