Docs

[Pakal P]

How do I change the color of a specific button. I do not mean the customizer settings, but the bgnd and font color for just one specific button.
THanks in advance,
P_

[Christian]

Hey Pakal,

You can add inline styles for specific buttons. For example

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

See style=”background:red;color:blue;”.

Hope that helps. 🙂

[Beth M]

Hi! I’m having the same issue. Applying styles inline is not working at all. For example this:

[button style=”background_color:#e3e3e3” shape=”pill”]

…is producing a resolutely square and red button.

[Branko K]

Same for me. Adding style for background works, but not for button color. That one always appears the way it is globally set in the customizer.

[Branko K]

Also, when I use instructions in http://theme.co/x/member/kb/implementing-additional-button-colors/, the color that changes based on my custom css is button text color, not the color of button filling itself.

I do have the latest version of x-shortcode plugin installed.

The site: http://www.rusinskyjazyk.sk/

[Christian]

Hey Beth,

You syntax is wrong. CSS uses dash “-” not underscore.

Branko,

Can you give us the actual shortcode you are using and your CSS.

Thanks.

[Branko K]

Hi X and thanks!

I’m using the flat button shortcode, [button shape=”rounded” size=”x-large” float=”none” block=”true” info=”tooltip” info_place=”top” info_trigger=”hover” href=”http://www.rusinskyjazyk.sk/podporte/” title=”Podporte školy rusínskeho jazyka darovaním času alebo peňazí” class=”green-btn”]

I put this into the custom field of the customizer:
.x-btn.green-btn {
color: #03af58;
border-color: #002e00;
background color: transparent;
}

.x-btn.my-btn:hover {
color: #002e00;
border-color: #002e00;
background color: transparent;
}

I’m leaving this setting active on the homepage of rusinskyjazyk.sk for you to see. It’s the lower button, as you’ll be able to tell.

Thanks heaps, can’t wait to hear back. I assume I’m doing something very basic very wrong.
B

[Alexander]

Hi Branko,

In Visual Composer, edit your button and add my-btn to the “Classes” field. This will allow your CSS to work.

You shortcode classes would look like this:
class="green-btn my-btn"

Other than that, you’re really close. You CSS should be applying once your button is given the class you’re targeting.

[Branko K]

That looks good, so I’ve tried it, but I still only get the text of the button appear green. The button itself keeps the default color.

I also tried fixing the custom CSS in the customizer, so that there’s only one class and I used only green-btn in the Class field of the button shortcode.
.x-btn.green-btn {
color: #03af58;
border-color: #002e00;
background color: transparent;
}

.x-btn.green-btn:hover {
color: #002e00;
border-color: #002e00;
background color: transparent;
}

Still no difference. The text displays green, the button blue.

I want the text color to stay the same (white), and the specific button to be green. With a darker green on hover.

I even tried putting that piece of CSS into the CSS field of the specific page, and it behaves the same.

How do I tell X to make the button green and leave text color white (default)? I’m pretty confused at this point.

[Alexander]

Hi Branko,

color will set the text color, and background-color will set the color of the element itself. So it sounds like you don’t want to change color at all (default is already white)

Then you can change background color: transparent; to background color: #03af58; The same change can be made in the rules for hover.

[Branko K]

Thanks, that confused me. I was having a hard time figuring this out also because when setting up classes, I put in background color instead of background-color.

Thanks!!

[Aman]

You’re welcome Branko

[robert17]

it would be helpful if this was added to the buttons page on the shortcodes site.

[Nico]

Hi There,

Thanks for writing in.

I will share your advice to our forum and site administrator so he could look on it.

Thank you so much for helping our x theme to be better. Feel free to share us advices or suggestions.

Have a great day! 🙂

[Nico]

Hi There,

Thanks for writing in.

I will share your advice to our forum and site administrator so he could look on it.

Thank you so much for helping our x theme to be better. Feel free to share us advices or suggestions.

Meanwhile, for more guide on how to change your button color, you could check our knowledge base

https://community.theme.co/kb/implementing-additional-button-colors/

Have a great day! 🙂

[Author]

Posts