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;
}

```
If you have very few instances of your custom styled content, you can always use inline styles like:

```
<div id = 'insert-image-button' style = 'background: red; border-radius: 0px;'>
</div>

```

Or simply set the css attributes in jQuery:

```
$('#insert-image-button').css('background','red').css('border-radius','0px'); 

// or use the alternative notation

$('#insert-image-button').css({ 'background': 'red','border-radius': '0px'});

// you can use classes too

$('.insert-image-buttons').css({ 'background': 'red','border-radius': '0px'});

```

And you can type this anywhere in your code.

Note that this doesn't override all UI styles (inline styles succeed more often), and it may not be altogether practical for finished projects. But it can still be a convenient way to test out different styles for your code.