[Resolved] Button color issue

[Margot]

Hello there,

I changed my button color but it works only for one button and not the other (the ghost one).

I made the setting in Customizer > Colors > Buttons

Can you help me with this ?

Thank you.

[David]

Hi there,

the Ghost Button uses CSS to style it.
Go to Customizer > Additional CSS and look for the these two CSS Rules:

For static color:

button.ghost, 
html input[type="button"].ghost, input[type="reset"].ghost, input[type="submit"].ghost, a.button.ghost, 
a.button.ghost:visited, 
a.wp-block-button__link.ghost:not(.has-background) {
	background: transparent;
	color: inherit;
	border-color: inherit;
}

For Hover Colors:

button.ghost:hover, 
html input[type="button"].ghost:hover, input[type="reset"].ghost:hover, input[type="submit"].ghost:hover, a.button.ghost:hover, 
a.wp-block-button__link.ghost:not(.has-background):hover {
	background: transparent;
	color: #1e73be;
}

Let us know if you need a hand changing the CSS by letting us know if what background, text and border colors you need.

[Margot]

Thank you for your answer.

I would like to change the background hover color in the color #00b388. Do I have to copy the second CSS rule with my color code in it in the additional CSS ?

[David]

You would replace the Second CSS Rule with this:

button.ghost:hover, 
html input[type="button"].ghost:hover, input[type="reset"].ghost:hover, input[type="submit"].ghost:hover, a.button.ghost:hover, 
a.wp-block-button__link.ghost:not(.has-background):hover {
	background-color: #00b388;
	color: #1e73be;
}

[Margot]

I did what you said and it works well !

Thank you very much

[David]

You’re welcome

[Author]

Posts