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?

  • 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
    Jan 15 '14 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. Jan 15 '14 at 10:19
  • @Zhouzi Thanks. I missed about the pointer:cursor. Jan 15 '14 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. Jan 15 '14 at 10:25

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.
  • Thanks a lot. Appreciate your detailed response. This is helpful. Jan 15 '14 at 11:19
  • Wrote my own answer before fully reading this one. This covers everything I said so I deleted mine. Jan 15 '14 at 13:46
  • @mattatmusiclist Thats fine. Jan 17 '14 at 5:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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