ZorNet.Ru — сайт для вебмастера » HTML и CSS » Кнопки hover эффект анимации на CSS3

Кнопки hover эффект анимации на CSS3

В стилях CSS3 предусмотрено очень много разнообразных трюков на эффекты, в данной статье рассмотрим анимацию hover для разных кнопок на сайт. В этом материале приведено небольшая подборка популярных или распространенных эффектов, которые созданы на чистом CSS. Где при установках на сайт безусловно украсят и освежат любую страницу, где находятся эти эффекты.

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

Почти все призывы к действию, которые вы видите в Интернете, используют какой-либо эффект наведения, потому что они привлекают внимание и делают сайт более привлекательным. Любой, кто немного знает немного CSS, может легко настроить эти эффекты для работы в любом браузере, на любом веб-сайте и улучшить впечатление для гостей и пользователей сайта.

1. «Падающая» иконка

Здесь элемент кнопки состоит из внешнего элемента А и также SPAN, который находится внутри внутри, где содержит иконку в качестве background:

Красивые CSS3 кнопки с анимацией и hover эффектами

Красивые CSS3 кнопки с анимацией и hover эффектами

HTML

Код

<a class="kupecaxp-medienceb"><span class="picavem-bunosag"></span>ZORNET.RU</a>

CSS

Код

.kupecaxp-medienceb {
  overflow:hidden;
  display: inline-block;
  height: 35px;
  line-height: 35px;
  background: green;
  padding: 0 10px;
  color: white;
  text-decoration: none;
  font-family: arial;
  cursor: pointer;
  }

.picavem-bunosag {
  position: relative;
  background: url('http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/phone.png') top left no-repeat;
  width: 15px;
  height: 15px;
  display: block;
  float: left;
  margin:7px 7px 0 0;

}
.kupecaxp-medienceb:hover .picavem-bunosag {
  -webkit-animation: anim 0.5s linear 0s 1;
  -moz-animation: anim 0.5s linear 0s 1;
  -o-animation: anim 0.5s linear 0s 1;
  animation: anim 0.5s linear 0s 1;
  }

  @-webkit-keyframes anim {
  0%{top:13px;opacity:1}
  30%{top:5px;opacity:1}
  60%{top:70px;opacity:1}
  70%{top:70px;opacity:0}
  80%{top: -50px;opacity:0}
  100%{top:13px;opacity:1}
}
@-moz-keyframes anim {
  0%{top:13px;opacity:1}
  30%{top:5px;opacity:1}
  60%{top:70px;opacity:1}
  70%{top:70px;opacity:0}
  80%{top: -50px;opacity:0}
  100%{top:13px;opacity:1}
}
@-o-keyframes anim {
  0%{top:13px;opacity:1}
  30%{top:5px;opacity:1}
  60%{top:70px;opacity:1}
  70%{top:70px;opacity:0}
  80%{top: -50px;opacity:0}
  100%{top:13px;opacity:1}
}

@keyframes anim {
0%{top:13px;opacity:1}
  30%{top:5px;opacity:1}
  60%{top:70px;opacity:1}
  70%{top:70px;opacity:0}
  80%{top: -50px;opacity:0}
  100%{top:13px;opacity:1}
}

Как можно заметить на примере, эта анимация происходит вследствие изменения значения top, что изначально находится у блока с кнопкой. Также блок, что идет внешним, то здесь нужно обязательно указывать overflow: hidden, так как иконка уезжает за его пределы.

Демонстрация

2. Выезжающая иконка

Это аналогичный принцип первому варианту, где изначально все расположено внутри, это иконка и ссылки. Сама немного верстка изменена где иконка задается как background к псевдоэлементу :before.

hover.css: анимация для ваших кнопок

При наведение на кнопку, автоматически по левой стороне появляется значок.

HTML

Код

<a class="vicmatonsaveb" href="#"><span>ZORNET.RU</span></a>

CSS

Код

