hover.css: красивая анимация для ваших кнопок

Коллекция различных видов 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>

Выберите эффект и примените его для нужного объекта.

Есть сайт, но нет клиентов? Думаете что от сайта нет никакого толка?
Покажите его нам, и мы бесплатно расскажем вам обо всех недочетах вашего сайта, мешающих вам зарабатывать деньги!

Бесплатный анализ сайтов

hover.css: красивая анимация для ваших кнопок

Коллекция различных видов CSS3 анимации, которые можно применит к кнопкам, логотипам и другим объектам.

Рекомендуем

Теги