CTA change color on hover

[EKummer]

Hi everybody,

just created a CTA with backgroud color yellow/white font - how could I adapt the CSS so the background ist e.g. blue when the mouse hovers over it?

Have tried a couple of codes but dont seem to have the right approach. 

Some advice is much appreciated.

Many thanks, elke 

[Stephanie-OG · Accepted solution]

Hi @EKummer 

You'll want to use a CSS class to achieve that. When you create the CTA, set the "Button style" to "Link (No Style)" and then under "Advanced options", add in a "Custom CSS class":

This class name can be anything, as long as it uses letters, numbers, hyphens (-) or dashes (_), starts with a  letter and has no spaces.

Then in your website's CSS (where this is depends on your website), you'll style the button's regular version (using .my-button), and the version on hover (using .my-button:hover), something like this: 

.my-button {
  background-color: yellow;
  border-color: yellow;
  color: white;
}

.my-button:hover {
  background-color: white;
  border-color: yellow;
  color: yellow;
}

Note that you might need to add more CSS, depending on your button's existing styling. You may also wish to style what the button looks like when focused (.button:focus) or when it's active (.button:active).

I hope that helps!

---

Stephanie O'Gay Garcia

Freelance HubSpot CMS Developer

Website | Contact

[DanKemp]

Hi Stephanie - I feel like I'm going mad trying to get this to work. I have followed these instructions - I create the CTA in Hubspot using the Link (No Style) and add a custom css class. I paste the embed code into Wordpress. I add the css class to my stylesheet in Wordpress and try to make changes - nothing happens! I can't see how it would - as the embed code seems to ouput the CTA as an image in any case. What am I missing?!

[Stephanie-OG]

Hey @DanKemp - I just tested adding an embedded CTA externally on my end and it does work, the CSS class is added and I'm able to update it using CSS on the external stylesheet. 

Perhaps you could send a link to the page you're working on to take a look?

[TiphaineCuisset]

Hi @EKummer 

Thank you for reaching out.

I want to tag some of our experts on this - @Kevin-C @Stephanie-OG @Teun do you have any advice for @EKummer on this?

Thank you!

Best

Tiphaine