* {
  box-sizing: border-box;
  color-scheme: light dark;
}

@property --color-1 {
  syntax: "<color>";
  inherits: true;
  initial-value: #0072ff;
}

@property --color-2 {
  syntax: "<color>";
  inherits: true;
  initial-value: #00d4ff;
}

body {
  min-height: 100dvh;
  display: grid;
  gap: 2rem;
  place-content: center;
}

button {
  color: white;
  width: 16rem;
  height: 8rem;
  text-align: center;
}

.button {
  --color-1: #0072ff;
  --color-2: #00d4ff;
  padding: 1em 2em;
  background-image: linear-gradient(
    90deg, var(--color-1), var(--color-2));
  border: 0;
  border-radius: 0.25rem;
  cursor: pointer;
  font-size: 2rem;
  transition: --color-1 1000ms, --color-2 2000ms 1000ms;
}

.button:hover,
.button:focus-visible {
  --color-1: #00d4ff;
  --color-2: #0072ff;
}