Transparent button font color

[denajseymour]

Not sure why this is so elusive but how do I change the font color of a button via shortcode? I’m inserting a transparent button into a post and I need the color of the text inside the button to be black.

I know this is basic. Thanks!

[ruenel]

Hello There,

Thanks for posting in!

Are you using something like this shortcode?

[x_button type="transparent" shape="square" size="mini" href="#example" title="Example"]Square Button[/button]

You can add an inline css to have a color for the text of the button. Simply add something like this:

[x_button type="transparent" shape="square" size="mini" href="#example" title="Example" style="color:red;"]Square Button[/button]

Just keep in mind that inline css gets prioritize than the custom css or the default css. Both the active and the hover text color of the button will become and always be red for example. If you need to have a different button text color when you hover over the button, I would highly suggest that your add a custom class in the shortcode and use a custom css instead.

For example shortcode:

[x_button type="transparent my-button" shape="square" size="mini" href="#example" title="Example"]Square Button[/button]

And then in the X > Theme Options > Global CSS (http://prntscr.com/evui3r), you can add a custom css like this:

.my-button {
  color: red !important;
}

.my-button:hover {
  color: yellow !important;
}

Hope this explains it briefly.

[denajseymour]

It did not seem to work as intended, but I may be doing something wrong. Here’s the link:

Combatting the Prevalence of HIV/AIDS in The Caribbean | BAYP

The buttons are at the end of the article. The first is with this shortcode:

[button type=“transparent” shape=“rounded” style=“color:red;” size=“large” href=“http://bayp.co/wp-content/uploads/2018/07/hiv-final.pdf” title=“Combatting the Prevalence of HIV/AIDS in The Caribbean”]Download The Full Article[/button]

The second has this shortcode and the additional css u suggested has been added:

[x_button type=“transparent my-button” shape=“square” size=“mini” href="#example" title=“Example”]Square Button[/button]

[christopher]

Hi Denaj,

I suggest that you go to X > Theme Options > Buttons and set the colors there:

That will surely fix the issue you are experiencing. But if you only want to that specific one I do suggest that you add a Global Block which contains the Button element which gives you all the options to change the color and stuff, then use the Global block as a Shortcode in the page in question instead of using the old shortcode system.

Thank you.