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 к кнопке «Добавить в корзину»:
Добавить в корзину