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

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

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

Анимация кнопок при наведении указателя мыши на CSS

Дата добавления: 07.03.2017 - 14:08
Категория: Кнопки / иконки
Добавил: Buger
Количество просмотров: 114
Количество комментариев: 0
Размер файла: 7.0Kb
Рейтинг материала: 5.0 / 1
Анимация кнопок при наведении указателя мыши на CSS
рейтинг 5.0
/
голосов 1
Хотите изменить вид кнопок и задать к ним анимацию у себя в проекте? Тогда вам должна понравиться данная реализация. Предоставлено 7 красивых эффектов при наведении на кнопку. Считаю, что выглядит очень интересно и современно. Весь код эффектов написан на чистом CSS, поэтому вы сможете изменить стиль и дизайн под свои нужды.

Демонстрация в скачанном файле.

Для начала нам нужно задать HTML код для кнопок
Код
<div class="container">
  <a href="#" class="btn btn-1">Hover 1</a>
  <a href="#" class="btn btn-2">Hover 2</a>
  <a href="#" class="btn btn-3">Hover 3</a>
  <a href="#" class="btn btn-4">Hover 4</a>
  <a href="#" class="btn btn-5">Hover 5</a>
  <a href="#" class="btn btn-6">Hover 6</a>
  <a href="#" class="btn btn-7">Hover 7</a>
</div>

Каждый эффект имеет свою цифру в классе. Их всего 7:
btn-1, btn-2, btn-3 ... и т.д.


Теперь подключаем CSS стили для них.
Код
<style type="text/css">  
  .container {
  width: 180px;
  height: 500px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  }
   
  .btn {
  text-decoration: none;
  display: inline-block;
  height: 40px;
  width: 150px;
  background-color: #1c293a;
  line-height: 40px;
  text-align: center;
  position: relative;
  margin: 15px;
  color: #f7f7f7;
  }
   
  .btn:before,
  .btn:after {
  -webkit-transition: .3s ease;
  transition: .3s ease;
  }
   
   
/* btn-1  
==================================*/
  .btn-1:before {
  content: '';
  width: 150px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border: 1px solid #1c293a;
  box-sizing: border-box;
  }
   
  .btn-1:hover:before {
  width: 142px;
  height: 32px;
  border: 1px solid #f7f7f7;
  }
   
   
/* btn-2  
==================================*/
  .btn-2:before {
  content: '';
  width: 150px;
  height: 40px;
  position: absolute;
  top: 0%;
  left: 0%;
  box-sizing: border-box;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  }
   
  .btn-2:hover:before {
  -webkit-transform: translate(4px, 4px);
  transform: translate(4px, 4px);
  }
   
   
/* btn-3  
==================================*/
  .btn-3:before,
  .btn-3:after {
  content: '';
  width: 150px;
  height: 40px;
  position: absolute;
  top: 0%;
  left: 0%;
  box-sizing: border-box;
  }
   
  .btn-3:before {
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  }
   
  .btn-3:after {
  border-left: 1px solid #000;
  border-top: 1px solid #000;
  }
   
  .btn-3:hover:before {
  -webkit-transform: translate(4px, 4px);
  transform: translate(4px, 4px);
  }
   
  .btn-3:hover:after {
  -webkit-transform: translate(-4px, -4px);
  transform: translate(-4px, -4px);
  }
   
   
/* btn-4  
==================================*/
  .btn-4 {
  color: white;
  z-index: 3;
  background-color: transparent;
  box-sizing: border-box;
  border: 1px solid #1c293a;
  }
   
  .btn-4:before {
  content: '';
  width: 150px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -2;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  background-color: #1c293a;
  }
   
  .btn-4:hover:before {
  width: 100px;
  height: 0px;
  }
   
  .btn-4:hover {
  color: #1c293a;
  }
   
   
/* btn-5  
==================================*/
  .btn-5 {
  z-index: 3;
  background-color: transparent;
  }
   
  .btn-5:before {
  content: '';
  width: 150px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -2;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  background-color: #1c293a;
  -webkit-transition: .6s;
  transition: .6s;
  }
   
  .btn-5:hover:before {
  -webkit-transform: translate(-50%, -50%) rotateX(180deg);
  transform: translate(-50%, -50%) rotateX(180deg);
  }
   
   
/* btn-6  
==================================*/
  .btn-6 {
  z-index: 3;
  background-color: transparent;
  }
   
  .btn-6:before,
  .btn-6:after {
  content: '';
  width: 150px;
  height: 40px;
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: -2;
  background-color: #1c293a;
  -webkit-transform-origin: bottom;
  transform-origin: bottom;
  -webkit-transition: .2s;
  transition: .2s;
  }
   
  .btn-6:after {
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
  height: 0;
  }
   
  .btn-6:hover:after {
  height: 40px;
  }
   
  .btn-6:hover:before {
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
  }
   
   
/* btn-7  
==================================*/
  .btn-7 {
  z-index: 3;
  color: #1c293a;
  line-height: 80px;
  overflow: hidden;
  -webkit-transition: .3s;
  transition: .3s;
  border: 1px solid #1c293a;
  box-sizing: border-box;
  }
   
  .btn-7:before {
  line-height: 40px;
  content: 'Hover 7';
  color: white;
  width: 150px;
  height: 40px;
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: -2;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
  }
   
  .btn-7:hover {
  background-color: #f7f7f7;
  line-height: 40px;
  }
   
  .btn-7:hover:before {
  -webkit-transform: translateY(-40px);
  transform: translateY(-40px);
  }
</style>

Цветовую гамму вы сможете изменить в файле стилей. На этом все! Всем спасибо за просмотренный материал. Думаю он вам пригодится.

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