Animated Glass Button with Rotating Border

<div class="inline-block">
  <button class="group flex overflow-hidden transition-all duration-500
    hover:scale-[1.02]
    hover:shadow-[0_0_40px_-10px_rgba(245,158,11,0.5)]
    focus:outline-none w-full max-w-sm rounded-full pt-4 pr-8
    pb-4 pl-8 relative items-center justify-center">
    <style>@keyframes beam-spin { to { transform: rotate(360deg); } } @keyframes dots-move { 0% { background-position: 0 0; } 100% { background-position: 24px 24px; } }</style>
    <div class="absolute inset-0 -z-20 rounded-full overflow-hidden p-[1px]">
      <div class="absolute inset-[-100%] bg-[conic-gradient(from_0deg,transparent_0_300deg,#f59e0b_360deg)]" style="animation: beam-spin 3s linear infinite;"></div>
      <div class="absolute inset-[1px] rounded-full bg-[#050505]"></div>
    </div>
    <div class="-z-10 overflow-hidden bg-black/40 ring-white/10 ring-1
      rounded-full absolute top-[2px] right-[2px] bottom-[2px]
      left-[2px] backdrop-blur-xl">
      <div class="absolute inset-x-0 top-0 h-1/2 bg-gradient-to-b from-white/10 to-transparent opacity-50"></div>
      <div class="absolute inset-0 bg-gradient-to-b from-white/5 via-transparent to-black/40"></div>
      <div class="opacity-20 mix-blend-overlay absolute top-0 right-0 bottom-0 left-0" style="background-image: radial-gradient(rgba(245,158,11,0.8) 1px, transparent 1px); background-size: 12px 12px; animation: dots-move 10s linear infinite"></div>
      <div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-2/3 h-1/2
        bg-amber-500/20 blur-2xl rounded-full transition-all
        duration-500 group-hover:bg-amber-500/40
        group-hover:blur-3xl"></div>
    </div>
    <span class="z-10 flex items-center gap-3 transition-colors
      group-hover:text-white text-sm font-semibold text-white/90
      tracking-wide relative">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-300 group-hover:translate-x-1 text-amber-500">
        <path d="M5 12h14"></path>
        <path d="m12 5 7 7-7 7"></path>
      </svg>
    </span>
  </button>
</div>