Two CSS classes for button link


I’ve been trying to create two separate styles for button links. I’ve managed so far as to change the font color of all the links by using “.v-button-link .v-button-caption” as the class name in CSS. The problem is that I don’t know how to make two unique class names so I could have two different color sets for button links. I’ve tried using a simple class name like “.white” and then something like “.v-button-link .v-button-caption .white”, but to no success.

Maybe someone knows how this should be done. I’m still a little bit confused how to edit styles in Vaadin. Ow, and I’ll be very very thankful for any help given. :slight_smile:

The stylename you give to a component is added to the root element of a component (in addition to the original style of the component postfixed with the stylename). So in case of the button the following hierarchy of classes is created:

.v-button-my-stylename .my-stylename

You can then use the following selector to match different styled buttons:

.my-stylename .v-button-caption {
    color: ...

Ok, thanks a lot. I got it to work! Another problem was that I was trying to make it to work with a single style class. So, apparently, you can’t create another style that uses v-button-link, because it already has a style name ‘link’ for the root ‘v-button’? I did try it at first, but finally got my code to work like this:


And my CSS contained the following:

.my-stylename .v-button-caption
    color: white;

So, if there’s something I’ve misunderstood, I’d be happy to be corrected. Otherwise the problem is solved and I’m content. :slight_smile:

You’re free to use as many stylenames as you wish for any component. You can use the built-in stylenames to get you started and then build upon that, like you’ve done here.

And you can of course use something else than “my-stylename” for the actual name :wink: