Here's a little custom widget that is very easy to code and to implement...
A custom button with different states, Mouseh hover, Mouse down and Mouse out...

You can set different stylenames to and assign other background images to distiguish one state
from the other... here's the code... :)

MyButton.java

package MyPackage.customwidgets;

import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.ui.Button;

public class MyButton extends Button {
String styleName = new String();
public MyButton(String style) {
styleName = style;
}
public MyButton(String style, String label) {
setText(label);
styleName = style;
}
public void onLoad() {
setStyleName(styleName + "Normal");
sinkEvents(Event.ONCLICK | Event.MOUSEEVENTS);
}
public void onBrowserEvent(Event event) {
super.onBrowserEvent(event);
switch(DOM.eventGetType(event)) {
case Event.ONMOUSEDOWN:
super.setStyleName(styleName + "Down");
break;
case Event.ONMOUSEUP:
super.setStyleName(styleName + "Hover");
break;
case Event.ONMOUSEOVER:
super.setStyleName(styleName + "Hover");
break;
case Event.ONMOUSEOUT:
super.setStyleName(styleName + "Normal");
break;
}
}
}

just add the following css to your project...

.[YOURBUTTONSTYLENAME]Hover{}
.[YOURBUTTONSTYLENAME]Down{}
.[YOURBUTTONSTYLENAME]Normal{}

[YOURBUTTON STYLENAME] REFERS TO THE SPECIFIC STYLENAME OF YOUR BUTTONS. JUST PUT THE 3 KEY WORDS AFTER WITH NO WHITE SPACE IN BETWEEN...

To create a new MyButton class, simply:

MyButton myButton = new MyButton("[YOURBUTTONSTYLENAME]", "Button TEXT");

This is a just basic code demonstrating the use of DOM and event handlers
Other eventhandlers are available... just visit the GWT documentation or the GWT forums :)