title: GWT - Fading in/out a background image
body: <p>I have a custom class as follows which works fine,  the button grows/shrinks to accomodate the text and the bg image changes on a click.
  Probem I want to solve is how to "fadeIN" one or other image when clicked/notClicked is called
  Here is my code</p>
  
  <pre class="lang-java prettyprint-override"><code>public ExpandingOvalButton(String text) {
      if (text.length() &gt; 15) {
          label.getElement().getStyle().setFontSize(20, Unit.PX);
      } else {
          label.getElement().getStyle().setFontSize(30, Unit.PX);
      }
  
      int width = 120;
      initWidget(panel);
  
      label.setText(text);
      // width = width + (text.length() * 8);
      String widthStr = width + "px";
      image.setWidth(widthStr);
      image.setHeight("100px");
      button = new PushButton(image);
      button.setWidth(widthStr);
      button.setHeight("50px");
      panel.add(button, 0, 0);
      panel.add(label, 18, 14);
  }
  
  public void isClicked()
  {
      image.setUrl("images/rectangle_green.png");
  }
  
  public void unClicked()
  {
      image.setUrl("images/rectangle_blue.png");
  }
  
  @Override
  public HandlerRegistration addClickHandler(ClickHandler handler) {
      return addDomHandler(handler, ClickEvent.getType());
  }
  
  public void setButtonEnabled(boolean enabled) {
      // panel.setVisible(enabled);
      // this.label.setVisible(enabled);
      this.button.setVisible(enabled);
  }
  </code></pre>