jQuery-UI : change the color of a button using CSS classes

In many web applications it’s necessary to have more than one color button, primary and secondary for example.

Changing the color of jQuery-UI buttons using CSS
Changing the color of jQuery-UI buttons using CSS

This tutorial demonstrates how to achieve this using only CSS.

The CSS

 Note:

  • These classes are copied from the CSS file downloaded with jQuery-UI
  • They are then modified to include the CSS class primary.
  • This then targets the class combination rather than the classes individually.

Therefore adding class primary as so: 

 

results in the new styles being applied to the button.

Note Also:

The images used in the CSS are from /<theme>/images/

To get these images in different colors:

  1. Go here: http://jqueryui.com/themeroller/ to the jQuery-UI theme roller utility
  2. In any of the sections, choose the desired button color
  3. Download that theme, the images of the prescribed color will be there. Copy them as needed.

Be careful when specifying the colors in the CSS. In fact I found the best way was to take the existing CSS from the newly downloaded theme, copy the above part into my custom CSS file then: 1)Change the image paths accordingly if needed. and 2)Add the primary class as shown above.

Comments always welcome..

 

This is one of a few blogs on similar content

jQuery-UI : Changing the color of an icon
jQuery-UI : Applying an Icon to a button using CSS classes
jQuery-UI : Specifying different Button Icon colors using only CSS classes
jQuery-UI : change the color of a button using CSS classes

 

1 Comment