How to customize CTA button hover color

Develop, Build & Integrate CMS Development
1

Hi,

I’m trying to customize the look of a CTA button. It’s a rectangular button, we’ve figured out how use the Custom CSS function to modify a few properties on the button but I am unable to figure out how to get the hover-over background color to change from the default, which seems to be a slightly lighter color than than main background color.

For example, if my main button color is #aa060f, and I want the hover color to be #565656, what would be the custom CSS to do that? I’ve tried a few variations of :hover code but nothing seems to work.

Thx!

Colin

2

@whitecolin, you will need to target the a in the cta.

If you will be reusing this style, I would add a class to the cta in the CTA builder.

let’s say you use style1 as your css class

then you can add to your css:

a.style1:hover{
 color: #565656
}

there is a chance you may need to use !important.

if that doesnt work, please provide a link to an example and i will provide further thoughts

3

thanks Dennis

4

This didn’t work for me. Is there another workaround for hover styling?

5

@Nomicamille , have a reference link?

6

Hi,

This didn’t work for me. I have added class style1 in Custom CSS class and added the code too. Any other workaround?

7

Constant Contact forms allows for this. I’m surprised this is not a standard customization with HubSpot.