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>
- Выберите эффект и примените его для нужного объекта.