Glow Hover Button with Arrow Icon

<button class="group flex min-w-[180px] decoration-0 transition-transform active:scale-95 cursor-pointer outline-none w-auto h-[50px] px-6 relative items-center justify-center" type="button" style="background-color: rgba(255, 255, 255, 0.05); border-radius: 8px; opacity: 1; border: none" data-framer-name="desktop">

  <!-- Glow Layer -->
  <div class="absolute inset-0 pointer-events-none transition-opacity ease-in-out duration-[1200ms] opacity-100 group-hover:opacity-0" data-framer-name="Glow" style="background: radial-gradient(15% 50% at 50% 100%, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%); border-radius: 8px; filter: blur(15px);"></div>

  <!-- Glow Hover Layer -->
  <div class="absolute inset-0 pointer-events-none transition-opacity ease-in-out duration-[1200ms] opacity-0 group-hover:opacity-100" data-framer-name="Glow Hover" style="background: radial-gradient(60.6% 50% at 50% 100%, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%); border-radius: 8px; filter: blur(18px);"></div>

  <!-- Stroke Layer -->
  <div class="absolute inset-0 pointer-events-none will-change-auto transition-opacity ease-in-out duration-[1200ms] opacity-100 group-hover:opacity-0" data-framer-name="Stroke" style="background: radial-gradient(10.7% 50% at 50% 100%, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%); border-radius: 8px;"></div>

  <!-- Stroke Hover Layer -->
  <div class="absolute inset-0 pointer-events-none will-change-auto transition-opacity ease-in-out duration-[1200ms] opacity-0 group-hover:opacity-100" data-framer-name="Stroke Hover" style="background: radial-gradient(60.1% 50% at 50% 100%, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%); border-radius: 8px;"></div>

  <!-- Fill Layer -->
  <div class="absolute inset-[1px] pointer-events-none z-10 rounded-[7px]" data-framer-name="Fill" style="background-color: rgb(0, 0, 0); opacity: 1;"></div>

  <!-- Content Layer -->
  <div class="relative z-20 flex items-center justify-center gap-2 opacity-100" data-framer-name="text content">
    <span class="m-0 p-0 font-sans text-[15px] font-medium text-white tracking-wide" style="-webkit-font-smoothing: antialiased; text-shadow: 0 1px 2px rgba(0,0,0,0.5);">
      View Portfolio
    </span>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right transition-transform duration-300 group-hover:translate-x-1">
      <path d="M5 12h14" class=""></path>
      <path d="m12 5 7 7-7 7" class=""></path>
    </svg>
  </div>
</button>