Gradient Glow Hover Button

<div class="flex flex-col gap-4 sm:flex-row sm:justify-center mt-8 gap-x-4 gap-y-4 items-center">
  <button class="cursor-pointer border-none inline-flex focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-400/80 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 transition-all duration-300 text-xs font-medium text-white tracking-tight bg-black rounded-none pt-3 pr-8 pb-3 pl-8 relative items-center justify-center" style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; width: auto; height: auto">
  <div class="pointer-events-none absolute left-[-2px] top-[-40px] bottom-[-40px] w-[2px]" style="background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 40px, rgba(255, 255, 255, 0.667) 40px, rgb(255, 255, 255), rgba(255, 255, 255, 0.667) calc(100% - 40px), rgba(255, 255, 255, 0.2) calc(100% - 40px), rgba(255, 255, 255, 0)); z-index: 0;">
    <div style="content: ''; position: absolute; inset: 0; background: inherit; filter: blur(4px); z-index: -2;"></div>
    <div style="content: &quot;&quot;; position: absolute; inset: 0px; background: inherit; filter: blur(10px); opacity: 0; z-index: -2;" class="hover-blur-left"></div>
  </div>
  <div class="pointer-events-none absolute right-[-2px] top-[-40px] bottom-[-40px] w-[2px]" style="background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 40px, rgba(255, 255, 255, 0.667) 40px, rgb(255, 255, 255), rgba(255, 255, 255, 0.667) calc(100% - 40px), rgba(255, 255, 255, 0.2) calc(100% - 40px), rgba(255, 255, 255, 0)); z-index: 0;">
    <div style="content: ''; position: absolute; inset: 0; background: inherit; filter: blur(4px); z-index: -2;"></div>
    <div style="content: &quot;&quot;; position: absolute; inset: 0px; background: inherit; filter: blur(10px); opacity: 0; z-index: -2;" class="hover-blur-right"></div>
  </div>
  <div class="pointer-events-none absolute top-[-2px] left-[-40px] right-[-40px] h-[2px]" style="background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 40px, rgba(255, 255, 255, 0.667) 40px, rgb(255, 255, 255), rgba(255, 255, 255, 0.667) calc(100% - 40px), rgba(255, 255, 255, 0.2) calc(100% - 40px), rgba(255, 255, 255, 0)); z-index: 0;">
    <div style="content: ''; position: absolute; inset: 0; background: inherit; filter: blur(4px); z-index: -2;"></div>
    <div style="content: &quot;&quot;; position: absolute; inset: 0px; background: inherit; filter: blur(10px); opacity: 0; z-index: -2;" class="hover-blur-top"></div>
  </div>
  <div class="pointer-events-none absolute bottom-[-2px] left-[-40px] right-[-40px] h-[2px]" style="background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 40px, rgba(255, 255, 255, 0.667) 40px, rgb(255, 255, 255), rgba(255, 255, 255, 0.667) calc(100% - 40px), rgba(255, 255, 255, 0.2) calc(100% - 40px), rgba(255, 255, 255, 0)); z-index: 0;">
    <div style="content: ''; position: absolute; inset: 0; background: inherit; filter: blur(4px); z-index: -2;"></div>
    <div style="content: &quot;&quot;; position: absolute; inset: 0px; background: inherit; filter: blur(10px); opacity: 0; z-index: -2;" class="hover-blur-bottom"></div>
  </div>
  <div style="position: absolute; inset: 0px; opacity: 0; background: radial-gradient(circle, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 20%, rgba(17, 17, 17, 0.667) 50%) 0% 0% / 3px 3px, radial-gradient(100% 100%, rgb(255, 255, 255), rgba(255, 255, 255, 0)) 0% 0% / auto; z-index: 0;" class="hover-overlay"></div>
  <div style="position: absolute; inset: -20px; opacity: 0; background: radial-gradient(circle, rgba(56, 189, 248, 0.3), transparent 60%); filter: blur(20px); z-index: -1;" class="hover-radial-glow"></div>
  <span class="relative z-10">BOOK YOUR CALL</span>
  <style>
    button:hover .hover-overlay {
      opacity: 0.3;
    }
    button:hover .hover-blur-left,
    button:hover .hover-blur-right,
    button:hover .hover-blur-top,
    button:hover .hover-blur-bottom {
      opacity: 1;
      filter: blur(14px);
    }
    button:hover .hover-radial-glow {
      opacity: 1;
    }
  </style>
</button>
</div>