GWT Button(Image + Text)

Question

Hi,

I need to make a round button with some text on it (Centered). For the round button, I'm using an Image and onClick methods, but my problems come when i'm trying to overlap some text (Centered) over the image.

"Like this "

The text have to be customizable, so I can't just make the image previously

Any hints of how to do that?

Thanks in advance.

Answer 1

Is this what you are trying to do?

http://stackoverflow.com/questions/1193249/imagebutton-in-gwt

Answer 2

You can also achieve this using a bit of css

Button b = new Button("Calcular");
b.setPixelSize(200, 127);
DOM.setStyleAttribute(b.getElement(), "background", "transparent url('http://www.greenthumbgraphics.com/images/buttons/shapes/oval.png')");
DOM.setStyleAttribute(b.getElement(), "border", "solid 0px white");
DOM.setStyleAttribute(b.getElement(), "textAlign", "center");
RootPanel.get().add(b);

But there is a problem, button clicks work even in the transparent areas. Also, if you are looking for different images on mouseover and mousedown, then using CustomButton is a better option.