HTML button Hover effect standards, principles or best practices

Question

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?

Answer 1

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.