JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div class="btn">Click Me</div>

CSS

.btn {
  padding: 1em;
  transition: background-image 0.5s;
  --g1: green;
  --g2: hotpink;
  background-image: linear-gradient(var(--g1), var(--g2));
}
.btn:hover {
    --g1: blue;
}