How can I have multiple jQuery button styles on one page?

I'm using the following external CSS files:

<link href="/jquery_custom/green/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<link href="/jquery_custom/css/blue/jquery-ui-1.8.7.custom.css" rel="stylesheet" type="text/css" /></script>

And JavaScript:

<script language = "javascript" type="text开发者_开发技巧/javascript">
    $(document).ready(function () {
        $("button").button();
    }); 
</script>

I have noticed on the jQuery UI site there is an Advanced option:

What do I need to do to have more than one style one the page? Including the two separate external ui-custom js files cause problems. And I notice Facebook has two different colored buttons:

How can this be done?

You mean have different colors/styles for each button? You can do that with just CSS, like so:

CSS

a.button {
    color: #6e6e6e;
    font: bold 12px Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 7px 12px;
    position: relative;
    display: inline-block;
    background: #f3f3f3;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    border: solid 1px #dcdcdc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin-right: 10px;
}


a.red {
    color:#fff;
    background: red;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#FF0000),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#FF0000),to(#F1F1F1));
}

a.green {
    background: #7FFF24;
     background: -webkit-gradient(linear,0% 40%,0% 70%,from(#7FFF24),to(#F1F1F1));
     background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#7FFF24),to(#F1F1F1));
}

HTML

<a href="#" class="button">Gray Button</a>
<a href="#" class="button red">Red Button</a>
<a href="#" class="button green">Green Button</a>

Demo

The javascript you posted doesn't create the button UI, it just handles the click event, so not sure why that is important here. Whether you've added the <input type="button" /> elements in html or generated them in javascript - either way just use class or id identifiers and modify the look of the buttons in your own css.

The jquery ui css theme is vital to the operation of some complex ui controls, such as the date picker, but for a simple button, I would view the jquery css as a solid starting point for your modifications. Include your css file after the jquery ui one, so you can modify just the styles you need, and no more.

Ok, since you've clarified, check out: Using Multiple jQuery Themes in a single page You can tell each theme to apply only to a specific portion of the page.