Почему к кнопке не применяется linear-gradient??

Несколько возможных причин, по которым к кнопке не применяется linear-gradient:

• Отсутствие свойства content у псевдоэлементов. qna.habr.com Если его не добавить, градиент не будет применяться к псевдоэлементам. qna.habr.com
• Перезапись свойств при задании background. otvet.mail.ru Если при этом не указать какое-то свойство, оно будет сброшено на дефолтное. otvet.mail.ru Дефолтное значение для background-image — none. otvet.mail.ru

Чтобы решить проблему, можно задать цвет через свойство background-color или прописать оба фона через правильную сокращённую форму. otvet.mail.ru

Также для анимирования фонового градиента кнопки можно создать градиент фона, который больше, чем сама кнопка (используя свойство background-size), а затем анимировать свойство background-position для перевода фона. s-sd.ru