По вашему запросу, вот несколько способов добавить анимацию эффекта изменения цвета к кнопке при наведении на нее курсора:

Метод 1: CSS-переход
Вы можете использовать CSS-переходы, чтобы плавно анимировать изменение цвета при наведении курсора на кнопку. Вот пример фрагмента кода:

.button {
  background-color: initial;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: #FF0000; /* Change to desired color */
}

Метод 2: анимация ключевых кадров CSS
Другой способ добиться анимации изменения цвета — использовать анимацию ключевых кадров CSS. Вот пример фрагмента кода:

@keyframes colorChange {
  0% { background-color: initial; }
  50% { background-color: #FF0000; /* Change to desired color */}
  100% { background-color: initial; }
}
.button {
  animation: colorChange 1s infinite;
}
.button:hover {
  animation: none;
  background-color: #FF0000; /* Change to desired color */
}

Метод 3: анимация JavaScript
Если вы предпочитаете использовать JavaScript, вы можете динамически изменять цвет кнопки при наведении курсора мыши с помощью прослушивателей событий. Вот пример фрагмента кода:

<button class="button">Hover me</button>
<script>
  const button = document.querySelector('.button');
  button.addEventListener('mouseover', function() {
    this.style.backgroundColor = '#FF0000'; /* Change to desired color */
  });
  button.addEventListener('mouseout', function() {
    this.style.backgroundColor = 'initial';
  });
</script>