Transparent Button on AbsoluteLayout

Flow
1

Hello :),

I’m relativly new to Vaadin and try to make transparent Buttons over an Image.
The Image is in an AbsoluteLayout and for example in the picture is a button Test.

I’m not able to make that Button transparent, I tried:

Button test = new Button("Test");
		test.addStyleName("transparent");
		absoluteLayout.addComponent(test, "top:200px; left: 200px;");

.transparent .v-button-caption {
	background: none;
    border: 1px solid green;

The aim is, that I have 2 Buttons which don’t have a background. One in green over the green marks in the picture and one in yellow over the yellow marks.

Thanks in advance for your help! (And sorry for my English)
17360620.png

2

Hi Marvin,

You can try test.addStyleName(ValoTheme.BUTTON_BORDERLESS);, that should work.

Valo’s button styles are viewable here: https://demo.vaadin.com/valo-theme/#!buttons-and-links.

Also, if you wanted to theme a button’s background, I think you have to target .v-button and not necessarily .v-button-caption.

3

Heyy Joacim,

Thanks a lot! It works perfectly :slight_smile: