What is the best way to show that a button is Enabled or Disabled? (especially if it has grey color)

For example what do you feel about the following button? Is it enabled or disabled? How could it be improved?

enter image description here

  • I suddenly find myself quite like the "Windows Classic" style. Grayed text means disabled, which is simple enough.
    – Alvin Wong
    Commented Feb 22, 2013 at 14:16
  • @AlvinWong: It's one thing I like about Windows 8: it's become much clearer and functional.
    – peterchen
    Commented Mar 22, 2013 at 12:21

5 Answers 5


Make disabled button flat and less contrast, compare:

enter image description here

By removing the gradient you will tell the user it couldn't be pressed and by making text less contrast you're telling the user it's off - an analogy with a neon, it's light up so it's on, otherwise it's off like the "no" part on the image below:

enter image description here

  • 1
    I like the idea of removing the gradient to remove the affordance, but it does run the risk of removing the whole suggestion that it could become a button. Especially if the label is not emphatic enough and it is not surrounded by active buttons to contrast it with. Something to be careful with.
    – Peter
    Commented Feb 22, 2013 at 12:05
  • @Peter I believe it may happen if this button is the only button in the UI. Everything will be OK if there will be several enabled & disabled buttons (common scenario). Commented Feb 22, 2013 at 21:31
  • 4
    And don't forget to set cursor: default! Commented Feb 23, 2013 at 3:39
  • Remember to check WCAG guidelines when you do this, though, as I think your button disabled state might not pass 2.1 AA colour contrast. Commented Sep 21, 2020 at 22:10

Active buttons typically have greater contrast and a raised appearance, along with a hover state to further convey a tactile interaction. (A nice touch, though it's important to remember that hover states are not relevant for the fastest-growing segment of users: people with mobile devices.)

Disabled buttons are typically greyed out, flattened or depressed, and not responsive to hover state.

Subtle and careful use of screens, transparency, gradients, drop-shadow to indicate bevel, indentation, etc are all good tools. But keep the performance and complexity issue in mind. You should be building these buttons in CSS for the best user experience, maintainability, and semantics/indexing.

And that's where frameworks like Twitter Bootstrap and Zurb Foundation come in, with well-tested defaults for a wide range of active & disabled elements. And not just buttons: they also include various states for form elements, menu items, and so on. A lot of smart people contribute to these projects by researching, designing, and testing from all angles. You can count on them to provide a well-rounded starting point for common interface design elements and patterns.

An example of the basic buttons in Bootstrap:

Regular and Disabled Buttons

  • While bootstrap et al are good for what they try to achieve they do not directly relate to this particular question about enabled / disabled states of grey buttons. Can you expand the answer so that you directly answer the question? (for example by referencing Bootstrap to show how they achieve the effect if disabled / enabled grey buttons).
    – JonW
    Commented Feb 22, 2013 at 12:10
  • 3
    Thanks for the feedback! I updated my response to explain why I brought frameworks into the conversation. I had intended to include some screen shots, but as a new member I don't have the rquisite reputation points just yet ;)
    – Noah C
    Commented Feb 22, 2013 at 12:16
  • 1
    I agree the provided example isn't exactly ideal. The enabled buttons look good but the disabled default (blue) button is not clearly disabled. It begs the question does the user really need to know what button is (would have been) the default if it's disabled, and even if so, it should certainly be more obviously disabled--primarily by having less contrast. The white text makes it look enabled still, especially if there are no other buttons visible on screen to compare it to.
    – devios1
    Commented Feb 28, 2013 at 20:55

The button is good, especially if its a secondary action, I see it as enabled.

To make it look disabled you could reduce buttons transparency, and when the user hover over it you could display a tool tip explaining why the button is disabled. Take a look at Wikipedia "Rate this page" section. The check box and text look transparent compared it to the text next to it. Actually Wiki used silver colour to achieve this, but using transparency would achieve the same result.

Can't really suggest much, because I don't know what is the purpose of the button and where its going to be used.

  • I suggest darkening the text and border slightly. It appears disabled to me.
    – devios1
    Commented Feb 28, 2013 at 20:56

For disabled - you can grey it out.

Use the shading for changing states to on or off. As the most usual situation is that the light comes from the top, the button looks like it was convex, and lit from above. So, now it is not pressed. If you invert the shade on it, it will look like it was pressed (from convex it becomes concave). However, you could keep it convex and just recede it, by adding some new shadow cast by the chasis it sits in.


One of the most common examples for grey buttons of the difference between enabled and disabled states is from browsers themselves. Obviously these follow the same rules as per the other answers here, with a flat, greyed out effect to display disabled.

Firefox v19

enter image description here

Chrome v23

enter image description here

IE 9

enter image description here

On top of this though, one of the nice things about the default browser buttons is that the disabled state of the buttons still look quite like buttons (which can be an issue as commented by Peter). They seem to achieve this by having the curved borders of the buttons and an internal 1px white border on the buttons.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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