GXT 4.0.x (4.0.2, 4.0.3+) Button or ButtonCell appearance override. Extending an Appearance. (ButtonCellAppearance)

PurpleButton.gss

@def BACKGROUND_COLOR rgba(102,51,153, 0.8);
@def GRADIENT rgba(102,51,153, 0.8);

/* 
 Override super css classes here  
*/
.button {
  background: BACKGROUND_COLOR;
  /* @alternate */ background: -webkit-linear-gradient(top, GRADIENT);
  /* @alternate */ background: -ms-linear-gradient(top, GRADIENT);
  /* @alternate */ background: linear-gradient(to bottom, GRADIENT);
}

PurpleButtonCellAppearance.java

import com.google.gwt.core.client.GWT;
import com.sencha.gxt.theme.triton.client.base.button.Css3ButtonCellAppearance;

/**
 * Note: Import the Css3ButtonCellAppearance from the Theme you want to override In this case its: 
 * Example: import com.sencha.gxt.theme.triton.client.base.button.Css3ButtonCellAppearance;
 */
public class PurpleButtonCellAppearance<M> extends Css3ButtonCellAppearance<M> {

  /**
   * Extend the super class style
   */
  public interface PurpleCss3ButtonStyle extends Css3ButtonStyle {
  }

  /**
   * Note: replace path to the extencded theme GSS if need be.   
   * If it's Triton, no need to change.  
   * Triton path: com/sencha/gxt/theme/triton/client/base/button/
   */
  public interface PurpleCss3ButtonResources extends Css3ButtonResources {

    @Override
    @Source({ "com/sencha/gxt/theme/triton/client/base/button/Css3ButtonCell.gss",
        "com/sencha/gxt/theme/triton/client/base/button/Css3ButtonCellToolBar.gss", 
        "PurpleButton.gss"})
    PurpleCss3ButtonStyle style();

  }

  public PurpleButtonCellAppearance() {
    super(GWT.<Css3ButtonCellAppearance.Css3ButtonResources>create(PurpleCss3ButtonResources.class));
  }

}

PurpleButtonExample.java

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.sencha.gxt.cell.core.client.form.ToggleButtonCell;
import com.sencha.gxt.widget.core.client.button.ToggleButton;

public class PurpleButtonExample implements EntryPoint {

  @Override
  public void onModuleLoad() {
    /**
     * Provide a custom appearance which colors the button purple
     */
    PurpleButtonCellAppearance<Boolean> purpleAppearance = new PurpleButtonCellAppearance<Boolean>();
    
    /**
     * Provide custom appearance to the Cell
     */
    ToggleButtonCell buttonCell = new ToggleButtonCell(purpleAppearance);
    buttonCell.setText("Toggle Button");

    ToggleButton button = new ToggleButton(buttonCell);

    RootPanel.get().add(button);
  }

}

https://github.com/sencha/gxt-demo-projects/tree/master/gxt-theme-40x - More options

Example: