Styling a GWT Button with CSS

Question

I am trying to apply css with the GWT Button widgets, however I can apply a CSS gradient, the embossed widget style still exists. How can i remove this?

My gwt application inherits this theme:

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

Als tried:

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

I also tried adding:

 .gwt-Button {} 

In the main css file, which is uploaded to the page, however the embossed style still exists.

Does anyone know how to remove embossed style?

Answer 1

To avoid using the default GWT style, I just use the !important tag in my CSS file. You will find an example of this here: Delete the absolute position generated by the GWT . Good luck

Answer 2

Option 1: do not use themes at all

If you don’t need the default styles, and usually you want the page to create your own style, the easiest way to omit the <inherits> operator for themes. GWT works very well without using a theme.

^{(Note: If you still need resources (images) from the theme, but without entering the CSS stylesheet on 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 automatically copied to your military folder.)}

Option 2: Selective Shutdown for Buttons

If, however, you generally want to use a theme, and you only need to give some buttons their own style, then a simple solution calls

 button.removeStyleName("gwt-Button"); 

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

For convenience (and for easier use in UiBinder) you can get your own class, for example

 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, for example

 <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 change the attributes of the gwt-Button class

If you want to keep the thematic look of the buttons and change only a few style attributes, then you can also overwrite certain attributes in predefined style classes with !important (as suggested by @bouhmid_tun). But be careful: the list of attributes may change in the future. Below are all the predefined style classes for .gwt-Button 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; }