JQuery button: Style change on js event or CSS only

Question

I'm trying to mimic jquery's button style for a table row without copying and pasting blocks of CSS code from the jquery style sheet. Unfortunately, it seems the jquery button has some sort of listener on it to tell the tag to switch to a different class (from ui-btn-up-c to ui-btn-hover-c ).

Would it be cleaner to just copypaste all the css code I need and use :hover type tag for different styles or add some custom event listener that directs the table row to use ui-btn-up-c or ui-btn-hover-c as needed?

Thanks!

PS: I know you can buttonize things with .button() , but that's not what I'm trying to achieve here - I just want some of the looks of a jquery button.

Answer 1

Copy CSS blocks from .ui-btn-up-c and .ui-btn-hover-c . The buttons still may not look exactly the same if so, Copy the css of other classes that might be in use in the original jQuery buttons and add them to your css.

Answer 2

You can get this effect by using classes with buttons. So give each button in a row a different class depending on how you want it to look and define that class in css like below:

html:

<button class='MyButtonClass1'>Class Button</button>

css:

.MyButtonClass1 {
    margin:3px;
    text-align:center;
}

.MyButtonClass2 {
    margin:5px;
    text-align:left;
}

This will explain it better

Here is a jsfiddle with the above code in it.