toggle button pressed color

Question

hi, i am using toggle buttons in my application, i would like to set the backgound-color when the button is pressed.

how can i know what is the proper attribute?

and in general is there any place that i can know which CSS attribute has which effect on the HTML element?

thanks

Answer 1

I know GWT is similar to jQuery, but I've never used it... with jQuery I'd do this (I wasn't sure what kind of button tag you were using, so I included both):

CSS

input, button {
 background-color: #555;
 color: #ddd;
}
.clicked {
 background-color: #f80;
}

HTML

<button type="button">Click Me</button>
<input type="button" value="Click Me" />

Script

$(document).ready(function(){
 $('button, :button')
  .mousedown(function(){ $(this).addClass('clicked') })
  .mouseup(function(){ $(this).removeClass('clicked') })
  .mouseout(function(){ $(this).removeClass('clicked') });
})

Answer 2

and in general is there any place that i can know which css atribute has which effect on the HTML element?

Yes, http://www.w3schools.com/css/ has most of what you will probably need. Check the left column for the CSS-property you're looking for.

Regarding your first question, I you can just use the btn:active, btn:hover, btn:visited properties. (i.e. your button has the class/id 'btn'.)

Good luck

Answer 3

If you are using GWT ToggleButton, then you may

import com.google.gwt.user.client.ui.ToggleButton;
final ToggleButton tb = new ToggleButton( "my button text" );
if (tb.isDown()) {
   tb.addStyleName("pressed"); // or tb.setStyleName("pressed");
}

and in your css file:

.pressed { background-color: blue;  } /* any color you want */

Another way - to change just background of this given button:

tb.getElement().getStyle().setProperty("background", "green");