Changing X-button styles

[bartenderonduty]

Hey Themeco Team,

I’m having a difficult time editing the text color of a custom button in X. I know there is probably an easy solution to this, but for some reason I don’t think I’m targeting the button properly. I set a custom class of “contact-button-red” for this particular button and I would like to change the default font color from black to white. I’ve read similar cases in your support forum, and attempted a bunch of trial and error, but haven’t been able to figure this one out.

Can you help?

Thank you!

[nabeel]

Hi @bartenderonduty ,

Thank you for reaching out to us. Instead of using CSS to change the text color, you should use the Button element’s settings in Cornerstone to do it by simply inspecting your button and under Primary Text Style section, change the Text Color:

Hope this helps!

[bartenderonduty]

The idea with using CSS is that if I ever needed to change these buttons site-wide, I would only need to update the CSS for the button once instead of going through every page of the site to update the buttons individually.

Do you happen to have CSS to accomplish this?

[ruenel]

Hey @bartenderonduty,

To resolve your issue, simply use this custom css:

.contact-button-red .x-anchor-text-primary {
  color: white;
}

.contact-button-red:hover .x-anchor-text-primary {
  color: yellow;
}

Feel free to change the colors.

[bartenderonduty]

Thank you!

[ruenel]

You are most welcome!