Should button icons enlarge on hover?

Question

Context: I had done the creative for a web application and sent it to the front end developer to take care of. He took the initiative about 1 aspect that I'm unsure about how it effects users.

I have a series of buttons with icons and it already has an obvious hover state of inverted colour. In my design, the icons stay the same size. The FED decided to make the icons grow on hover.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Has anyone done any research or have any thoughts on this? Is it good or bad?

It doesn't re-arrange any elements around it when I mouse over it..

The icons are for visual clarity of the command and are not thumbnails of any images or anything.

EDIT: The application is designed to be responsive for desktop and is in planning stage for mobile in future. Hence, hover is still important to have here for this first iteration.

Answer 1

No, they should not. Growing icons and text is one of the last option I would choose as a hovering effect. On the other hand, your proposal of inverting colors also seems "sub optimal". It will create a very high and sudden contrast switch, which seems a little too wild to me. How about a more subtle effects, examples:

• increase saturation of the color
• increase contrast or brightness
• add a glow effect
• some kind of animation.

You can find many cool, creative yet simple alternatives here, here, here, or here. I am sure you can find many more if you simply google for some examples.

Answer 2

It can be a problem when you put several buttons next to each other. The moment you hover with your mouse over one of the buttons it increases in size and thus the position of the other buttons change. This can look a bit weird. Buttons with a fixed size don't have this problem, but they have other problems (like: what to do with a really long label)

Answer 3

I would suggest to avoid it, as this will decrease readability of the text and noticeability, there could be a argument that the user read it before and hovered after. The best way to make sure the user notices hover is by using stark contrast to the button.

What is the argument of doing it, is it purely aesthetic?

Answer 4

I don't think there's anything intrinsically wrong with it, but I don't think it adds any clarity/value to the design.

The visual changes for the hover state are for the purpose of telling the user "Hey I'm a button that you can press on!" For example, you can add a drop shadow to the button when it's hovered. That's basically "lifting" the button so that it appears that you can press it down. That's also in a sense "enlarging" the button, as the shadow takes some space. Same for changing the gradient/color. These are pretty much the tradition of making a button. People are very used to it, so they have the right expectation.

It's not very intuitive that a button (or its content) would actually grow, and from the tradition point of view, I don't really see that a lot, so it at least doesn't add any value in suggesting that "this is a button that you can press on".

A bigger issue is the size of the icon. Say it is 30*30 by default and you want to enlarge it to 40*40 on hover. What should the size of the image be? 30 or 40? If it's 30, then it will be blurred when enlarged. If it is 40, well, you need to rely on proper anti-aliasing of the browser for one, and it takes more time to load the page for another.