8

Are there any standards, principles or best practices to change the color or effect of a button on hover.

Something like :

  • Make it lighter
  • Make it darker
  • Change background and foreground color
  • Add effect

If colors are to be changed on hover, any specific rules or ratio in which it should change?

4
  • It depends a lot on your design I think. All the solutions you gave are goods. The point is to make things change when the mouse is over (the pointer cursor is a great indicator) so the user knows he can do something with this button/link. To get some standards I guess you could see the basics, the default styles of browsers/os buttons and links.
    – Gabin
    Commented Jan 15, 2014 at 10:15
  • If the element is on the dark side of the color spectra make it brighter, if it's on the light side of the color spectra make it darker. If it's part of a group (horizontal action bar for example) changing the background is conventionally used. If it's a individual isolated element then changing the element visual characteristics is usually applied. Commented Jan 15, 2014 at 10:19
  • @Zhouzi Thanks. I missed about the pointer:cursor. Commented Jan 15, 2014 at 10:24
  • @AndroidHustle Thanks a lot. This is helpful. The one you said about changing the color if it is in group is best. Commented Jan 15, 2014 at 10:25

1 Answer 1

12

I've read about this a few months back, but can't recall where, so doing this off the top of my head. It goes:

To begin with, systems should not rely on hover effect to denote a clickable item. In this age of touchscreens, the presentation should make it clear what is clickable and what's not.

Then, it is recommended to change the cursor upon hover, affirming the item is clickable.

Any other type of changes to the interface upon hover are done purely for aesthetic reasons. These changes fall into what visual designers call motion, or in simple terms - animation (dynamic change to the interface). Of all the tools in the visual arsenal, motion is the most attention grabbing one. Thus, the popular recommendation is to use it sparingly.

To answer your question directly:

  • Make it lighter - I guess that by lighter you mean increase saturation or brightness, which will make the item 'hotter'. This will appropriately promote call for action.
  • Make it darker - could signify 'cool off' effect, which is probably counter the logical call for action a button involves.
  • Change background or foreground - don't change the colour completely as this will be needlessly attention grabbing. A subtle change to the colour shade/brightness should be OK, but don't change hues.
  • Add an effect - done for purely aesthetic reasons, although one can hypothesise that this increases the responsiveness impression of the system. Use subtle effect so not to grab attention too much; most well design sites using hover animation follow this.
3
  • Thanks a lot. Appreciate your detailed response. This is helpful. Commented Jan 15, 2014 at 11:19
  • Wrote my own answer before fully reading this one. This covers everything I said so I deleted mine. Commented Jan 15, 2014 at 13:46
  • @mattatmusiclist Thats fine. Commented Jan 17, 2014 at 5:10

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.