Setting caption alignment in NativeButton

Flow
1

Hi guys,

I am new on vaadin and I begin to test different component and adding style.

I try to create a Native button composed with an icon and below a text.
I want that this Icon change on the mouse hover so I don’t use the icon property and I use the css property background to add my icon to my button and it work fine but I have a problem with the caption.
The caption is align at the middle center of the button and is over my icon.
I tried vertical-align, spacing etc but nothing seems to work so if somebody have an idea or if there is another way to do it…
Here is my scss file and I posted a printscreen of the result.

Thanks

.v-button-manage-ticket {
border: none;
background: transparent url(img/manage_ticket.png) no-repeat top center;

	.v-nativebutton-caption { 
		font-family : "Myriad Pro","Gill Sans", "Gill Sans MT", Calibri, sans-serif;
		color: white;		
	}

}

13204.bmp (28 KB)

2

Nobody :frowning: ?

3

You can use CSS padding-top to move the text near the bottom. You’ll probably need to experiment a bit to find a good value - and remember that things might not look the same on every browser…