[Support request] How to override text link color on button in sidebar?

[Jonny]

I am trying to override the text link color on a button in my sidebar but on the front end, the link color is not changing from the site-wide link colors that I have set in Customiser.

For reference, the button in the sidebar I am referring to reads “Get a FREE QUOTE” – I have linked the URL to a page where my sidebar is visible.

I want the button background color to be blue, the text to be white, and the link hover color to be black.

This is what I have set it to using blocks in the widgets area, however, when checking it on the front end the text is dark blue and the hover color is light blue.

[David]

Hi there,

try this CSS:

.sidebar .widget .gb-button-wrapper .gb-button:not(:hover) {
    color: #fff;
}

[Jonny]

Hi David, I added the CSS but the link hover color is still light blue and not black.

Is it possible instead for there to be NO hover color and for the text inside the button to stay white?

[Fernando]

Hi Jonny,

To clarify, when you change this color: https://share.getcloudapp.com/6quGAqWy in the customizer, it doesn’t change the hover color?

If not, try adding this CSS:

.sidebar .widget .gb-button-wrapper .gb-button:hover {
    color: #fff;
}

[Author]

Posts