Gradient Border CTA Button with Hover & Press Effects

<a href="#work"
  style="align-items: center; background-image: linear-gradient(144deg, rgb(175, 64, 255), rgb(91, 66, 243) 50%, rgb(0, 221, 235)); border: 0px; border-radius: 8px; box-shadow: rgba(151, 65, 252, 0.2) 0px 15px 30px -5px; box-sizing: border-box; color: rgb(255, 255, 255); display: inline-flex; font-size: 14px; justify-content: center; line-height: 1em; max-width: 100%; min-width: auto; padding: 3px; text-decoration: none; user-select: none; touch-action: manipulation; white-space: nowrap; cursor: pointer; height: 50px; margin-top: 1rem; transform: scale(1); width: auto;"
  onmouseover="this.querySelector('span').style.background='none'"
  onmouseout="this.querySelector('span').style.backgroundColor='rgb(5, 6, 45)'"
  onmousedown="this.style.transform='scale(0.9)'" onmouseup="this.style.transform='scale(1)'" class="">
  <span style="background: none rgb(5, 6, 45); padding: 16px 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 0.5rem;" class="">View portfolio</span>
</a>