Коллекция Hover.css

Hover.css это коллекция CSS3 эффектов, которые можно использовать для анимации при наведении на них курсора. Содержит более 100 эффектов: 2D-трансформации, тени, границы, использование библиотеки иконок.
Пользоваться данной коллекцией очень просто: скачиваем архив ZIP, в папке css находим файл hover.css и загружаем его на сайт. Лучше конечно воспользоваться его минимизированной копией hover-min.css

Прописываем реальный путь к файлу

    <link rel="stylesheet" href="../hover-min.css">

Теперь достаточно необходимому тегу прописать выбранный класс.

<a href="#" class="button hvr-grow">grow</a>
<a href="#" class="button hvr-shrink">shrink</a>
<a href="#" class="button hvr-pulse">pulse</a>
<a href="#" class="button hvr-pulse-grow">pulse-grow</a>
........

Для того, чтобы названия классов не совпали с уже возможно примененными на сайте, к ним добавлен префикс hvr-…. Конечно, если вам необходимы всего несколько эффектов, всю библиотеку использовать не стоит. Достаточно воспользоваться стилями для выбранного класса.

 /*  Внешний вид кнопки  */
.button {
   display: inline-block;
   margin: 1.25em;
   padding: 1em;
   width: 25%;
   background: #f4db90;
   background: linear-gradient(135deg,  #f4db90 0%,#ea8407 95%);
   font-weight: 700;
   text-align: center;
}
/*  Для примера стили одного из классов библиотеки hover.css  */
.hvr-grow {
   display: inline-block;
   vertical-align: middle;
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -moz-osx-font-smoothing: grayscale;
   -webkit-transition-duration: .3s;
   transition-duration: .3s;
   -webkit-transition-property: -webkit-transform;
   transition-property: transform
}
.hvr-grow:active,
.hvr-grow:focus,
.hvr-grow:hover {
   -webkit-transform: scale(1.1);
   -ms-transform: scale(1.1);
   transform: scale(1.1)
}

При необходимости, изменяя тот или другой параметр, «подгоняем» стили по себя.

Эффекты для некоторых классов приведены ниже.

2D-Трансформация

Тени

Трансформация границ

Загибаем углы

Иконки

Небольшое дополнение. Познакомимся с библиотекой иконок. Скачивать ничего не будем, просто подключим библиотеку.

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

И как и выше, просто прописываем тегу новый класс.

<a href="#" class="button hvr-icon-pulse-shrink">icon-pulse-shrink</a>
<a href="#" class="button hvr-icon-bounce">icon-bounce</a>
<a href="#" class="button hvr-icon-hang ">icon-hang</a>

Вид иконки, класс, соответствующий этой иконке и код иконки смотрим на сайте. Ниже приводиться часть таблицы стилей для одного из классов. При необходимости можно заменить код иконки и ее положение.

.hvr-icon-buzz:before {
   content: "\f017";   /* Код иконки */
   position: absolute;
   right: 1em;          /* положение иконки */
   padding: 0 1px;
   font-family: FontAwesome;
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
}
.hvr-icon-buzz:active:before,
.hvr-icon-buzz:focus:before,
.hvr-icon-buzz:hover:before {
   -webkit-animation-name: hvr-icon-buzz;
   animation-name: hvr-icon-buzz;
   -webkit-animation-duration: .15s;
   animation-duration: .15s;
   -webkit-animation-timing-function: linear;
   animation-timing-function: linear;
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
    /* Анимация */
}@-webkit-keyframes hvr-icon-buzz {
   50% {
      -webkit-transform: translateX(3px) rotate(2deg);
      transform: translateX(3px) rotate(2deg)
   }
   100% {
      -webkit-transform: translateX(-3px) rotate(-2deg);
      transform: translateX(-3px) rotate(-2deg)
   }
}
@keyframes hvr-icon-buzz {
   50% {
      -webkit-transform: translateX(3px) rotate(2deg);
      transform: translateX(3px) rotate(2deg)
   }
   100% {
      -webkit-transform: translateX(-3px) rotate(-2deg);
      transform: translateX(-3px) rotate(-2deg)
   }
}
.hvr-icon-buzz {
   display: inline-block;
   vertical-align: middle;
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -moz-osx-font-smoothing: grayscale;
   position: relative;
   padding-right: 2.2em;
   -webkit-transition-duration: .3s;
   transition-duration: .3s;
}

А вот так это выглядит: