To most, this question might feel subjective... but there's really more than just opinion involved here.

If you hover your hand over something in real life, most times a subtle shadow will appear above the object. Mimicking that same idea in the form of user-interface / experience could be more intuitive or natural... or not if the user perceives technology as something totally separate from real life.

An example of the two: http://jsfiddle.net/ganoucgk/

So again, what is more intuitive to the user, a button that is illuminated upon hover, or darkened upon hover? And why?

  • 4
    Whatever you choose to do consistency in interaction is more important.
    – Wander
    Commented Apr 30, 2015 at 13:10
  • As @Wander says, it's important that it's consistent. It's rather graphics design issue; normally, if the button is dark already, I would brighten it, and if it's bright, darken - I don't think any of those options would be more or less intuitive, though. Commented Apr 30, 2015 at 13:45
  • @GrzegorzJanik what would you consider intuitive? Commented Apr 30, 2015 at 13:46
  • Contrastful enough to be noticed, but not too contrastful/changing hue (that could mislead users to think that some action has been performed). Btw, JSFiddle that you sent us is particularly extreme example, where contrast between text and button is small enough that it's difficult to read text. Commented Apr 30, 2015 at 13:54

2 Answers 2


As some of the comments have already discussed, it's more important that there is consistency throughout the application for all buttons. The user's response will come from a change in hue regardless of whether you choose to illuminate the button or shade it.

To answer your direct question: For the reasons above, I don't believe that either way is inherently better from a generic standpoint, and the choice to shade vs. illuminate is more dependent on the specific UI of your application.


Illuminated on Hover is Likey More Intuitive

You make a great point about the physical metaphor to a shadow cast over a button, but many interfaces have standardized a depressed button appearance to be a darker button with a small shadow cast by the button's "container".

A button in normal and depressed state

A button in normal, hover, and active state

A dark hover state that transitions to a dark depressed button state would not communicate the difference in these states as well as a light hover state would. While the container shadow would help differentiate, its subtlety can be easily overlooked.

Also, whichever option your UI uses, make sure it is consistent. Any change in appearance will suggest a change in behavior that will lead to confusion.

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