Unable to change button text color on hover with custom css

[ShivamJ07]

Hi, we just recently started with elementor pro. We were having some difficulty modifying a button's text color on hover with custom css. I am aware elementor already provides in-built functionality for this but we are trying it for testing purposes.

selector:hover { color: red !important; }

We added the above CSS in the custom css section for the button but when we tested it, there was no effect. However, when we tried changing padding on hover, it worked as intended. I do not understand this works for padding but not for text color or other text modifiers? Any insight is greatly appreciated.

Thanks

[ShivamJ07]

After some more testing, I was able to rectify the issue by adding the span selector as well, so the following worked:

selector:hover span { color: red !important; }

I am not sure why the previous approach did not work and why I had to specifically select the span. Is this considered best practice or is there a different way to style text in buttons with custom css?

Thanks

[nicholaszein]

Use:

selector .elementor-button:hover {
    color: red;
}

Try to always target the class of the element you want add custom CSS, not the tag (in this case the <span> tag).