Переливающаяся кнопка

Цвета текут по кнопке туда-обратно и разгоняются по ховеру, свечение в тон.

Наведите на правую.

Код

<a class="liquid" href="#">Кнопка</a>

<style>
.liquid {
  background: linear-gradient(270deg,
    #ff2e97, #7a2eff, #2e97ff, #2effc8, #ff2e97);
  background-size: 600% 100%;            /* запас для течения */
  animation: flow 9s ease-in-out infinite;
  border-radius: 999px; color: #fff;
  box-shadow: 0 10px 34px rgba(122,46,255,.35);  /* свечение в тон */
}
.liquid:hover { animation-duration: 2.2s; }      /* разгон */
@keyframes flow {
  0% { background-position: 0 0; }
  50% { background-position: 100% 0; }
  100% { background-position: 0 0; } }
</style>

Промпт для ИИ

Сделай переливающуюся кнопку: градиент из 4-5 цветов (последний = первому) с background-size 600% 100%; анимация background-position 0→100%→0 за 9s ease-in-out infinite — цвета текут туда-обратно без шва. По ховеру animation-duration 2.2s — перелив разгоняется. Цветное свечение box-shadow в тон градиента. При prefers-reduced-motion — статичный градиент.