Pixel Measurement Overlay Button

<a href="#resume"
  style="--purple: #9B7EDA; font-size: 14px; padding: 0.8em 1.5em; letter-spacing: 0.08em; position: relative; font-family: inherit; border-radius: 0.6em; overflow: hidden; transition: 0.3s; line-height: 1.4em; border: 2px solid var(--purple); background: linear-gradient(to right, rgba(155, 126, 218, 0.1) 1%, transparent 40%, transparent 60%, rgba(155, 126, 218, 0.1) 100%); color: var(--purple); box-shadow: rgba(155, 126, 218, 0.4) 0px 0px 10px inset, rgba(155, 126, 218, 0.1) 0px 0px 9px 3px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; cursor: pointer; margin-top: 1rem;"
  onmouseover="this.style.color='#BFA3F3'; this.style.boxShadow='inset 0 0 10px rgba(155, 126, 218, 0.6), 0 0 9px 3px rgba(155, 126, 218, 0.2)';"
  onmouseout="this.style.color='var(--purple)'; this.style.boxShadow='inset 0 0 10px rgba(155, 126, 218, 0.4), 0 0 9px 3px rgba(155, 126, 218, 0.1)';"
  class="">
  <span style="position: relative; z-index: 2; display: flex; align-items: center; gap: 0.5rem;" class="">
    Download resume
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download" style="width: 16px; height: 16px;">
      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
      <polyline points="7,10 12,15 17,10" class=""></polyline>
      <line x1="12" x2="12" y1="15" y2="3" class=""></line>
    </svg>
  </span>
  <span style="content: &quot;&quot;; position: absolute; left: -4em; width: 4em; height: 100%; top: 0px; transition: transform 0.4s ease-in-out; background: linear-gradient(to right, transparent 1%, rgba(155, 126, 218, 0.1) 40%, rgba(155, 126, 218, 0.1) 60%, transparent 100%); z-index: 1; transform: translateX(0px);" onmouseover="this.style.transform='translateX(15em)'" onmouseout="this.style.transform='translateX(0)'" class=""></span>
</a>