Button Styling - newbie question

Flow
1

Warning - I am brand new to Vaadin coming from the Flex/Actionscript world. I’m excited about Vaadin, but struggling a bit with simple things. I want to create custom buttons that have specific .png images for the various states - up, over, down, disabled. In the AS world these were called skins. My buttons do not have labels, just these images. I was able to accomplish what I wanted using the NativeButton, but I read in the forum that Button is preferred. When I try to take my NativeButton styles and apply them to Button (see below), I can’t figure out how to get rid of Vaadin’s button appearance which seems to be laid on top of my images.

.v-button-customIcon,
.v-button-customIcon:active,
.v-button-customIcon:focus {
outline: none;
border: none;
background: transparent url(icons/IconUp.png) no-repeat;
width: 42px;
height: 42px;
}
.v-button-customIcon:hover {
background: transparent url(icons/IconOver.png) no-repeat;
}
.v-button-customIcon:disabled {
background: transparent url(icons/IconDisabled.png) no-repeat;
}

Any help would be greatly appreciated.

2

The Button component is quite hard to style, especially when using the reindeer theme. You need bitmaps for the various parts, very specific rules to override ones from reindeer etc.

If you have been able to style it and don’t have an obvious reason why NativeButton is not ok for you, I would recommend sticking with it - at least for those buttons you need to style this way. Otherwise, either use some other theme as a basis (e.g. chameleon rules for a Button should be easier to override) or investigate how to override each of the reindeer rules using e.g. Firebug.