Docs

[gavgeorge]

Hi there,

I have some css in the Customizer to change our button color from blue to green on certain pages of our site. Recently it stopped working, and all buttons are now blue except for a tiny green border around the ones that should be green.

The customizer css is:

.x-btn-cta {
color: #ffffff;
border-color: #1a9e00;
}

.x-btn-cta:hover {
color: #ffffff;
border-color: #199301;
}

And I’ll send you the URL in a separate email.

Can you help?

Gav

[Christopher]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[gavgeorge]

This reply has been marked as private.

[Christopher]

Hi there,

Please update your code to :

x-btn-cta {
    color: #fff;
    border-color: #1a9e00 !important;
    border-width:2px;
    background-color: #1a9e00 !important;
}

Hope it helps.

[gavgeorge]

This makes the background green and the button is still blue. We need a green button and transparent background. Thanks

[Joao]

Hi george,

Did you check your Customizer Button Settings to be sure they are set according to your wishes?

Please try using this code instead of the code above provided.

You can change the color of “color: #fff” to another color if you want to change the color of the button text and if you would like a thicker border you can change the value of border-width:

x-btn-cta {
    color: #fff;
    border-color: #1a9e00 !important;
    border-width: 2px;
    background-color: transparent !important;
    
}

x-btn-cta:hover {
    color: #fff;
    border-color: #1a9e00 !important;
    border-width: 2px;
    background-color: transparent !important;
}

Hope that helps,

Joao

[gavgeorge]

Hi,

This is not the problem.

The button settings in customizer are correct as the default buttons are blue.

The button text is fine at color #fff.

The color of the button itself is the problem.

Please see attached – this is the result when x-btn-cta is the button class.

[John Ezra]

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.x-alert.x-alert-muted.x-alert-block 
a.x-btn.x-btn-cta {
    background-color: #1a9e00;
}

Hope this helps – thanks!

[John Ezra]

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.x-alert.x-alert-muted.x-alert-block 
a.x-btn.x-btn-cta {
    background-color: #1a9e00;
}

Hope this helps – thanks!

[gavgeorge]

Brilliant! Thanks John.

[John Ezra]

You’re most welcome! 🙂

[gavgeorge]

Hi again,

I’ve just discovered the new code you provided doesn’t work on buttons with marketing circles (circle=”true”).

How can I do this on selected buttons?

Thanks

[Rupok]

Hi there,

Can you provide the exact URL where the button is being used?

Cheers!

[gavgeorge]

This reply has been marked as private.

[Friech]

Hi There,

Look for this custom css code on your customizer

.x-btn.x-btn-cta:hover {
    color: #fff;
    border-color: #199301;
}

And update it to this:

.x-btn.x-btn-cta:hover,
.x-btn-circle-wrap.x-btn-cta a {
	background-color: #1a9e00;
    color: #fff;
    border-color: #199301;
}

Hope it helps, Cheers!

[Author]

Posts