jQuery button primary & secondary

Question

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'} });

    });

Answer 1

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;}