WordPress. Add styles/class to make button in an admin menu disabled (inactive)

Question

Here's what I have atm

I've added a button for my custom post type that supposed to allow bulk upload posts using CSV.

Here's the JS code I used for this (I found this code on StackOverflow and it seem to be working well):

function add_button () {
    $($(".wrap .page-title-action")[0])
        .after('<button id="sh_import_csv_button" class="page-title-action">Import CSV</button><input id="csv_upload" type="file" hidden/>');
}

When I add "disabled" property to the button - it works, but button still looks like active, so it may confuse users. I need to make it disabled during CSV processing time.

The question is, is there some default WP CSS class or at least set of CSS styles to make it look properly?

Thanks in advance.

Answer 1

No, there is no default style for the page-title-action class name when its element also has disabled attribute. But you can add your own style as well. If I want a button in a ui look disabled I usually play with the opacity. And very often thats enough. So what about adding

.page-title-action[disabled] {
    opacity: 0.5;
}

to an admin css...

Also I would rewrite your snippet like this:

var add_button = function () {
    $(".wrap .page-title-action").first().after(
        '<button id="sh_import_csv_button" class="page-title-action">' +
        'Import CSV</button><input id="csv_upload" type="file" hidden/>'
    );
}

If you also need advice on how to add the css just tell me in a comment...