hover.css: красивая анимация для ваших кнопок
Коллекция различных видов CSS3 анимации, которые можно применит к кнопкам, логотипам и другим объектам.
Коллекция различных видов CSS3 анимации, которые можно применит к кнопкам, логотипам и другим объектам.
Если вы нажмете скачать, то в архиве Вы получите для css файла, полный и мини вариант hover.css
Если вы планируете пользоваться только одним эффектом, то лучше скопировать себе его стили, чтобы пользователь не грузил весь файл hover.css.
К примеру, мы хотим эффект Grow:
- Качаем hover.css
- В файле hover.css, находим стиль для анимации типа 'Grow' (комментарии в помощь):
/* Grow */
.grow {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
- Копируем эффект к себе в таблицу стилей.
- В HTML коде, нужному элементу выставляем класс .grow.
К примеру, применим данную анимацию к ссылке:
<a class="button">Add to Basket</a>
Добавляем нужный класс:
<a class="button grow">Add to Basket</a>
Подключение всех стилей
Если вы планируете пользоваться всеми стилями, то подключите весь файл hover.css.
- Скачайте hover-min.css
- Добавьте файл hover-min.css в ваш рабочий каталог с css файлами
- Подключите hover-min.css в :
<head> <link href="css/hover-min.css" rel="stylesheet"> </head>
- Выберите эффект и примените его для нужного объекта.
Рекомендуем
