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!