jQuery button primary & secondary

I am using jQuery button in my project, I need to display primary button in orange color and secondary button in grey color; but for me both buttons are in the same color grey. I am using following code:

$(function() {

        $( "button, input:submit").button({ icons: {primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'} });

    }开发者_开发技巧);

the "primary" and "secondary" arguments are for putting multiple icons on the same button.

To style different buttons differently, you'll need to call button() separately on them. Something like:

$('#main_button').button({icons: {primary:'ui-icon-gear'} });
$('#other_button').button({icons: {primary:'other-icon'} });

Edit: I don't see how you'd set the background color with the button() call. Maybe try something like this:

#other_button { background-color: orange;}
#other_button:hover { background-color: darker-orange;}

I was able to get a secondary button style by go going to the theme roller , customizing the button to the correct background color then download the custom package. Add the background to the project and add a custom css style to the button.

.custom-button
{
    background: #f47d20 url(../content/images/ui-bg_glass_75_f47d20_1x400.png) 50% 50% repeat-x !important;
}