Styling a GWT Button with CSS

Question

I'm trying to apply css with GWT Button widget, however I can apply CSS gradient, the "embossed" style of the widget is still there. How can I remove that?

My gwt application is inherting from this theme:

<inherits name='com.google.gwt.user.theme.clean.Clean'/>

Als have tried:

<inherits name='com.google.gwt.user.theme.standard.Standard'/>

I also have tried adding:

.gwt-Button {}

In the main css file that is loaded on the page however the embossed style is still there.

Anyone knows how to remove the embossed style?

Answer 1

Option 1: Not using themes at all

If you don't need the default styles, and generally want to give the page your own style, then it's easiest to completely omit the <inherits> statement for the themes. GWT works very well without using a theme.

^{(Note: If you still need the (image) resources from the theme, but without injecting the CSS stylesheet into the page, you can inherit com.google.gwt.user.theme.clean.CleanResources instead of com.google.gwt.user.theme.clean.Clean. This way they will still be copied automatically to your war folder.)}

Option 2: Selectively turning off theming for buttons

If however you generally want to use a theme, and only need to give some buttons your own style, then an easy solution is calling

button.removeStyleName("gwt-Button");

^{Note: Instead of removeStyleName() you could also use setStyleName("my-Button").}

For convenience (and for easier usage in UiBinder) you may want to derive your own class like

package org.mypackage;

public class MyStyleButton extends Button {
    public MyStyleButton(final String html) {
        super(html);
        removeStyleName("gwt-Button");
    }

    /* ... override all the other Button constructors similarly ... */
}

Which can then be imported and used in UiBinder like

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:g='urn:import:com.google.gwt.user.client.ui'
             xmlns:my='urn:import:org.mypackage'>

    ...

       <my:MyStyleButton>...

Option 3: Actually changing the gwt-Button class attributes

If you want to keep the themed look of the buttons, and only change a few style attributes, then it's also possible to overwrite certain attributes in the predefined style classes with !important (as suggested by @bouhmid_tun). But be careful: The list of attributes might change in the future. Here are all the predefined style classes for .gwt-Button of GWT 2.4.0 for your convenience:

.gwt-Button {
  margin: 0;
  padding: 5px 7px;
  text-decoration: none;
  cursor: pointer;
  cursor: hand;
  font-size:small;
  background: url("images/hborder.png") repeat-x 0px -2077px;
  border:1px solid #bbb;
  border-bottom: 1px solid #a0a0a0;
  border-radius: 3px;
 -moz-border-radius: 3px;
}
.gwt-Button:active {
  border: 1px inset #ccc;
}
.gwt-Button:hover {
  border-color: #939393;
}
.gwt-Button[disabled] {
  cursor: default;
  color: #888;
}
.gwt-Button[disabled]:hover {
  border: 1px outset #ccc;
}