Почему не работает плавная css анимация с градиентом?
Ну потому что css транзишены не работают с градиентами. Самый простой трюк - создаете псевдоэлемент :before/:after с фоном и его показываете через изменение opacity от 0 до 1 (таким же способом например "анимируют" переход от одного градиента к другому).
Попробуйте по другому. У кнопки задайте after. С height 0. При наведении height увеличивайте до высоты кнопкиЧто-то подобное
В примере 2 варианта: с плавным появлением с помощью opacity и появление снизу вверх