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.

  • Maybe in a kids learning game... Or unless it's to provide a certain effect Mar 15, 2014 at 8:22
  • If it doesn't rearrange anything around it, it's not bad (in my opinion) Mar 15, 2014 at 8:23

4 Answers 4


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.

  • +1 great answer, by some kind of animation you mean anything but enlarge on hover :)
    – Igor-G
    Mar 14, 2014 at 15:25
  • In terms of colour, that was for the wireframe. The creative is more..well, creative. :) Is there something specific you can recommend as an alternate option to growing the icon on hover?
    – Pdxd
    Mar 14, 2014 at 15:39

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)

  • The button does not increase in size. It's the icon on it that does. Mar 14, 2014 at 15:07
  • I like your thinking but as stated, they don't shift other elements around them, and the labels are short.
    – Pdxd
    Mar 14, 2014 at 15:08

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?

  • Yes, aesthetic. I'm trying to determine if its worthwhile to go back to the FED to make him change it. I'd need a more appropriate reason than "Just do it because it's not in my original design" because sometimes he does do things to improve the product.
    – Pdxd
    Mar 14, 2014 at 15:43

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.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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