Animated Gradient Button

<button class="gradient-button inline-flex items-center justify-center rounded-[11px] min-w-[132px] px-9 py-4 text-base leading-[19px] font-semibold text-white focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20 disabled:pointer-events-none disabled:opacity-50">
Get Started
<style>
  @property --pos-x {
    syntax: '<percentage>';
    initial-value: 11.14%;
    inherits: false
  }

  @property --pos-y {
    syntax: '<percentage>';
    initial-value: 140%;
    inherits: false
  }

  @property --spread-x {
    syntax: '<percentage>';
    initial-value: 150%;
    inherits: false
  }

  @property --spread-y {
    syntax: '<percentage>';
    initial-value: 180.06%;
    inherits: false
  }

  @property --color-1 {
    syntax: '<color>';
    initial-value: #1a0033;
    inherits: false
  }

  @property --color-2 {
    syntax: '<color>';
    initial-value: #4c1d95;
    inherits: false
  }

  @property --color-3 {
    syntax: '<color>';
    initial-value: #7c3aed;
    inherits: false
  }

  @property --color-4 {
    syntax: '<color>';
    initial-value: #a855f7;
    inherits: false
  }

  @property --color-5 {
    syntax: '<color>';
    initial-value: #c084fc;
    inherits: false
  }

  @property --border-angle {
    syntax: '<angle>';
    initial-value: 20deg;
    inherits: true
  }

  @property --border-color-1 {
    syntax: '<color>';
    initial-value: hsla(270, 75%, 60%, 0.2);
    inherits: true
  }

  @property --border-color-2 {
    syntax: '<color>';
    initial-value: hsla(270, 75%, 40%, 0.75);
    inherits: true
  }

  @property --stop-1 {
    syntax: '<percentage>';
    initial-value: 37.35%;
    inherits: false
  }

  @property --stop-2 {
    syntax: '<percentage>';
    initial-value: 61.36%;
    inherits: false
  }

  @property --stop-3 {
    syntax: '<percentage>';
    initial-value: 78.42%;
    inherits: false
  }

  @property --stop-4 {
    syntax: '<percentage>';
    initial-value: 89.52%;
    inherits: false
  }

  @property --stop-5 {
    syntax: '<percentage>';
    initial-value: 100%;
    inherits: false
  }

  .gradient-button {
    position: relative;
    appearance: none;
    cursor: pointer;
    background: radial-gradient(var(--spread-x) var(--spread-y) at var(--pos-x) var(--pos-y), var(--color-1) var(--stop-1), var(--color-2) var(--stop-2), var(--color-3) var(--stop-3), var(--color-4) var(--stop-4), var(--color-5) var(--stop-5));
    transition: --pos-x 0.5s, --pos-y 0.5s, --spread-x 0.5s, --spread-y 0.5s, --color-1 0.5s, --color-2 0.5s, --color-3 0.5s, --color-4 0.5s, --color-5 0.5s, --border-angle 0.5s, --border-color-1 0.5s, --border-color-2 0.5s, --stop-1 0.5s, --stop-2 0.5s, --stop-3 0.5s, --stop-4 0.5s, --stop-5 0.5s
  }

  .gradient-button::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(var(--border-angle), var(--border-color-1), var(--border-color-2));
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none
  }

  .gradient-button:hover {
    --pos-x: 0%;
    --pos-y: 91.51%;
    --spread-x: 120.24%;
    --spread-y: 103.18%;
    --color-1: #ec4899;
    --color-2: #f97316;
    --color-3: #fbbf24;
    --color-4: #22d3ee;
    --color-5: #1a0033;
    --border-angle: 190deg;
    --border-color-1: hsla(270, 78%, 90%, 0.1);
    --border-color-2: hsla(270, 75%, 90%, 0.6);
    --stop-1: 0%;
    --stop-2: 8.8%;
    --stop-3: 21.44%;
    --stop-4: 71.34%;
    --stop-5: 85.76%
  }
</style>
</button>