Alex Rivera | Logout

Changing color of jQuery UI Buttons

Asked 2010-12-08T19:46:15.347
32

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?

jquery html jquery-ui button jquery-ui-button
Edit
Report

1 Answer

8

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;
}
answered 2010-12-08T22:02:33.597

Your Answer