website design - 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/

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

(Unselected)

(Hover)

Github homepage - github.com

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:

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?

Answer

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.