CMS Development

whitecolin
Membro

CTA custom hover color?

resolver

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 Solução aceita
Stephanie-OG
Solução
Conselheiro(a) de destaque

CTA custom hover color?

resolver

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!

Exibir solução no post original

5 Respostas 5
BBloomquist
Participante

CTA custom hover color?

resolver

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 Avaliação positiva
Stephanie-OG
Solução
Conselheiro(a) de destaque

CTA custom hover color?

resolver

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
Membro

CTA custom hover color?

resolver

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
Membro

CTA custom hover color?

resolver

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
Participante

CTA custom hover color?

resolver

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

0 Avaliação positiva