Glowing Gradient Authenticate Button

<div class="relative w-fit group cursor-pointer">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

    @keyframes spin {
      from {
        transform: translate(-50%, -50%) rotate(0deg);
      }

      to {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

    .animate-spin-custom {
      animation: spin 3s linear infinite;
    }

    .btn-outer-ring {
      background: linear-gradient(180deg, #262626 0%, #0a0a0a 100%);
      box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.8);
    }

    .btn-inner-overlay {
      box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.8), inset 0 1px 0px rgba(255, 255, 255, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.02), inset 0 -1px 2px rgba(0, 0, 0, 0.8);
    }

    .btn-main {
      background: linear-gradient(180deg, #FCD34D 0%, #D97706 100%);
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 -3px 6px rgba(180, 83, 9, 0.5), inset 0 -1px 2px rgba(120, 53, 15, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 6px 12px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);
    }
  </style>
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>

  <div
    class="absolute -inset-4 rounded-full opacity-0 group-hover:opacity-30 transition-opacity duration-700 blur-2xl pointer-events-none"
    style="background: linear-gradient(180deg, #FDE68A 0%, #D97706 100%);">
  </div>

  <div
    class="relative btn-outer-ring rounded-[30px] p-[3px] transition-transform duration-300 ease-out group-active:scale-[0.98] z-10 overflow-hidden">

    <div
      class="absolute top-1/2 left-1/2 w-[400px] h-[400px] opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none animate-spin-custom z-0"
      style="background: conic-gradient(from 0deg, transparent 70%, rgba(245, 158, 11, 0.6) 85%, rgba(253, 230, 138, 1) 100%);">
    </div>

    <div class="absolute inset-0 rounded-[30px] pointer-events-none z-10 btn-inner-overlay"></div>

    <button type="button" class="relative z-20 flex items-center justify-center gap-2.5 rounded-[27px] px-8 py-3.5 w-full h-full outline-none btn-main font-sans">
      <span class="text-[#381E02] font-semibold text-sm drop-shadow-sm" style="text-shadow: 0 1px 0 rgba(255,255,255,0.25);">
        Authenticate
      </span>
      <iconify-icon icon="solar:login-2-linear" class="text-[#381E02] text-base drop-shadow-sm" style="filter: drop-shadow(0 1px 0 rgba(255,255,255,0.25));"></iconify-icon>
    </button>
  </div>
</div>