Animated Shiny Border Button

<div class="inline-block">
  <style>@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700,900&display=swap');
    
    @property --gradient-angle {
      syntax: "<angle>";
      initial-value: 0deg;
      inherits: false;
    }
    
    @keyframes border-spin {
      to { --gradient-angle: 360deg; }
    }
    
    .btn-shiny-hero {
      position: relative;
      background: linear-gradient(#000000, #000000) padding-box,
          conic-gradient(
              from var(--gradient-angle),
              transparent 0%,
              #F97316 10%,
              #FDBA74 20%,
              #FEF3C7 25%,
              #FDBA74 30%,
              #F97316 40%,
              transparent 50%,
              transparent 100%
          ) border-box;
      border: 2px solid transparent;
      animation: border-spin 3s linear infinite;
      font-family: 'Satoshi', 'Helvetica Neue', sans-serif;
    }
    
    .btn-shiny-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.8) 0.5px, transparent 0) padding-box;
      background-size: 4px 4px;
      mask-image: conic-gradient(from var(--gradient-angle), transparent 0%, black 20%, transparent 40%);
      border-radius: inherit;
      opacity: 0.6;
      animation: border-spin 3s linear infinite;
      pointer-events: none;
    }
    
    .btn-shiny-hero::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 100%);
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    .btn-shiny-hero:hover::after {
      opacity: 1;
    }
    
    .btn-shiny-hero:hover {
      transform: translateY(-1px);
    }
    
    .btn-shiny-hero:active {
      transform: translateY(0);
    }</style>
  <button class="btn-shiny-hero group relative flex items-center
    justify-center w-full h-[52px] rounded-full text-slate-50
    font-semibold text-base tracking-tight cursor-pointer
    overflow-hidden isolate shadow-2xl shadow-black/50
    transition-transform duration-200 px-8">
    <span class="relative z-10 flex items-center gap-2">Test Your Idea</span>
  </button>
</div>