CTA custom hover color?

[whitecolin]

Hi,

I'm trying to customize the look of a CTA button.  It's a rectangular button, we've figured out how use custom CSS for a few things 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 #AE132A, and I want the hover color to be #aa060f, 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

[BBloomquist]

The CTA Editor is definitely becoming outdated. I've been disappointed by the silly options to add texture to custom CTAs while we can't customize the shape and hover colors to match the rest of the buttons on our landing pages. CTA editor is due for an update! 👏👏👏

[Stephanie-OG · Accepted solution]

Within the "Custom CSS" of the CTA itself you can't add hover effects but, if you give your CTA a class (e.g. "myCTA"), in your stylesheet you can add something like the following: 

.myCTA:hover {
  background-color: #aa060f;
}

I hope that helps!

---

HubSpot Design / Development

Website | Contact

If this helped, please mark it as the solution to your question, thanks!

[AShaw4]

Hi, I find your solution does not work since the CTAs have system styles applied to a ID which also have !important added so the class styles will never override the system ID sytems

[whitecolin]

Thank you both, I guess we will go the stylesheet route. Would be great if there were some documentation on what CTA Custom CSS function can handle, and what it can't.

Thx!

[ARaycove]

Yep if they don't want to add the feature into the settings they should atleast provide us some sort of documentation.