14 февраля 2020 CSS
Странно, но мало, где пишут об этой полезной библиотеке, поэтому исправляю эту ситуацию. Hover.css — это бесплатная коллекция CSS3-эффектов при наведении, применяемых к ссылкам, кнопкам, логотипам, SVG, изображениям и т. д. Легко применяется к элементам и доступна в CSS, Sass и LESS.
Hover.css
Полная документация находится здесь. Там можно посмотреть все примеры эффектов из библиотеки.
Скачать библиотеку можно отсюда.
Установка Hover.css
- Скачиваем Hover.css по ссылкам выше.
- В css/hover.css каждый эффект назван с помощью комментария.
- Подключаем css/hover.css к своей страничке.
- Применяем нужный класс к элементу.
Например, эффект Grow:
/* Grow */
.hvr-grow {
display: inline-block;
vertical-align: middle;
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
transition-duration: 0.3s;
transition-property: transform;
}
.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
transform: scale(1.1);
}
Применяем эффект Grow к кнопке «Добавить в корзину»:
Добавить в корзину
