User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

enter image description here

Here's an example with text:

enter image description here

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.

share|improve this question
can you show an example of the button with text inside? genrally I use a grey version (a light grey) with darker grey text inside (not too dark) and also remove any interaction states e.g. hover – Dave Haigh Jan 23 '14 at 10:29
Added text version @DaveHaigh. I suppose I could produce a grayscale version. This didn't occur to me, I must admit. – Liam Jan 23 '14 at 10:33
up vote 8 down vote accepted

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:

share|improve this answer
good advice here, using all relevant options from this list should suffice – Dave Haigh Jan 23 '14 at 10:31
Improvement: the cursor on hover it should be the regular one – goto Jan 23 '14 at 10:51
@goto: Indeed. But I assume the html code takes care of that already and the question was purely about the design of the button itself. Obviously it should also not react when clicking on it. – Bart Gijssens Jan 23 '14 at 10:53
@goto Should disabled button upon hover look like regular?? Any reasoning for that? – Dmitri Zaitsev Jul 31 '14 at 5:48
@Dmitri Zaitsev: the mouse cursor should remain "regular" i.e. not the pointing hand. The pointing hand must only appear on a thing which is clickable. Since a disabled button is not clickable, it must not appear. – Bart Gijssens Jul 31 '14 at 6:43

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):
enter image description here
Disabled (opacity: 0.3):
enter image description here

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.