Styling CTAs with Custom CSS - How to implement?

[vPhilipp]

Hey there,

I'm currently trying to create a lot of CTAs for our Wordpress Website.

So far, it works pretty good. I'm now at the point, where I want to implement hover effects and I don't know where to add these exactly. I'm pretty firm with CSS and HTML, but I don't exactly understand the connection within Hubspot.

I've done the following:

- created the CTA in Hubspot and added custom CSS for pure styling purpose (rounded borders, color and so on)

- I wanted to add the Hover in there too, this didn't worked as I lost all styling

- I created a new .css File in the File Manager and added it into custom css classes. Didn't work

- I added the custom CSS for the hover effect to the custom css property of my website and added the class to the CTA in Hubspot - still doesn't work

- I tried adding the custom CSS into Wordpress via "Theme Custom CSS (using WPAstra), adding it via the Plugin "Insert Header & Footer", nothing works

I really need help to add these hover effects and I'm thankful for every help!

Regards

Philipp

[Kevin-C · Accepted solution]

Hey @vPhilipp 

Could you provide a link to a page with the CTAs so we can take a closer look? That might help us get closer to a solution, faster!

So in my unsolicited opinion its never a good idea to manage style of CTAs independently. Scaling will become a pain, especially in your case where you've got a large number of CTAs!

With that said what I might recommend is creating all of your CTAs as a "Link (No Style)".

Then on your WP site add the CSS to create the button look and interaction!

Doing this will allow you to avoid having to override HS style!

.hs-cta-wrapper .hs-cta-node a.cta_button:hover {
  background: #aa060f!important;
}

MORE UNSOLICITED ADVICE!!!

With the method above you could even build in the ability to name space your CSS which would allow you to work with say themes or darkmode much easier:

/* Dark-mode or theme styles */
#global-dark-mode .hs-cta-wrapper .hs-cta-node a.cta_button:hover {
  background: orange!important;
}

/* Normal style */
.hs-cta-wrapper .hs-cta-node a.cta_button:hover {
  background: magenta!important;
}

[vPhilipp]

Hey there,

I just tested it and it worked like a charm! Thanks a lot!

Regards

[vPhilipp]

Of course: This would be https://vertical.de

I'm currently using the "Simple" Button Style and set some parameters so that the button is rounded in hubspot. I just want to add the "hover" part. 

I'll try your method tomorrow and will then report! Thanks in advance!