@oliverids
Posted
Hmm I might be wrong but I tested it really quickly on DevTools and I think the issue is that you didn't access the element correctly.
Notice how, for the main style, you accessed the element by ".card .input .percent .percent_btn button { ... }". However, for the hover, you used ".card .btn:hover { ... }". Might be just a matter of confusion for the browser ? I changed it to ".card .input .percent .percent_btn button:hover { ... }" and it worked just fine, without the !important.
Might be worth it to give it a try.