How to make a button look disabled

Question

Hopefully this isn't too specific for here. I have the following button image that I use on my site

Here's an example with text:

This is rendered using the following CSS:

input.borderlessButton {
    background: url("../Images/button.png") no-repeat scroll 0 0
}

In the HTML it's getting disabled

<input type="submit" disabled/>

This, obviously doesn't change the look as the image doesn't change. I can add a CSS :disabled pseudo class.

But how's the best way to make the button above look disabled?

All suggestions welcome.

Answer 1

I think there are different options:

• put it in greyscale (if enabled buttons are colourful)
• make it lighter or put a transparant white overlay over it (if enabled buttons are generally dark)
• make it flat (if enable buttons have a 3D kind of surface)
• do not highlight the button when hovering over it (of enabled buttons have that behaviour)

Or use a combination. Have some inspiration here: http://designmodo.github.io/Flat-UI/

Answer 2

I often make use of opacity to make the buttons like as disabled:

button.buttonClassName:disabled {
    opacity: 0.3;
}

An example with your button pasted on stackoverflow and the same button with the opacity modified on Firebug to appear as a disabled button.

Normal (opacity: 1):

Disabled (opacity: 0.3):

Answer 3

Most designers think that greying out is always the best option for the disabled state of button. However, this approach often catches users off-guard because of the button’s enabled state looks nothing like the disabled one.

Let's understand first the purpose of disabling the button

1. Inactive state
2. Inform user that it won't work purposefully
3. Should not be noticeable

I would suggest Reducing the opacity of the Primary button until it's unreadable.

• Don't make surprise to users by changing to Primary color while greying out. Going grey out to colored is an unpredictable phenomenon for users
• A transparent button blends with the background where the greyed-out button stands out.
• Gray buttons are not easy to read for users that mistakenly perceive them for secondary actions.

By making your disabled-buttons transparent, you can achieve all three goals I have mentioned above which is a must to have.