Как сделать подсветку кнопки слева направо при наведении?

Question

[Кристина]

Здравствуйте!
Допустим есть желтая кнопка, мне нужно чтобы при наведении она меняла цвет на зеленый и происходило это слева-направо?

Спасибо!

Answer 1

[Миша]

Можно анимировать позицию фона, заданного с помощью linear-gradient.

.btn {
  background-image: linear-gradient(90deg, red 0, red 50%, blue 50%, blue 100%);
  background-size: 200%;
  background-position-x: 100%;
  transition: background .2s ease-out;
}

.btn:hover {
  background-position-x: 0;
}

Демо на codepen

Answer 2

[iBird Rose]

https://jsfiddle.net/69pngzsa/