How to create multiple button styles with jquery ui?

Question

Is there a way using jquery ui theme roller or otherwise to create more than one style for buttons (specifically jquery ui buttons)? If you look at the generated themes - it only seems to allow one button style.

Keywords being "jquery ui"; I understand how to do this in css, but using jquery ui helps keep widgets / css playing nicely.

Answer 1

Assuming you've created multiple classes for the various button themes, I think you can change a button's markup, in which you could change the classes to match the various button themes.

I haven't tested this, just trying to possible point you in the right direction :-)

Answer 2

I have been trying to do this recently and ended up choosing a base theme, creating new styles for the different button (eg: for a save button, see styles below) You just need to add the class "save-button" to the button (in my case I am using anchors as buttons)

a.save-button
{
    background-image:none;
    border: 1px solid #FF0000;
    background-color:#FC8C8C;
    color:#FFFFFF;
}
a.save-button:hover
{ 
    border: 1px solid #FF0000;
    background-color:#FDB7B7;
    color:#000000;
}