How do you prevent a jQuery UI button built on a link from taking the foreground color of that link?

In a previous question, someone recommended building a jQuery button on top of a link when you want to do a redirect:

<a href="/search" class="button">My link</>
$(".button").button();

But if the button class above defines a foreground color of red, that color will also appear as the button's foreground color.

a.button {color: red;}

How do you make开发者_运维知识库 jQuery UI use its own color scheme, rather than the color styles defined for links in the main stylesheet?

Set the color to what you want using .css and then chain your .button call on that.

Example fiddle:

http://jsfiddle.net/mvelaga/SAFGq/

You could try setting the Color property of the jQuery UI button to "!important" in the jQuery css file. That will give it preference above the "button" class.

In my case I had to set the following

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default
{
    //some other style properties ere
    color: red !important;
}