Change CSS from a Button, with link style.

Vaadin 6 / 7 / 8 Framework UI
1

Ok guys,

I’m not an expert with CSS, so if you can help me:

I instantiated a Button and set it’s style name “Button.STYLE_LINK”,
because I don’t want those borders and images from the normal button,
and I want to change it’s colors, but not from all links of the application,
just one by one.

I want one link with text color blue, and another one red. Both are Buttons.

Can someone help me?

thanks.

2

you can add multiple styles to your buttons. first add the Button.STYLE_LINK that you already have, and then make up a new one like “my-awesome-green-link” which you give the link specific styles.

Something like this (untested pseudo code):

Button myButton = new Button();
myButton.setStyleName(Button.STYLE_LINK);
myButton.addStyleName("my-awesome-green-link");

And then the css:

.v-button-link-my-awesome-green-link .v-button-caption{
  color:green;
}

May be that I have the selector wrong or that you have to refer to a link to get that working as it should. Use a code inspector to find the exact selector. Drop a message if you still have problems.

3

Thank you Jens, but it has not worked for me, this is what firebug shows me:


<div style="float: left; margin-left: 0px;">
  <div tabindex="0" class="v-button v-button-link link v-button-botaoPaginacaoGridProdutos botaoPaginacaoGridProdutos" role="button">
    <span class="v-button-wrap"><span class="v-button-caption">0</span>
    </span>
  </div>
</div>

This “botaoPaginacaoGridProdutos” is the styleName I have added in the button.
But it looks like it could not override the link style.

I tried setting the CSS style for the “v-button-botaoPaginacaoGridProdutos” also.

4

how does your css look like? have you tried

.botaoPaginacaoGridProdutos .v-button-wrap .v-button-caption {
 color:green;
}