Should a button become lighter or darker on hover?

  • We're having a discussion in the office about whether a button should become lighter or darker when a user hovers over it.

    Here are some examples from the field:

    Apple "Buy Now" button (Second is hover, third is depressed) - http://www.apple.com/iphone/

    apple button

    Twitter Bootstrap - http://twitter.github.com/bootstrap/

    Twitter unselected (Unselected)

    Twitter hover (Hover)

    Github homepage - github.com

    enter image description here

    github hover

    The button on FogBugz homepage goes from yellow to slightly lighter yellow. The buttons on Optimizely and Visual Website Optimizer hardly change.

    Amazon's "Buy Now" button doesn't do anything when you hover over it (besides change to a pointer cursor). The colored buttons in Google's new interface (see Gmail or Calendar) go slightly darker when you hover over them.

    Finally here is our button:

    twilio connect

    Should your button become lighter or darker when you hover over it? What else should you consider? Does anyone have data on whether the hover effect matters for conversions?

    I think the "darker" logic is usually used when the attempt is made to look like you're "pressing" the button

    Twitter has a separate style for button clicked, with an inner drop shadow. Most sites do as well. I think you should have all three as well to give better feedback.

    Darker seems more natural. If anything, a physical button would appear slightly darker when you touch it because your hand is casting a shadow. Lighter (illuminated) might signal that the button is waking up at the moment it's needed, like a fog light, refrigerator light, or moving sidewalk.

    I don't have any data to refer to, but my inclination is that what really matters is that 1) you are consistent and 2) the button (and/or cursor) changes enough to be noticeable.

    Neither, it should become brighter (not the same as lighter = whiter).

    I agree with @KevinBurke. Also, definitely make sure that your mouse pointer changes on hover. It pisses me off when a site doesn't implement that (I'm looking at you Scrumwise)

    Image links seem to be broken!

  • JohnGB

    JohnGB Correct answer

    10 years ago

    There isn't any pattern common enough to be considered "normal" for this by most people, so it doesn't matter which you choose as long as it makes sense for your application.

    The important thing isn't whether it gets darker or lighter on hover. It is that there is some change. Someone using a site isn't going to say "that changed to dark on hover instead of light, so it must be something else".

    The change is there simply to let you know that it is clickable in addition to any cursor change. Exactly what change that is, is more of a design or aesthetic question than a usability one.

    aye! the shading change is a kind of affordance isn't it. really doesn't matter as long as it signifies it has some kind of action associated with it. Whether it goes lighter or darker is really down to what you think is the most common mouse-over convention

    I would add that making the button more prominent is important to usability. It's counter intuitive if the opposite happens, for example: the button becomes a color that's less prominent and it almost registers as though it disappeared a little. Same thing with a button moving on hover. If it goes away from the mouse, or feels like it disappeared somewhat. I wouldn't argue it needs to be necessarily darker or brighter, but it needs to stand out more on hover.

    As JohnGB and others say, the main thing is that it's noticeable. I guess a rule of thumb would be if a button is are dark(ish) in it's normal state, lighten it (since even darker probably won't be as noticeable); if it's light(ish) in it's normal state, darken it.

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM