Анимированные кнопки произвольной ширины на CSS3

Перед нами стояла задача сверстать универсальную кнопку только на HTML и CSS, не имеющую фиксированного размера по ширине, которая в дефолтном состоянии отображает только иконку, а при наведении будет показываться текст внутри неё.

Казалось бы, вот же оно — очевидное и простое решение:

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

Но css transition в этом случае не отрабатывает.

Когда раньше ко мне приходили и спрашивали — «а можно ли так сделать на CSS3?», я разочаровывал дизайнеров и менеджеров, порицая эдакий недопил в css-свойстве transition.

И все таки оказалось, что одна лазейка есть, причем простая до безобразия.

Вместо width надо заюзать max-width:

.button {   transition: width ease-out 0.2s;   max-width: 32px; } .button:hover {   transition: width ease-out 0.2s;   /* чтобы не ловить баги с длинными кнопками, ставьте ширину по-больше, ширина сайта вполне сойдет */   max-width: 960px; } 

Та же сама история применима, когда нам надо «поиграться» с height.

Демо и исходный код можно посмотреть там же, во вкладках html и css.

Спасибо за внимание!