Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Кнопки с эффектом при наведении курсора на CSS3

Дата добавления: 14.04.2017 - 02:36
Категория: Кнопки / иконки
Добавил: Buger
Количество просмотров: 164
Количество комментариев: 0
Размер файла: 11.3Kb
Рейтинг материала: 5.0 / 1
Кнопки с эффектом при наведении курсора на CSS3
рейтинг 5.0
/
голосов 1
Интересный вид эффекта при наведении курсора мыши на кнопку, который был создан на чистом CSS3. Считаю, что данная реализация должна попасть к вам в коллекцию, а затем применяться в ваших проектах. Данный пак содержит 5 видов эффектов. Были использованы шрифтовые иконки FontAwesome, а это говорит о том, что это самая большая на сегодняшний день библиотека шрифтовых иконок. Соответственно вы сможете применить нужные вам иконки.

Теперь давайте разберем все более подробнее.
Для начала вам нужно подключить библиотеку иконочных шрифтов (FontAwesome)
Код
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>

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

Эффект #1


HTML
Код
<div class="button-effect">
  <h2>Эффект #1</h2>
  <a class="effect effect-1" href="#" title="Подробнее">Подробнее</a>
  <a class="effect effect-1" href="#" title="Подробнее">Подробнее</a>
  <a class="effect effect-1" href="#" title="Подробнее">Подробнее</a>
  <a class="effect effect-1" href="#" title="Подробнее">Подробнее</a>
  <a class="effect effect-1" href="#" title="Подробнее">Подробнее</a>
</div>


CSS
Код
.effect.effect-1 {
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
  }
   
  .effect.effect-1:before {
  content: "\f178";
  font-family: FontAwesome;
  font-size: 15px;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  right: 0;
  top: 0;
  opacity: 0;
  height: 100%;
  width: 40px;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
  }
   
  .effect.effect-1:hover {
  text-indent: -20px;
  }
   
  .effect.effect-1:hover:before {
  opacity: 1;
  text-indent: 0px;
  }


Эффект #2


HTML
Код
<div class="button-effect">
  <h2>Эффект #2</h2>
  <a class="effect effect-2" href="#" title="Подробнее">Подробнее</a>
  <a class="effect effect-2" href="#" title="Подробнее">Подробнее</a>
  <a class="effect effect-2" href="#" title="Подробнее">Подробнее</a>
  <a class="effect effect-2" href="#" title="Подробнее">Подробнее</a>
  <a class="effect effect-2" href="#" title="Подробнее">Подробнее</a>
</div>


CSS
Код
.effect.effect-2 {
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
  }
   
  .effect.effect-2:before {
  content: "\f0a4";
  font-family: FontAwesome;
  font-size: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: -30px;
  width: 30px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 0px 6px 6px 0px;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
  text-align: center;
  }
   
  .effect.effect-2:hover {
  text-indent: -30px;
  }
   
  .effect.effect-2:hover:before {
  right: 0;
  text-indent: 0px;
  }


Эффект #3


HTML
Код
<div class="button-effect">
  <h2>Эффект #3</h2>
  <a class="effect effect-3" href="#" title="Подробнее">Подробнее</a>
  <a class="effect effect-3" href="#" title="Подробнее">Подробнее</a>
  <a class="effect effect-3" href="#" title="Подробнее">Подробнее</a>
  <a class="effect effect-3" href="#" title="Подробнее">Подробнее</a>
  <a class="effect effect-3" href="#" title="Подробнее">Подробнее</a>
</div>


CSS
Код
.effect.effect-3 {
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
  }
   
  .effect.effect-3:before {
  content: "\f178";
  font-family: FontAwesome;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: absolute;
  top: 100%;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 30px;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
  }
   
  .effect.effect-3:hover {
  text-indent: -9999px;
  }
   
  .effect.effect-3:hover:before {
  top: 0;
  text-indent: 0;
  }


Эффект #4


HTML
Код
<div class="button-effect">
  <h2>Эффект #4</h2>
  <a class="effect effect-4" href="#" title="Подробнее">Подробнее</a>
  <a class="effect effect-4" href="#" title="Подробнее">Подробнее</a>
  <a class="effect effect-4" href="#" title="Подробнее">Подробнее</a>
  <a class="effect effect-4" href="#" title="Подробнее">Подробнее</a>
  <a class="effect effect-4" href="#" title="Подробнее">Подробнее</a>
</div>


CSS
Код
.effect.effect-4 {
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
  }
   
  .effect.effect-4:before {
  content: "\f178";
  font-family: FontAwesome;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 30px;
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
  }
   
  .effect.effect-4:hover {
  text-indent: -9999px;
  }
   
  .effect.effect-4:hover:before {
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
  text-indent: 0;
  }


Эффект #5


HTML
Код
<div class="button-effect">
  <h2>Эффект #5</h2>
  <a class="effect effect-5" href="#" title="Подробнее">Подробнее</a>
  <a class="effect effect-5" href="#" title="Подробнее">Подробнее</a>
  <a class="effect effect-5" href="#" title="Подробнее">Подробнее</a>
  <a class="effect effect-5" href="#" title="Подробнее">Подробнее</a>
  <a class="effect effect-5" href="#" title="Подробнее">Подробнее</a>
</div>


CSS
Код
.effect.effect-5 {
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
  }
   
  .effect.effect-5:before {
  content: "\f054";
  font-family: FontAwesome;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0px;
  height: 100%;
  width: 30px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 0 50% 50% 0;
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
  }
   
  .effect.effect-5:hover {
  text-indent: 30px;
  }
   
  .effect.effect-5:hover:before {
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
  text-indent: 0;
  }


Источник: http://art-ucoz.ru/
Добавлять комментарии могут только зарегистрированные пользователи.