jQuery Ui Dialog Buttons, How to add class?

You Can add class to the button's in Dialog...by

$('#mydialog').dialog({
  buttons:{
    "send":{
      text:'Send',
      'class':'save'
    },
    "cancel":{
      text:'Cancel',
      'class':'cancel'
    }
  });

I think this will work for you. and you can find more answers here.

It doesn't look like there's a great way to do this via the API, however you could add the classes in an event handler for create:

$("#dialog").dialog({
    buttons: {
        'Confirm': function() {
            //do something
            $(this).dialog('close');
        },
        'Cancel': function() {
            $(this).dialog('close');
        }
    },
    create:function () {
        $(this).closest(".ui-dialog")
            .find(".ui-button:first") // the first button
            .addClass("custom");
    }
});

If you wanted the second button, you could use:

$(this).closest(".ui-dialog").find(".ui-button").eq(1).addClass("custom") // The second button

The key is the $(this).closest(".ui-dialog").find(".ui-button"), which will select the buttons in your dialog. After that, you could apply any selector you want (including :contains(...) which might be useful if you want to select a button based on its text instead of its order).

Here's an example: http://jsfiddle.net/jjdtG/

Also note that the CSS selector for the style(s) you want to apply has to be more specific than jQueryUI's built-in selectors in order for the styling to be applied.