Archived topic
Button color issue
5 replies · Started by Margot on January 11, 2020
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.
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.
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 ?
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;
}
I did what you said and it works well !
Thank you very much
You're welcome