Анимированные кнопки произвольной ширины на 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: 300px;
}

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