Interactive Gradient Cursor-Follow CTA Button

<button class="cursor-follow-cta focus:outline-none" id="cursor-follow-button" style="position: relative; overflow: hidden; cursor: pointer; padding: 1rem 2rem; height: auto; width: fit-content; background-color: rgb(122, 48, 143); font-size: 1.125rem; color: white; border: none; border-radius: 9999px; box-shadow: rgb(122, 48, 143) 0px 0px 2px 1px; transition: 0.5s cubic-bezier(1, 0, 0, 1); font-family: Inter, &quot;Helvetica Neue&quot;, sans-serif; font-weight: 500; line-height: 1.2; --cursor-x: 91.59015557255802%; --cursor-y: 74.63556851311954%;">
  <span style="position: relative; z-index: 10; display: flex; align-items: center; gap: 0.5rem;" class="">
    Download for Mac
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7,10 12,15 17,10"></polyline><line x1="12" x2="12" y1="15" y2="3"></line></svg>
  </span>
  <div style="content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 0% 45%, rgba(16, 5, 36, 1) 19%, rgba(16, 5, 36, 0.26) 46%, rgba(16, 5, 36, 0) 100%); transition: all 0.3s ease-in-out; pointer-events: none;"></div>
  <div style="content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 100% 45%, rgba(16, 5, 36, 1) 19%, rgba(16, 5, 36, 0.26) 46%, rgba(16, 5, 36, 0) 100%); transition: all 0.3s ease-in-out; pointer-events: none;"></div>
  <style>
    #cursor-follow-button:hover {
      box-shadow: 0px 0px 20px 0 rgb(122, 48, 143) !important;
    }
    #cursor-follow-button:hover > div:first-of-type,
    #cursor-follow-button:hover > div:last-of-type {
      width: 0 !important;
      opacity: 0 !important;
    }
  </style>
</button>