html - Changing Hover on a weird button

Question

Hello I'm having issues with a button of a Wordpress theme. The theme allow you to change the main color of a button but not the hover. I tried to change in css but it got super messy.

This is the code for the button

<a class="button light button_right button_size_2 button_js kill_the_icon" href="http:/" style="background-color:#fff!important;color:#1e325b;">
 <span class="button_icon">
  <i class="icon-check" style="color:#1e325b!important;"></I>
 </span>
 <span class="button_label">Prenota</span>
</a>

I tried adding this, but I only get the result in the image. It changes only the middle part...

a.button.light.button_right.button_size_2.button_js.kill_the_icon :hover {   
 background: orange;
}

how can I change the whole color? Thanks

Answer 1

You could try this

    a.button.light.button_right.button_size_2.button_js.kill_the_icon:hover > span{
    background: orange;
}

or for a more specific way

a.button.light.button_right.button_size_2.button_js.kill_the_icon:hover > span.button_label{
    background: orange;
}
a.button.light.button_right.button_size_2.button_js.kill_the_icon:hover > span.button_icon{
    background: orange;
}