Hover Effect Button Bootstrap / Эффекты / Сниппеты Bootstrap

Hover Effect Button Bootstrap

Набор готовых CSS эффектов при наведении для кнопок Bootstrap, используется внутреннее изменение фона и бордюра, background и border, скачайте бесплатно.

* Свойство внешнего отступа добавлено приблизительным значением [class*="hvr-"] {margin: 13px 3px}. Скачайте архив с исходником файла CSS в прикреплении №2.

Версия: v1.0

Каталог: Сниппеты Bootstrap

Категория: Эффекты

Bootstrap: 3

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Вес файла: 264.5 Kb

Уникальный ID: 724

Количество символов:

Посмотрели: 3736 раз

Помощь: установка & настройка

Прикреплён файл №1: /_sf/7/724.html

Прикреплён файл №2: /stuff/0-0-0-724-20

Скачали бесплатно: 56 раз

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 3 голосов

Тип лицензии: CC BY 4.0

Авторство: bootstraptema.ru

Информация: Пользователям

Информация: Правообладателям

Теги: эффект, Snippet, Effect, сниппет, Bootstrap, html, Button, кнопки

Поделился: BootstrapТема

Добавлено: 2016-03-12 в 14:31

Метка: 1581617121

⇄ ⇅

<div class="container">
<div class="row">
<div class="col-md-12"> 
<h2 class="text-center">Hover Effect Button Bootstrap</h2>

<div class="col-sm-6"> 
<h3 class="text-center">Hover Effect</h3> 
<a href="#" class="btn hvr-fade btn-lg">Fade</a>
 <a href="#" class="btn hvr-back-pulse btn-lg">Back Pulse</a>
<a href="#" class="btn hvr-sweep-to-right btn-lg">Sweep To Right</a>
 <a href="#" class="btn hvr-sweep-to-left btn-lg">Sweep To Left</a>
<a href="#" class="btn hvr-sweep-to-bottom btn-lg">Sweep To Bottom</a>
 <a href="#" class="btn hvr-sweep-to-top btn-lg">Sweep To Top</a>
<a href="#" class="btn hvr-bounce-to-right btn-lg">Bounce To Right</a>
 <a href="#" class="btn hvr-bounce-to-left btn-lg">Bounce To Left</a>
<a href="#" class="btn hvr-bounce-to-bottom btn-lg">Bounce To Bottom</a>
 <a href="#" class="btn hvr-bounce-to-top btn-lg">Bounce To Top</a>
<a href="#" class="btn hvr-radial-out btn-lg">Radial Out</a>
 <a href="#" class="btn hvr-radial-in btn-lg">Radial In</a>
<a href="#" class="btn hvr-rectangle-in btn-lg">Rectangle In</a>
 <a href="#" class="btn hvr-rectangle-out btn-lg">Rectangle Out</a>
<a href="#" class="btn hvr-shutter-in-horizontal btn-lg">Shutter In Horizontal</a>
 <a href="#" class="btn hvr-shutter-out-horizontal btn-lg">Shutter Out Horizontal</a>
<a href="#" class="btn hvr-shutter-in-vertical btn-lg">Shutter In Vertical</a>
 <a href="#" class="btn hvr-shutter-out-vertical btn-lg">Shutter Out Vertical</a>
</div>

<div class="col-sm-6">
<h3 class="text-center">Hover Effect Border</h3>
<a href="#" class="btn hvr-border-fade btn-lg">Border Fade</a>
 <a href="#" class="btn hvr-hollow btn-lg">Hollow</a>
<a href="#" class="btn hvr-trim btn-lg">Trim</a>
 <a href="#" class="btn hvr-ripple-out btn-lg">Ripple Out</a>
<a href="#" class="btn hvr-outline-out btn-lg">Outline Out</a>
 <a href="#" class="btn hvr-outline-in btn-lg">Outline In</a>
<a href="#" class="btn hvr-round-corners btn-lg">Round Corners</a>
 <a href="#" class="btn hvr-underline-from-left btn-lg">Underline From Left</a>
<a href="#" class="btn hvr-underline-from-right btn-lg">Underline From Right</a>
 <a href="#" class="btn hvr-reveal btn-lg">Reveal</a>
<a href="#" class="btn hvr-underline-reveal btn-lg">Underline Reveal</a>
 <a href="#" class="btn hvr-overline-reveal btn-lg">Overline Reveal</a>
<a href="#" class="btn hvr-overline-from-left btn-lg">Overline From Left</a>
 <a href="#" class="btn hvr-overline-from-center btn-lg">Overline From Center</a>
<a href="#" class="btn hvr-overline-from-right btn-lg">Overline From Right</a>
</div>

</div>
</div>
</div>

BootstrapTema

Hover Effect Button Bootstrap

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0