Animated Plasma Glow Call-to-Action Button

<button class="inline-flex transition overflow-hidden group text-sm font-medium text-white rounded-full pt-3 pr-5 pb-3 pl-5 relative gap-x-2 gap-y-2 items-center font-custom" style="background: linear-gradient(135deg, rgb(26, 26, 26) 0%, rgb(10, 10, 10) 100%); border: none; box-shadow: rgba(0, 0, 0, 0.4) 0px 8px 32px, rgba(255, 255, 255, 0.1) 0px 1px 0px inset, rgba(0, 0, 0, 0.5) 0px -1px 0px inset; transition: all 0.3s ease-out; transform: translateY(0px); height: 64px; min-width: 300px;" onmouseover="this.style.transform='translateY(-3px)'; this.style.boxShadow='0 16px 48px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.6), 0 0 30px rgba(13,148,136,0.4), 0 0 60px rgba(13,148,136,0.2)'; this.querySelector('.border-glow').style.opacity='1'; this.querySelector('.border-glow').style.filter='blur(6px)';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5)'; this.querySelector('.border-glow').style.opacity='0.7'; this.querySelector('.border-glow').style.filter='blur(3px)';">
  
  <div style="position: absolute; inset: -2px; border-radius: 9999px; z-index: 0; overflow: hidden;">
    <div class="border-glow" style="position: absolute; inset: 0; background: conic-gradient(from 0deg, transparent 0deg, transparent 60deg, #0D9488 120deg, #14B8A6 180deg, #F97316 240deg, transparent 300deg, transparent 360deg); animation: border-rotate 6s linear infinite; filter: blur(3px); opacity: 0.7; transition: all 0.3s ease-out;"></div>
  </div>
  
  <div style="position: absolute; inset: 2px; border-radius: 9999px; background: linear-gradient(135deg, rgb(26, 26, 26) 0%, rgb(10, 10, 10) 100%); z-index: 1;"></div>
  
  <div style="position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 2; background-color: transparent; mask: repeating-linear-gradient(90deg, transparent 0, transparent 6px, black 7px, black 8px); -webkit-mask: repeating-linear-gradient(90deg, transparent 0, transparent 6px, black 7px, black 8px); border-radius: 9999px; overflow: hidden;">
    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 50% 50%, #0D9488 0%, transparent 50%), radial-gradient(circle at 45% 45%, #F97316 0%, transparent 45%), radial-gradient(circle at 55% 55%, #14B8A6 0%, transparent 45%), radial-gradient(circle at 45% 55%, #FB923C 0%, transparent 45%), radial-gradient(circle at 55% 45%, #0F766E 0%, transparent 45%); mask: radial-gradient(circle at 50% 50%, transparent 0%, transparent 10%, black 25%); -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0%, transparent 10%, black 25%); animation: plasma-move 2s infinite alternate, plasma-opacity 4s infinite; animation-timing-function: cubic-bezier(0.6, 0.8, 0.5, 1); filter: drop-shadow(0 0 8px rgba(13, 148, 136, 0.6));"></div>
  </div>
  
  <span style="position: relative; z-index: 3; font-size: 1.1em; font-weight: 700; user-select: none; color: #fff; display: flex; gap: 0.08em; letter-spacing: 0.02em; align-items: center;">
    <span style="display: inline-block; opacity: 0; animation: letter-glow 4s infinite linear; animation-delay: 0.1s;">S</span>
    <span style="display: inline-block; opacity: 0; animation: letter-glow 4s infinite linear; animation-delay: 0.14s;">t</span>
    <span style="display: inline-block; opacity: 0; animation: letter-glow 4s infinite linear; animation-delay: 0.18s;">a</span>
    <span style="display: inline-block; opacity: 0; animation: letter-glow 4s infinite linear; animation-delay: 0.22s;">r</span>
    <span style="display: inline-block; opacity: 0; animation: letter-glow 4s infinite linear; animation-delay: 0.26s;">t</span>
    <span style="display: inline-block; width: 0.35em;"></span>
    <span style="display: inline-block; opacity: 0; animation: letter-glow 4s infinite linear; animation-delay: 0.34s;">P</span>
    <span style="display: inline-block; opacity: 0; animation: letter-glow 4s infinite linear; animation-delay: 0.38s;">r</span>
    <span style="display: inline-block; opacity: 0; animation: letter-glow 4s infinite linear; animation-delay: 0.42s;">e</span>
    <span style="display: inline-block; opacity: 0; animation: letter-glow 4s infinite linear; animation-delay: 0.46s;">d</span>
    <span style="display: inline-block; opacity: 0; animation: letter-glow 4s infinite linear; animation-delay: 0.50s;">i</span>
    <span style="display: inline-block; opacity: 0; animation: letter-glow 4s infinite linear; animation-delay: 0.54s;">c</span>
    <span style="display: inline-block; opacity: 0; animation: letter-glow 4s infinite linear; animation-delay: 0.58s;">t</span>
    <span style="display: inline-block; opacity: 0; animation: letter-glow 4s infinite linear; animation-delay: 0.62s;">i</span>
    <span style="display: inline-block; opacity: 0; animation: letter-glow 4s infinite linear; animation-delay: 0.66s;">n</span>
    <span style="display: inline-block; opacity: 0; animation: letter-glow 4s infinite linear; animation-delay: 0.70s;">g</span>
    <span style="display: inline-block; width: 0.3em;"></span>
    <span style="display: inline-block; opacity: 0; animation: letter-glow 4s infinite linear; animation-delay: 0.78s;">-</span>
    <span style="display: inline-block; width: 0.3em;"></span>
    <span style="display: inline-block; opacity: 0; animation: letter-glow 4s infinite linear; animation-delay: 0.86s;">F</span>
    <span style="display: inline-block; opacity: 0; animation: letter-glow 4s infinite linear; animation-delay: 0.90s;">r</span>
    <span style="display: inline-block; opacity: 0; animation: letter-glow 4s infinite linear; animation-delay: 0.94s;">e</span>
    <span style="display: inline-block; opacity: 0; animation: letter-glow 4s infinite linear; animation-delay: 0.98s;">e</span>
  </span>

  <style>
    @keyframes border-rotate {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    @keyframes plasma-move {
      0% { transform: translateX(-55%); }
      100% { transform: translateX(55%); }
    }

    @keyframes plasma-opacity {
      0%, 100% { opacity: 0; }
      15% { opacity: 1; }
      65% { opacity: 0; }
    }

    @keyframes letter-glow {
      0% { opacity: 0; transform: scale(1) translateY(0); }
      5% { 
        opacity: 1; 
        text-shadow: 0 0 8px #0D9488, 0 0 16px #F97316;
        transform: scale(1.02) translateY(-1px);
      }
      20% { opacity: 0.4; transform: scale(1) translateY(0); text-shadow: none; }
      100% { opacity: 0; }
    }
  </style>
</button>