Question

I know I can make my button’s image bigger when it is focused using a css like:

button image {
    width:64px;
    height:64px;
}

button:focus, button:focus image {
    width:128px;
    height:128px;
}

But, is there a way to make the image grow gradually (like an animation effect)?

Answer 1

CSS Transitions make this possible, but have only appeared in draft specifications recently so browser support is weak.

As this is a cosmetic effect, I would probably be happy with the limited support. YMMV, so if you aren’t then you will need to look to JavaScript to achieve this. There are various libraries that make animation easier.