Gradient Sign-Up Button with Hover Animation

<button class="gradient-button">
  <span class="tracking-tight">Sign Up</span>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
    <path d="m9 18 6-6-6-6"></path>
  </svg>
  <style>
    .gradient-button {
      display: flex;
      align-items: center;
      font-family: inherit;
      cursor: pointer;
      font-weight: 500;
      font-size: 17px;
      padding: 0.8em 1.5em 0.8em 1.2em;
      color: white;
      background: #2563eb;
      background: linear-gradient(0deg,
          rgba(37, 99, 235, 1) 0%,
          rgba(59, 130, 246, 1) 100%);
      border: none;
      box-shadow: 0 0.7em 1.5em -0.5em #2563ebbe;
      letter-spacing: 0.05em;
      border-radius: 20em;
      transition: all 0.3s ease;
    }

    .gradient-button svg {
      margin-left: 8px;
    }

    .gradient-button:hover {
      box-shadow: 0 0.5em 1.5em -0.5em #2563ebbe;
      transform: scale(1.05);
    }

    .gradient-button:active {
      box-shadow: 0 0.3em 1em -0.5em #2563ebbe;
      transform: scale(0.98);
    }
  </style>
</button>