Question: Hi I am building a button on my page like that

```
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
        $( "#insert-image-button" )
            .button()
            .click(function() {
                $( "#AttachImage" ).dialog( "open" );
            });
</script>

<button id="insert-image-button">Create new user</button>

```

The button is diplayed using standard JQuery style. How can I provide my own style for that button. What is the best way?

The firebug says 

```
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" 

```

Answer: 
you also can overwrite styles through css :

css file : 

```
#insert-image-button.ui-button {
   background:red ;
   border-radius: 0px;
}

```
As Edgar already pointed out you can *roll* your own theme with the [ThemeRoller](http://jqueryui.com/themeroller/).

If you prefer to use one of the preexisting themes you can easily include it from the [Google Libraries API](http://code.google.com/apis/libraries/):

```
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/{version}/themes/{theme}/jquery-ui.css" type="text/css" />

```

Replace **{version}** and **{theme}** with the ones you want to use.

Example using latest version (1.8.13) and the Smoothness theme:

```
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/smoothness/jquery-ui.css" type="text/css" />

```

For more info on jQuery UI themes and theming, take a look at [the documentation](http://jqueryui.com/docs/Theming).