マウスオーバーでアニメーションするグラデーションボーダー

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

button {
  --angle: 0deg;
  --pink: #ff008c;
  --purple: #d000ff;
  --blue: #000dff;
  --gradient: linear-gradient(var(--angle), var(--pink), var(--purple), var(--blue));
  margin-inline: auto;
  padding: 0.4em;
  display: block;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 10px solid;
  -o-border-image: var(--gradient) 1;
     border-image: var(--gradient) 1;
  background: var(--gradient);
  font-size: 30px;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: 3s gradientRotate linear infinite paused;
          animation: 3s gradientRotate linear infinite paused;
  cursor: pointer;
}
button:hover, button:focus {
  -webkit-animation: 3s gradientRotate linear infinite;
          animation: 3s gradientRotate linear infinite;
}

@-webkit-keyframes gradientRotate {
  to {
    --angle: 360deg;
  }
}

@keyframes gradientRotate {
  to {
    --angle: 360deg;
  }
}
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}