104

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?

Improve this question
7
  • 6
    I think the "darker" logic is usually used when the attempt is made to look like you're "pressing" the button
    – Ben Brocka
    Oct 18, 2011 at 18:12
  • 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.
    – Kevin Burke
    Oct 18, 2011 at 18:14
  • 6
    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.
    – Patrick McElhaney
    Oct 18, 2011 at 19:56
  • 4
    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.
    – jessegavin
    Oct 18, 2011 at 20:07
  • 1
    Image links seem to be broken!
    – heltonbiker
    May 30, 2016 at 14:40

11 Answers 11

Reset to default
62

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.

Improve this answer
3
  • 3
    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
    – colmcq
    Oct 19, 2011 at 9:46
  • 1
    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.
    – Eric
    Jul 19, 2013 at 16:23
  • 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.
    – TripeHound
    Jan 12, 2017 at 13:42
42

Let say that you have the more common scenario of dark text and no other part of the design changes on hover and it's the background only, then when you hover, the button should be given a highlight. You're trying to focus on an item - to examine it and therefore it makes sense to brighten it up as if giving it more light to see by. Appearing backlit or frontlit makes no difference.

Except... however, this is not a universal written rule - it's just logical - and common.

The key is not really the colour, it is the contrast.

The key outcome of the above scenario is that the button under the hover is slightly more clearly identified and the figure better contrasted against the ground than it's neighbours.

So, for example, by comparison, look at the inverse scenario, where you have light text, the same rule of thumb would say that in order to increase relative contrast between figure and ground, the background should darken, to increase the relative contrast.

Eg as at apple.com.

enter image description here

Not that Apple are necessarily the byword for 'correct'! - For example - these download buttons don't have any effect with hover or press!

Improve this answer
2
  • 3
    They do change the cursor at least...
    – Kevin Burke
    Oct 18, 2011 at 22:51
  • I just looked at apple.com eight years later. the design hasn't changed much, except the buttons are now flat. Hovering now darkens the text and decreases the contrast.
    – Patrick McElhaney
    Mar 28, 2019 at 19:45
14

The rule you follow is simply this.

When you hover over an item, you want to highlight it (make it 'pop' as some clients would say) compared to other items around you.

So on rollover ...
When the background text is WHITE, you DARKEN the button to emphasize the contrast.

When the background text is BLACK, you LIGHTEN the button to emphasize the contrast.

In your case:
hove example connect

An additional advice, make the drop shadows appear BELOW the text, NOT above. That play with shadow would give a sinister look to your designs. A common movie trick, to make an evil character identifiable is to shine the light source from BELOW.

Improve this answer
8

Depends on the background color, doesn't it? A button preferably becomes "more visible" relative to the other UI elements when the end user hovers over it, so in a dark design they would become brighter and vice versa. (Note: I said "brighter", not "less opaque" :))

Improve this answer
1
  • I'm not sure this is entirely true. One of my biggest pet peeves is a menu where I have to hover over each option to be able to tell what it does.
    – aslum
    Oct 24, 2011 at 17:32
3

Taking the examples from Material design - buttons my impression is that buttons become darker if they are light and lighter if they are dark:

  • Flat buttons

  • Raised buttons: the button becomes a little more dark but the main difference is that the shadow makes it look like it raises.

Something I noticed through the guide, but I'm not sure if it is mentioned, is that buttons maintain their text color when pressed or hovered.

Improve this answer
2

I'd say it's a bit more complex than lighter or darker. You want to make it stand out from the other buttons, and if less white does that, then that's fine. I say less white because that's different to more black (imagine mixing paint from those big bottles that you used to get in school). More black can give the appearance of the button being in shadows, which might make it look depressed. Making buttons look depressed should be reserved for mouse-down IMO. Don't do it for hovering.

We can translate the slightly subjective terms less white and more black into technical descriptions of colours. If the lightness (in HSL) is below 50%, less white and more black are essentially the same thing (reducing the lightness), and it will be up to you to determine if this gives the appearance of the button being depressed. If the lightness is above 50%, reducing the lightness is less white, but if you reduce the saturation even slightly, that'll give the appearance of more black.

Of course, there will be occasions when more black won't make the button look depressed, but it's a good general rule, especially since most of your examples gave the impression of being 3D.

Improve this answer
1

Hover state must be brighter then the default. You can highlight it with different color scale for text or background or with shadow or light.

The simplest example: textual links usually are in blue with no underline, on hover it becomes underline.

Improve this answer
1

i think it depends on the background. if the background is white than definitely lighter on hover!

Improve this answer
0

Are there other buttons/links on your site/app? And how's your UI treatment for hover or onClick? Key things to think about are consistency and relevancy.

Consistency is something that is not need to be explained, as long as you have an understanding of displaying similar UI design patterns throughout the site.

Relevancy is just to think about how strong of a call-to-action do you want this 'Connect' button to be? Are you afraid that user may not understand it is actionable button, or are there a specific reasons why you want to have the button change onHover? I think what I am trying to get at is if you design the button to standout from the rest of the elements on the site, why is there a need to change the color from lighter to darker or vice versa in the first place?

Improve this answer
0

An interaction like this should not be looked at in isolation. Chances are, the desired effect has already come up in a discussion:

...and when you hover over the button it will be highlighted...

Lighter/darker are not your only options either - in many cases I find it appropriate to have the buttons more saturated on hover (which is an easy choice - if it's interactive, you know not to de-saturate the button!)

This would work well for your scenario (i.e. bright on hover), but you may want to tune the other rendered state as well. It's so pale it almost looks disabled!

Improve this answer
0

I think it also depends on the background. Lighter color on darker background and vice versa and then when someone mouses over they must have already seen it so you can lighten it if it was dark or darken it when it was light.

Atleast that is what I'd find logical to do with buttons. That is if it is a button that you really want to draw attention. Otherwise I would choose for brighter not lighter on hover because this is what I'm used to from working on a windows computer.

Improve this answer

Your Answer

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

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