Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Button styling for icon-align-top
Hi,
I want to use buttons with the above mentioned style. As icons I use icons from the VaadinIcon font.
There are 2 things I try to solve:
1. Adjusting the size of the button over style (e.g. huge) gives me both big icon and(!) caption. What I want is to paint the icon bigger, but keep the caption small. As I see the attached style goes to the div of the button v-button-icon-align-top, where the icon and the caption are located in inner spans with different styles: v-icon and v-button-caption. How can i adjust both sizes (icon and caption) separately here?
2. As an addition it would be great to realize a mouse-over effect with different caption color. Is there a way as well?
Kind regards,
Michael
There is a number of ways you can go about it.
If you KNOW for certain that the combination of BUTTON_ICON_ALIGN_TOP and BUTTON_HUGE should always look a certain way then you could do:
btn.addStyleName(ValoTheme.BUTTON_ICON_ALIGN_TOP + " " + ValoTheme.BUTTON_HUGE);
.icon-align-top.huge .v-button-caption {
font-size: $v-font-size;
}
This might look a bit weird since the font-size is defined in v-button. Another alternative is to create your own style. E.g. "huge-icon".
btn.addStyleName(ValoTheme.BUTTON_ICON_ALIGN_TOP + " " + "huge-icon");
.icon-align-top.huge-icon .v-icon {
font-size: $v-font-size--huge;
}
And lastly, for the 2nd question:
.v-button:hover {
color: green;
}