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

```
In my case I did like this

In my css file.

```
.myDialog .ui-dialog-buttonpane .ui-dialog-buttonset .ButtonStyle {
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 1px;
    font: 10pt 'Myriad Pro Regular', sans-serif!important;
    font-weight: 800;
    color: #ffffff;
    background-color: #003668;
    border-left: 1px solid buttonhighlight;
    border-top: 1px solid buttonhighlight;
    border-right: 1px solid buttonshadow;
    border-bottom: 1px solid buttonshadow;
}

```

In my javascript file

```
function ShowDialog() {

    var options = {
        width: 600,
        height: 220,
        modal: true,
        autoOpen: false,
        resizable: false,
        closeOnEscape: false,
        my: "center",
        at: "center",
        of: window,
        dialogClass: "myDialog",
        buttons:[{
            text: "Close",
            "class": "ButtonStyle",
            click:
            function(){
                // I declared theDialog  globally
                if (theDialog != null) {
                    theDialog.dialog("close");
                }
            }
        }]  
    };

    theDialog = $("#divMultipleMatchPopup").dialog(options);
    var ret = theDialog.dialog("open");
}

```

[![Dialog Button Style](https://i.stack.imgur.com/mEpTV.jpg)](https://i.stack.imgur.com/mEpTV.jpg)