CMS Development

whitecolin
Member

CTA custom hover color?

SOLVE

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

 

1 Accepted solution
Stephanie-OG
Solution
Key Advisor

CTA custom hover color?

SOLVE

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!

 


Stephanie O'Gay GarciaHubSpot Design / Development

Website | Contact

 

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

View solution in original post

5 Replies 5
BBloomquist
Participant

CTA custom hover color?

SOLVE

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! 👏👏👏

0 Upvotes
Stephanie-OG
Solution
Key Advisor

CTA custom hover color?

SOLVE

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!

 


Stephanie O'Gay GarciaHubSpot Design / Development

Website | Contact

 

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

AShaw4
Member

CTA custom hover color?

SOLVE

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
Member

CTA custom hover color?

SOLVE

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
Participant

CTA custom hover color?

SOLVE

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

0 Upvotes