(495) 925-0049, ITShop интернет-магазин 229-0436, Учебный Центр 925-0049
  Главная страница Карта сайта Контакты
Поиск
Вход
Регистрация
Рассылки сайта
 
 
 
 
 

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

Источник: habrahabr
bisserof

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

image

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

.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.

Ссылки по теме


 Распечатать »
 Правила публикации »
  Написать редактору 
 Рекомендовать » Дата публикации: 18.12.2012 
 

Магазин программного обеспечения   WWW.ITSHOP.RU
ESET NOD32 Антивирус на 1 год для 3ПК или продление на 20 месяцев
Panda Gold Protection - ESD версия - на 1 устройство - (лицензия на 1 год)
Allround Automation PL/SQL Developer - 5 user license
IBM RATIONAL Rose Enterprise Floating User License + Sw Subscription & Support 12 Months
Business Studio 4.2 Professional. Персональная лицензия. Лицензия на 1 месяц.
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Безопасность компьютерных сетей и защита информации
Новости ITShop.ru - ПО, книги, документация, курсы обучения
Программирование на Microsoft Access
CASE-технологии
Компьютерный дизайн - Все графические редакторы
Утиль - лучший бесплатный софт для Windows
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
 



    
rambler's top100 Rambler's Top100