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

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

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

Анимация при наведении курсора на кнопку на CSS3

Дата добавления: 28.03.2017 - 08:38
Категория: Кнопки / иконки
Добавил: Buger
Количество просмотров: 127
Количество комментариев: 0
Размер файла: 10.8Kb
Рейтинг материала: 5.0 / 1
Анимация при наведении курсора на кнопку на CSS3
рейтинг 5.0
/
голосов 1
В данном виде кнопок реализовано использование псевдоэлементов для имитации границы элемента с переходом и чередующимся transform-origin при наведении. Довольно интересное решение для наведении на кнопку. В демонстрации показаны два примера. Отличие в них в том, что все эффекты осуществляются в обратном порядке. Какой вид выбирать, решать только вам. Оба вида красивы.

HTML
Код
<h2>По часовой стрелке</h2>
<div class="row">
  <div class="button clockwise horizontal">Горизонталь</div>
  <div class="button clockwise vertical">Вертикаль</div>
  <div class="button clockwise both">И то и другое<div class="inner"></div></div>
  </div>
<h2>Против часовой стрелки</h2>
<div class="row">
  <div class="button counterclockwise horizontal">Горизонталь</div>
  <div class="button counterclockwise vertical">Вертикаль</div>
  <div class="button counterclockwise both">И то и другое<div class="inner"></div></div>
</div>


CSS
Код
.button {
  position: relative;
  cursor: pointer;
  color: white;
  font-family: sans-serif;
  font-size: 1.5em;
  padding: 0.5em 1em 0.65em;
  margin: 0 10px;
  background: #3c4650;
  }
   
  .button .inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  }
   
  .button:nth-of-type(1):before,
  .button:nth-of-type(1):after,
  .button:nth-of-type(1) .inner:before,
  .button:nth-of-type(1) .inner:after {
  background-color: #ffa726;
  }
   
  .button:nth-of-type(2):before,
  .button:nth-of-type(2):after,
  .button:nth-of-type(2) .inner:before,
  .button:nth-of-type(2) .inner:after {
  background-color: #26a69a;
  }
   
  .button:nth-of-type(3):before,
  .button:nth-of-type(3):after,
  .button:nth-of-type(3) .inner:before,
  .button:nth-of-type(3) .inner:after {
  background-color: #7e57c2;
  }
   
  .button:before,
  .button:after,
  .button .inner:before,
  .button .inner:after {
  position: absolute;
  content: "";
  display: block;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  }
   
  .button.horizontal:before,
  .button.horizontal:after,
  .button.both:before,
  .button.both:after {
  left: 0;
  width: 100%;
  height: 2px;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  }
   
  .button.horizontal .inner:before,
  .button.horizontal .inner:after,
  .button.both .inner:before,
  .button.both .inner:after {
  top: 0;
  width: 2px;
  height: 100%;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  }
   
  .button.horizontal .inner:before,
  .button.both .inner:before {
  left: 0;
  }
   
  .button.horizontal .inner:after,
  .button.both .inner:after {
  right: 0;
  }
   
  .button.horizontal .inner:hover:before,
  .button.horizontal .inner:hover:after,
  .button.both .inner:hover:before,
  .button.both .inner:hover:after {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  }
   
  .button.horizontal:before,
  .button.both:before {
  top: 0;
  }
   
  .button.horizontal:after,
  .button.both:after {
  bottom: 0;
  }
   
  .button.horizontal:hover:before,
  .button.horizontal:hover:after,
  .button.both:hover:before,
  .button.both:hover:after {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  }
   
  .button.horizontal:hover .inner:before,
  .button.horizontal:hover .inner:after,
  .button.both:hover .inner:before,
  .button.both:hover .inner:after {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  }
   
  .button.horizontal.clockwise .inner:before,
  .button.both.clockwise .inner:before {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  }
   
  .button.horizontal.clockwise .inner:after,
  .button.both.clockwise .inner:after {
  -webkit-transform-origin: bottom center;
  transform-origin: bottom center;
  }
   
  .button.horizontal.clockwise:before,
  .button.both.clockwise:before {
  -webkit-transform-origin: right center;
  transform-origin: right center;
  }
   
  .button.horizontal.clockwise:after,
  .button.both.clockwise:after {
  -webkit-transform-origin: left center;
  transform-origin: left center;
  }
   
  .button.horizontal.clockwise:hover .inner:before,
  .button.both.clockwise:hover .inner:before {
  -webkit-transform-origin: bottom center;
  transform-origin: bottom center;
  }
   
  .button.horizontal.clockwise:hover .inner:after,
  .button.both.clockwise:hover .inner:after {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  }
   
  .button.horizontal.clockwise:hover:before,
  .button.both.clockwise:hover:before {
  -webkit-transform-origin: left center;
  transform-origin: left center;
  }
   
  .button.horizontal.clockwise:hover:after,
  .button.both.clockwise:hover:after {
  -webkit-transform-origin: right center;
  transform-origin: right center;
  }
   
  .button.horizontal.counterclockwise .inner:before,
  .button.both.counterclockwise .inner:before {
  -webkit-transform-origin: bottom center;
  transform-origin: bottom center;
  }
   
  .button.horizontal.counterclockwise .inner:after,
  .button.both.counterclockwise .inner:after {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  }
   
  .button.horizontal.counterclockwise:before,
  .button.both.counterclockwise:before {
  -webkit-transform-origin: left center;
  transform-origin: left center;
  }
   
  .button.horizontal.counterclockwise:after,
  .button.both.counterclockwise:after {
  -webkit-transform-origin: right center;
  transform-origin: right center;
  }
   
  .button.horizontal.counterclockwise:hover .inner:before,
  .button.both.counterclockwise:hover .inner:before {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  }
   
  .button.horizontal.counterclockwise:hover .inner:after,
  .button.both.counterclockwise:hover .inner:after {
  -webkit-transform-origin: bottom center;
  transform-origin: bottom center;
  }
   
  .button.horizontal.counterclockwise:hover:before,
  .button.both.counterclockwise:hover:before {
  -webkit-transform-origin: right center;
  transform-origin: right center;
  }
   
  .button.horizontal.counterclockwise:hover:after,
  .button.both.counterclockwise:hover:after {
  -webkit-transform-origin: left center;
  transform-origin: left center;
  }
   
  .button.vertical:before,
  .button.vertical:after {
  top: 0;
  width: 2px;
  height: 100%;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  }
   
  .button.vertical:before {
  left: 0;
  }
   
  .button.vertical:after {
  right: 0;
  }
   
  .button.vertical:hover:before,
  .button.vertical:hover:after {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  }
   
  .button.vertical.clockwise:before {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  }
   
  .button.vertical.clockwise:after {
  -webkit-transform-origin: bottom center;
  transform-origin: bottom center;
  }
   
  .button.vertical.clockwise:hover:before {
  -webkit-transform-origin: bottom center;
  transform-origin: bottom center;
  }
   
  .button.vertical.clockwise:hover:after {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  }
   
  .button.vertical.counterclockwise:before {
  -webkit-transform-origin: bottom center;
  transform-origin: bottom center;
  }
   
  .button.vertical.counterclockwise:after {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  }
   
  .button.vertical.counterclockwise:hover:before {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  }
   
  .button.vertical.counterclockwise:hover:after {
  -webkit-transform-origin: bottom center;
  transform-origin: bottom center;
  }


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