Перед нами стояла задача сверстать универсальную кнопку только на HTML и CSS, не имеющую фиксированного размера по ширине, которая в дефолтном состоянии отображает только иконку, а при наведении будет показываться текст внутри неё.
![image](https://dl.dropbox.com/u/40608137/habr/animated_button.png)
Казалось бы, вот же оно — очевидное и простое решение:
Но css transition в этом случае не отрабатывает.
Когда раньше ко мне приходили и спрашивали — «а можно ли так сделать на CSS3?», я разочаровывал дизайнеров и менеджеров, порицая эдакий недопил в css-свойстве
И все таки оказалось, что одна лазейка есть, причем простая до безобразия.
Вместо
Та же сама история применима, когда нам надо «поиграться» с
Демо и исходный код можно посмотреть там же, во вкладках html и css.
Спасибо за внимание!
![image](https://dl.dropbox.com/u/40608137/habr/animated_button.png)
Казалось бы, вот же оно — очевидное и простое решение:
.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
.Демо и исходный код можно посмотреть там же, во вкладках html и css.
Спасибо за внимание!