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

Yes you can create more then one style using one jQuery UI theme. In the example below, i have 3 different buttons each with a different color and all using the same default UI theme. To do this, You need to redefine the UI CSS class of of the element you are working with. For example, to make a button use the UI styling, you need to include the class name ui-state-default. Note how in this example i included this same class for all the buttons. To override this UI class for a specific button we reference the button by adding another class to it then style it in our css and mark it as important. This will override the UI styling for the class you are working with.

<button class="ui-state-default one">button one</button>
<button class="ui-state-default two">button two</button>
<button class="ui-state-default three">button three</button>

button{
    width:200px;
    height:50px;
    display:block;
    margin:10px;
}

.two{
    background: orange url(http://www.cyrilsframing.com.au/picts/menu.gif) repeat-x 0 0 !important;
    border:1px solid red!important;
}

.three{
    background: orange url(http://cmshuts.com/picts/background-menu-horz.gif) repeat-x 0 0 !important;
    border:1px solid yellow!important;
}

View working example at http://jsfiddle.net/7vvhj/2/

For more on how to style your elements using jQuery UI check the following 2 links

http://wiki.jqueryui.com/w/page/12137970/jQuery-UI-CSS-Framework