Add a class to wordpress submit_button

Question

Is there a way to add a "class" to this line to make it adhere to the .button styling in my CSS stylesheet?

<?php submit_button(__('Update Profile')); ?>

Thanks

Answer 1

submit_button() is a core admin utility function. It's one of the many elements making up the WordPress admin theme and it's supposed not to be styled, so it will gracefully change when WP core developers decide to change the admin theme.

However, if you really want to style that particular button, here's what I suggest: add a custom attribute to your button, called data-style:

<?php 
$attributes = array( 'data-style' => 'custom' );
submit_button ( 'Update Profile', 'primary', 'submit', true, $attributes );
?>

And, in your CSS you can now style your button with:

[data-style="custom"] {
     /* style your button here */
}

---

UPDATE: Trix's answer made me take a closer look at the function referrence and realized ($type) can safely be used to add custom classes to any WP admin button. It's as simple as:

submit_button ( 'Update Profile', 'custom-class' );

Note that (according to the function reference) your button will still have the default button class. This should work:

.button.custom-class {
     /* styles here */
}

---

UPDATE 2: I've done some more testing and apparently, the function works as advertised. The actual output of

submit_button(__('Update Stuff'), "custom-class");

was:

<p class="submit">
    <input type="submit" 
           name="submit" 
           id="submit" 
           class="button custom-class" 
           value="Update Stuff">
</p>

Most of the rules applying to the buttons in WP admin area are prefixed with .wp-core-ui. In this case, they come from .wp-core-ui .button or .wp-core-ui .button:hover. So the following selectors should work:

.wp-core-ui .button.custom-class {
     /* normal state rules here */
}
.wp-core-ui .button.custom-class:hover {
     /* hover state rules here */
}
.wp-core-ui .button.custom-class:focus,
.wp-core-ui .button-custom-class:active {
     /* active/focus state rules here */
}

For example, adding this to the dashboard CSS changed the appearance of my button, without affecting other buttons:

.wp-core-ui .button.custom-class {
    background-color: #272727;
    border-color: #666;
    color: #ddd;
}
.wp-core-ui .button.custom-class:hover {
    background: #212121;
    border-color: #666;
    color: white;
}

Made it look like this:

Please note that .custom-class rules will be overridden by any rules set with .wp-core-ui .button (the default selector for buttons in WP Admin).

Answer 2

You may simply ,add your class like this:

submit_button( __('Update Profile'), 'my-custom-class' );