Hover.css - коллекция css3 эффектов при наведении

Hover.css - коллекция CSS3 эффектов воспроизводимых при наведении на любой элемент, к которому применены определенные CSS классы. Доступно более 40 эффектов.

Для использования на своем сайте, нужно скачать и подключить файл стилей:

<link href="css/hover.css" rel="stylesheet" media="all">

Допустим мы хотим применить эффект к кнопке, которая задана следующим html:
Класс .button имеет следующие стили:

.button {
    background:#1abc9c;
    color: #ffffff;
    cursor: pointer;
    margin: 0.4em;
    padding: 1em;
    text-decoration: none;
}

Кнопка имеет изумрудный цвет, но ничего особенного в ней нет.
Добавим, для примера, эффект grow-rotate - плавный поворот и увеличение при наведении.
Воспользовавшись поиском по файлу hover.css мы найдем стили этого эффекта:

/* Grow Rotate */
.grow-rotate {
    display: inline-block;
    -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
    -webkit-transition-property: transform;
            transition-property: transform;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow-rotate:hover,
.grow-rotate:focus,
.grow-rotate:active{
    -webkit-transform: scale(1.1) rotate(4deg);
            transform: scale(1.1) rotate(4deg);
}

Применим его к кнопке, просто добавим класс:

<a href="#" class="button grow-rotate">Купить</a>