Shiny Animated CTA Button

<div class="inline-flex">
  <style>@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700,900&display=swap');

    .shiny-btn-comp {
      font-family: 'Satoshi', 'Helvetica Neue', sans-serif;
    }

    @property --gradient-angle {
      syntax: "<angle>";
      initial-value: 0deg;
      inherits: false;
    }

    @keyframes border-spin {
      to { --gradient-angle: 360deg; }
    }

    @keyframes shimmer-fallback {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }

    .shiny-btn-comp .btn-shiny {
      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;
    }

    @supports not (background: conic-gradient(from 0deg, red, blue)) {
      .shiny-btn-comp .btn-shiny {
        background: linear-gradient(#000000, #000000) padding-box,
            linear-gradient(
                90deg,
                transparent 0%,
                #F97316 25%,
                #FEF3C7 50%,
                #F97316 75%,
                transparent 100%
            ) border-box;
        background-size: 100% 100%, 200% 100%;
        animation: shimmer-fallback 2s linear infinite;
      }
    }

    .shiny-btn-comp .btn-shiny::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;
    }

    @supports not (background: conic-gradient(from 0deg, red, blue)) {
      .shiny-btn-comp .btn-shiny::before {
        display: none;
      }
    }

    .shiny-btn-comp .btn-shiny::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;
    }

    .shiny-btn-comp .btn-shiny:hover::after {
      opacity: 1;
    }

    .shiny-btn-comp .btn-shiny:hover {
      transform: translateY(-1px);
    }

    .shiny-btn-comp .btn-shiny:active {
      transform: translateY(0);
    }</style>
  <button class="shiny-btn-comp btn-shiny group relative flex items-center
    justify-center w-full max-w-md h-[52px] rounded-full
    text-slate-50 font-sans font-semibold text-base
    tracking-tight cursor-pointer overflow-hidden isolate
    shadow-2xl shadow-black/50 transition-transform duration-200">
    <span class="relative z-10 flex items-center gap-2">Test Your Idea</span>
  </button>
</div>