Changing color of jQuery UI Buttons

Question

Is there an easy way to change the color of a jQuery UI Button? Modifying the css is discouraged from the documentation and doing so anyway is tricky. They say, "We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain." I understand how to change the theme, but then how do you get different colored buttons on the same page?

Solution 1

I just did this: create a new theme with the new colour button; copy the ..hard.. and ..soft... gradient files from the new theme images folder; rename them so as to not confuse them with the main theme; and finally add the style to the button. This caters for the gradient and the colour...

I just tried this for a green button:

a.green-button
{
    background: url(Images/GreenBGHardGrad.png) repeat-x center;
    border: 1px solid #132b14;
    color:#FFFFFF;
}
a.green-button:hover
{ 
    background: url(Images/GreenBGSoftGrad.png) repeat-x center;
    border: 1px solid #132b14;
    color:#FFFFFF;
}
a.green-button:active
{
    background-color:#FFFFFF;
    border: 1px solid #132b14;
    color:#132b14;
}

Solution 2

Simplest way would be to add a class to your buttons (for different colors) and then have some css that overwrites the jquery-ui css.

Example

var $button = $(document.createElement('a'));
//add class
$button.addClass('redButton');
//call the jquery-ui button function
$button.button();

Css

.ui-button.redButton {
    background-color: red;
}
.ui-button.greenButton {
    background-color: green;
}

Solution 3

Try this:

HTML:

<button type="button" id="change_color"> change button </button>

jQuery:

$("#change_color").css("background","green");