.vicmatonsaveb {
  overflow: hidden;
  background: rgb(160, 21, 21);
  color: #fbf9f9;
  height: 35px;
  line-height: 35px;
  width: 130px;
  display: block;
  text-align:center;
  font-family: arial;
  font-size: 16px;
  text-decoration: none;
  position: relative;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  }
.vicmatonsaveb:before {
  content: '';
  background: url('http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/phone.png') top left no-repeat;
  width: 15px;
  height: 15px;
  display: inline-block;
  position: absolute;
  top:6px;
  left:-20px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.vicmatonsaveb:hover:before {
  left:6px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
  .vicmatonsaveb span {
  margin-left: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.vicmatonsaveb:hover span {
  margin-left: 10px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

Здесь нет не каких оформлении, а идет палитра цвета и эффект при наведение.

Демонстрация

3. Выезжающая иконка со значком

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

Внешний элемент под класс .mationse-ovevents должен иметь position: relative, где блок с иконкой позиционирован абсолютно, где присутствует анимация margin на span с текстом внутри .mationse-ovevents (.mationse-ovevents:hover span), которая отодвигает его при появлении иконки.

HTML

Код

CSS

Код

.mationse-ovevents {
  background-image: url('http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/phone-i.jpg');
  background-position: 0 0;
  width: 38px;
  height: 38px;
  display: block;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.mationse-ovevents:hover {
  background-position: 38px 0;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

Кнопка с эффектом на изображение, где также идет значение по тематике.

Демонстрация

4. Кнопка с бликом

css эффекты при наведении на картинку

Блик задействован через псевдоэлемент :after, где повернут на 35 градусов.

HTML

Код

<a href="#" class="venougma-kebsiton">Текст ссылки</a>

CSS

Код

.venougma-kebsiton {
  background: green; display: inline-block;
  padding: 10px;
  position: relative;
  color: white;
  text-decoration: none;
  font-family: arial;
  border-radius: 5px;
  overflow: hidden;
}
.venougma-kebsiton:after {
  content: '';
  width: 45px;
  height: 95px;
  display: block;
  background: rgba(194, 194, 194, 0.2);
  right: -100px;
  position: absolute;
  top: -24px;
  -webkit-transform-origin: 0 0;
  -webkit-transform: rotate(35deg);
  -moz-transform-origin: 0 0;
  -moz-transform: rotate(35deg);
  -ms-transform-origin: 0 0;
  -ms-transform: rotate(35deg);
  transform: rotate(35deg);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.venougma-kebsiton:hover:after {
  right: 10px;
}

При наведение курсора появляется клик, где останавливается по центру.

Демонстрация

5. Кнопка с увеличивающимся внутренним border

Все не так сложно, где задействуем внутренний border сделан через inset text-shadow, которая идет под анимацию.

hover эффект при наведении

HTML

Код

<a href="#" class="mationseb-movenoug">ZORNET.RU</a>

CSS

Код

.mationseb-movenoug {
  font-family: Arial;
  text-decoration: none!important;
  background: #383232;
  border: 0px;
  padding: 15px;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  color: #f3eded;
  text-decoration: none;
}

.mationseb-movenoug {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.mationseb-movenoug:hover {
  box-shadow: inset 0 0 0 30px #3082c3;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

Здесь интересный эффект, который уходит внутрь кнопки при наведение на ее курсора. Где в CSS присутствует эффект скорости появление трюка, где можно ускорить, значит значение сделать меньше, или медленее, что наоборот поднимаем значение, которое идет в цифрах.

Большинство этих анимации достаточно ручные, чтобы поместиться на любом веб-сайте, поэтому они отлично подходят для вставки на любой тематический сайт.

Но если вы хотите узнать больше о пользовательской веб-анимации, посмотрите наш огромный список анимации с кнопками, то воспользуйтесь поиском на сайте, где вы найдете большую подборку разных эффектов, которые происходят, как при наведение, так и при клике.

Демонстрация

24 Июня 2019 Просмотров: 1380 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0