Question

I have the following code

Button orderButton = new Button("");
orderButton.setStyleName("OrderButton");
orderButton.getElement().getStyle().setProperty("marginTop", "35px");

The CSS looks like this

.OrderButton { 
      width:208px;
      height:43px; 
      background-image:url('graphics/OrderButton.jpg');border:0;margin:auto; 
}

.OrderButton-down { 
      width:208px;
      height:43px; 
      background-image:url('graphics/OrderButton_down.jpg');border:0;margin:auto; 
}

But clicking on the button does not change anything. The style remains the same “OrderButton” and “OrderButton-down” is ignored.

Am I forgetting something?

Answer 1

Have you tried using the usual css tags active and hover?

“.OrderButton-down” would then look like this “.OrderButton:active”
This way you can also use the :hover tag