Vaadin button color change

I am very new to vaadin, so this might be a very basic question.
I want to change the color of my button. I am using this code in the css file

.v-button-Red .v-button-wrap
    font-weight: bold;
    background: red;

And in my java code:

if (isCondition.equalsIgnoreCase("true")) {

But the color does not change to red. I have tried so many things but nothing seems to work on this. Please help me. I would greatly appreciate your response.



The problem here is that the CSS for the caption on buttons in Vaadin actually targets the v-button-caption class. So, if you want red bold text on your Red button, you want the following

.v-button-Red .v-button-caption {
    font-weight: bold;

Changing the background for the “ordinary” buttons in Reindeer theme is not quite so easy, as they are actually images. If you did want to do that, you’d actually want to targe the v-button-wrap class, e.g.

.v-button-Red .v-button-wrap {
.v-button-Red .v-button-caption {
    font-weight: bold;

As you can see, it’s not quite what you’re after…

Ultimately, the only way to find out about these things is to use a tool such as Firebug or Chrome Developer tools to inspect the generated DOM and see which CSS rules are affecting the element you want to style. (That’s how I did this - I can’t remember all of the rules/styles!) It soon becomes second nature.



I was facing a similar problem and i think this could probably work for the background:

.v-button.v-button-Red .v-button-wrap{
    background: red;


I’m having the same problem.

To take the original’s question situation :
Setting sampleBtn.setStyleName(“Red”);

Doesn’t work for me. Could it be that “Red” should be replaced with “v-button-Red”?
I’ll try this as soon as i have a chance.

Thing is, in my project scss there’s an @include reindeer…

I don’t want the color to change for all buttons on my vaadin app.
Just for the ones I set a specific style.

Besides that i’m also facing a layout problem with the buttons in a gridlayout.
Getting them all having the same size…
I’m able to set a background color on the button. The caption, which contains the image won’t change color but the lefthand side of the button image disappears when setting the background on the button.
Each button’s text is a number or nothing.
If i set setfullsize on the buttons I get a background repeat for the buttons.

I’ll post some images soon…

Anyway I found a work around.
I made labels instead of buttons.
Giving them the desired layout and using them as buttons.

I also use an horizontalsplitpanel.
The righside is a horizontallayout…
It contants a gridlayout and a vertical layout.
When moving the slider to the right. The components from the gridlayout and the components from the verticallayout collde, get on top of each other. I tried setting margin on the rightside on true… setting spacing on tue and setting spacing on the individual subcomponent layouts on true. But that doesn’t fix it.
Any suggestions?