Call to action button color

Hi!
I would like to change the color of my Call to Action button - I’ve set it to green through editing the widget -> design. However, the button remains transparent with the outline and font green, but not the interior of the button. Screen grab to exemplify this - help!

Hello there,

Button’s color option should be working fine. Probably you didn’t level up the opacity bar?

Regards,
Kharis

Thanks Kharis! Sooo, where exactly is that? I’m looking at the edit tool in the widget and don’t see a color toolbar like the one you show?

Sorry for incorrect suggestion. I assumed you’re using Elementor builder. For Sydney FP Call to Action widget, you can add custom class name to Attributes options under Widget Styles in the widget settings.

42%20AM

Then you could add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .my-button .roll-button {
      background-color: #ff0000;
      color: #fff;
    }

    .my-button .roll-button:hover {
      background-color: #fff000;
      color: #fff;
    }

Regards,
Kharis

Oh thank you, that did the trick! Would you by chance know the color # for transparent? So that when the mouse hovers over the call to action button, it doesn’t go to another color but just transparent?

You can use transparent value.

    .my-button .roll-button:hover {
      background-color: transparent;
      color: #fff;
    }

Regards,
Kharis

Ok that’s great, thanks so much!
One final, question - where can I locate where to change the font on the button? (See screengrab, I’d like the font on “Contact Us” to be white.

Try this adding !important argument in the color line because it looks like it uses widget’s style. So the code will look like this:

    .my-button .roll-button {
      background-color: #ff0000;
      color: #fff !important;
    }

Regards,
Kharis

Hmm, tried that - it did change it to white font when the mouse is hovering over it (first screengrab), but remains with a kind of overlap over it almost when mouse isn’t hovering over it (second screengrab). Strange! Do you think there’s a way to make it white all the time?

2

Try this code:

    .my-button .roll-button:hover {
      background-color: transparent;
      color: #fff !important;
    }

Regards,
Kharis

Same result. Hm! Is there code that refers to the font color? That’s the issue - it doesn’t seem pure white, it more like a light green. (in the second screengrab in my last message above.

Hello there,

Do you have a link to share here to allow me inspecting it directly in order to get the exact code?

Regards,
Kharis

Hi Kharis,
Yes: http://henry.joshschuyler.com/
Thanks for your continued help, really appreciate!
Cailley

Hello there,

I inspected your site with web browser’s inspector tool and found that the latest CSS code where it has !important argument hasn’t yet ben loaded. I guess site caching blocks it and still load the older code. Try flushing the applied cache whenever adding extra code or make some changes.

https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

Regards,
Kharis

Thanks Kharis. I cleared my browser’s cache and saw no change, so perhaps I need a cache plugin.
Out of curiosity, how could you see that that the CSS code hadn’t been loaded? Just so I know how to check that in the future. Many thanks!

Hello there,

I used web browser’s inspector tool and point the mouse to the button. When HTML code showing up select the element which has .my-button selector. The CSS code should be displayed at the right side. However these lines didn’t present.

    .my-button .roll-button {
      background-color: #ff0000;
      color: #fff !important;
    }

Regards,
Kharis