Neon Purple Hover Button

<div class="inline-block">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@700&display=swap'); .text-stroke { -webkit-text-stroke: 1px rgba(255,255,255,0.6); text-stroke: 1px rgba(255,255,255,0.6); } .text-stroke-anim { -webkit-text-stroke: 1px #C43EFF; text-stroke: 1px #C43EFF; } .font-bricolage { font-family: 'Bricolage Grotesque', Arial, sans-serif; }
  </style>
  <button class="relative px-0 py-0 bg-transparent border-none outline-none cursor-pointer font-bricolage uppercase tracking-[0.15em]" style="font-size:60px; letter-spacing:3px;" data-text="DesignCode">
    <span class="actual-text text-transparent text-stroke select-none">DesignCode</span>
    <span aria-hidden="true" class="hover-text pointer-events-none absolute inset-0 w-0 overflow-hidden border-r-[6px]" style="color: #C43EFF; border-color: #C43EFF; transition: width 0.5s;">
      <span class="text-stroke-anim text-transparent select-none">DesignCode</span>
    </span>
  </button>
  <script>
    const btn = document.currentScript.previousElementSibling; const hoverText = btn.querySelector('.hover-text'); btn.addEventListener('mouseenter', () => { hoverText.style.width = '100%'; hoverText.style.filter = 'drop-shadow(0 0 23px #C43EFF)'; }); btn.addEventListener('mouseleave', () => { hoverText.style.width = '0%'; hoverText.style.filter = 'none'; });
  </script>
</div>