Проблемы с плавной анимацией градиента

[L1nx]

Нужно чтобы при наведении курсора на кнопку-ссылку, тело кнопки плавно заполнялось светло красным цветом влево, а когда курсор убрали с кнопки, то светло красный цвет плавно уползал обратно. Как такое сделать?

У меня получается только стартовать начальную анимацию при ховере https://codepen.io/l1nx/pen/xxGrwrW

[Switch74]

попробуйте использовать
 

...
  background-position:0%;
  transition: background-position .4s;
  &:hover {
    background-position:80%;
    transition: background-position .4s;
  }

 

[L1nx]

Попробовала, не помогло. Ощущение что transition не работает

[npofopr]

https://stackoverflow.com/questions/16516793/how-to-reverse-an-animation-on-mouse-out-after-hover

[Switch74]

19 часов назад, L1nx сказал:

Попробовала, не помогло. Ощущение что transition не работает

у меня работает
у вас осталось от анимации строчка в hover
animation: gradient .4s linear both;

[L1nx]

Получилось сделать то что нужно. 
Switch74 спасибо)