Gradient Animation on EVERY Button

Dear Enfold-Team,

I’m trying to get a hoveranimation working. The goal is to at least let the avaia-buttons animate. With or without Icon, that is not too important.

So, this is my Code:

.my-custom-button .avia-button .avia_iconbox_title {
    margin: 10%;
    text-align: center;
}

.my-custom-button .avia-button .avia_iconbox_title {
    color: #fff;
    text-align:center;
    border: none;
    background-size: 300% 100% !important;

    border-radius: 50px;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.my-custom-button:hover .avia-button:hover .avia_iconbox_title {
    background-position: 100% 0 !important;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.my-custom-button .avia-button:focus .avia_iconbox_title {
    outline: none;
}

.my-custom-button .avia-button {
    background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);
    box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
} 

Basically its workin. I have a Gradient-BG in the buttons, but I cant get them to be grey to even more grey on idle to blue-voilet on hover. Is there a solution or is it just impossible?
And if it possible, can I add this Animation to nearly every Link? Like the main-menu, social-media-buttons and the send buttons in contactforms?

Thanks for your time and i wish you a nice day!

Best regards,
Videmi