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. 🙂

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

…is producing a resolutely square and red button.

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

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

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

Branko,

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

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

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.

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.

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.