Two CSS classes for button link

Flow
1

Hi!

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:

2

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
    .v-button-wrap
        .v-button-caption

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

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

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:

    button.setStyleName(BaseTheme.BUTTON_LINK);
    button.addStyleName("my-stylename");

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:

4

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: