Animated buttons of arbitrary width on CSS3

We were faced with the task of creating a universal button only on HTML and CSS, which does not have a fixed size in width, which displays only the icon in the default state, and the text inside will be shown when pointing.



It would seem that here it is - the obvious and simple solution:
')

.button { transition: width ease-out 0.2s; width: 32px; } .button:hover { transition: width ease-out 0.2s; width: auto; } 

But the css transition in this case does not work.

When they used to come to me and ask, “can we do this on CSS3?”, I disappointed designers and managers, decrying the kind of census in the css property of transition .

And yet it turned out that there is one loophole, and it is simple to disgrace.

Instead, width should be max-width :

 .button { transition: width ease-out 0.2s; max-width: 32px; } .button:hover { transition: width ease-out 0.2s; max-width: 300px; } 

The same story applies when we need to “play around” with height .

Demo and source code can be viewed there, in the tabs html and css.

Thanks for attention!