How to change the jquery ui dialog button/background color using API?

Question

I am using the jquery ui dialog. I have looked at How to change the jquery ui dialog button color? but it looks they this user is taking a different approach.

I am using the dialog buttons option.

Here is my javascript:

$(document).ready(function(){
    $("#credentialsDialog").dialog({
        autoOpen: false,
        buttons: {
            Submit: function() {
              $( this ).dialog( "close" );
            }
        },
        dialogClass: 'ui-dialog-titlebar'
    });
    $( "#opener" ).click(function() {
        $("#credentialsDialog").dialog('open');
    });
});

Here is the CSS it is referring to:

.ui-dialog-titlebar {
  background-color: #f6f6ff;
  background-image: none;
  color: #f6f6ff;
}

I have also tried this found here:

buttons: {
            Submit: function() {
              $( this ).dialog( "close" );
            },
            'class': 'ui-dialog-titlebar'
        }

But this is not working either.

What is the correct way to change the background color of the button area?

Here is my dialog so far:

Answer 1

If you want to style the buttons, target them with:

.ui-dialog .ui-dialog-buttonpane button.ui-button {
/* your rules here */
}