Docs

[Nootropicsitalia]

Well the title says it all.

I am trying to find a way to change the color of a button generated by a shortcode, without affecting the other buttons.

Here is one of my shortcodes: [x_button shape=”square” size=”jumbo” float=”none” info=”none” info_place=”top” info_trigger=”hover”]Scopri di più![/x_button]</p>

It’s the basic, nothing really changed, but i have no idea of how to edit the code so it changes the buttons color.

– Shady

[Rupok]

Hi Shady,

Thanks for writing in! Let’s follow this – https://community.theme.co/kb/implementing-additional-button-colors/

I believe that’s what you are looking for.

Cheers!

[Thai]

Hi Shady,

Please try with this shortcode:

[x_button shape="square" style="background-color: #f00f00; color: #fff;" size="jumbo" float="none" info="none" info_place="top" info_trigger="hover"]Scopri di più![/x_button]

Hope it helps 🙂

[Nootropicsitalia]

Hello Thai,

That partially worked. it does not get the sides of the button, i’ll attach a screenshot.

Thank you :)!

– Shady

[Thai]

Hi There,

Please provide us with your website URL so we can take a closer look.

Thanks.

[Nootropicsitalia]

That is going to be a tad hard since it’s in maintenance mode. Any suggestions?

– Shady

[Rahul]

Hi there,

Would you mind providing us with login credentials so we can take a closer look? This way we will be able to have a look at the CSS code of the button or the shortcode button.

To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[Nootropicsitalia]

This reply has been marked as private.

[Paul R]

Hi,

You can add a class to your button shortcode.

eg.

[x_button shape="square" class="my-button" size="jumbo" float="none" info="none" info_place="top" info_trigger="hover"]Scopri di più![/x_button]

Then target it in your css to change the color.

`
.my-button {
background-color: #23c469;
color: #fff;
border-color: #23c469;
box-shadow: 0 0.25em 0 0 #23c469,0 4px 9px rgba(0,0,0,0.75);
}
.

You need to add border color and box-shadow

Hope that helps.

[Nootropicsitalia]

Yes it did help, thank you :)!

One more question, how can i target other buttons?

– Shady

[Paul R]

If you want them in the same color, you can add the class my-button to your other buttons.

But if you want another color, you can add a different class eg. my-button-2 then add another css

eg.

.my-button-2 {
background-color: red;
color: #fff;
border-color: red;
box-shadow: 0 0.25em 0 0 red,0 4px 9px rgba(0,0,0,0.75);
}

Hope that helps.

[Nootropicsitalia]

Yes,

Thank you again for the quick response. Any way to also change the hover color; when people hover in the button it becomes blue.

– Shady

[Prasant Rai]

Hello Shady,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

.my-button-2:hover {
       background-color: #000 !important;
}

Please change color code as per requirement.

Thanks.

[Author]

Posts