Should a button or link translate on hover?

Question

Sometimes I see websites using a pattern, where a button or link translates (for example 5px to the top) when hovering it.

See an example in that SO answer

Is this a good or bad thing to do, UX-wise?

---

Personally I find two negative points:

• the movement might distract the user, when they are just pushing around the mouse, browsing for content
• more important: the is a "line" of mouse y-positions, where the animation would flicker, because the hover area changes with every "tick" of the animation from "hovering" to "not hovering". Like so:

Answer 1

Make sure that your users get feedback on their actions.

In this case, make clear that something is clickable. Moving the text on a press or mouse over is one way to do it. However, it is more common to use a change of color or shadow to simulate movement and show that a button is clickable.

You are right; movement distracts the user. Keep it simple.

Take a look at the example below. The when clicked, the button has no shadow and no bottom-border anymore. This represents an actual button being pressed. The text did not move but because of small changes it is very clear that this button is clickable.

Answer 2

I don't think the movement itself is necessarily a problem, though there is a fine line between "surprising" a user and "delighting" them!

The main issue as I see it would be if the target area of the button shifted position as well. In addition to what you're talking about with the flickering problem: If the button shifts up, and the user's cursor is near the bottom of the button, they might lose the focus on button, and so clicking does nothing.

Answer 3

It really depends on the style of your website. Some website have more micro-animations then others. Just make sure they are all in the same style to establish continuity. An animation will enhance usability over it being distraction as long as it's nothing wild. Although I've made some wild hover states before, ie whole background changes colour, think outside the box!

I always try to add a micro-animation to

a. make the website more lively,playful.

b. tell the user he/she is about to do something.

No more stale designs!

As for your issue with the y placement and reoccurring hover effect. I don't see this happening to often and shouldn't be a reason for not using a feedback animation.