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

Кнопка с плавающим эффектом HTML + CSS

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

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

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

Так выглядит при наведение клика:

Приступаем к установке:

HTML

Код

<div class="kudesan_davul_podsun">
<a href="#" class="vapaku-ksamud">ZORNET.RU</a>
</div>

CSS

Код

.vapaku-ksamud {
  width: 337px;
  height: 51px;
  line-height: 49px;
  background-color: #0a5ea2;
  border-radius: 8px;
  color: #f1eded;
  font-family: 'Indie Flower', cursive;
  font-size: 19px;
  font-weight: normal;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  position: relative;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(247, 242, 242, 0);
  -webkit-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  transform: translateY(-6px);
  -webkit-animation-name: hover;
  animation-name: hover;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

.vapaku-ksamud:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: -webkit-radial-gradient(center, ellipse, rgba(14, 14, 14, 0.36) 0%, rgba(60, 58, 58, 0) 80%);
  background: radial-gradient(ellipse at center, rgba(14, 14, 14, 0.35) 0%, rgba(167, 165, 165, 0) 80%);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  opacity: .4;
  -webkit-transform: translateY(6px);
  -ms-transform: translateY(6px);
  transform: translateY(6px);
  -webkit-animation-name: hover-shadow;
  animation-name: hover-shadow;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

  .vapaku-ksamud:hover{
  background-color: #960c6a;
  }

Добавляем плавающий эффект, это уже сам веб разработчик делает.

Код

@keyframes hover {
  50% {
  -webkit-transform: translateY(-3px);
  -ms-transform: translateY(-3px);
  transform: translateY(-3px);
  }

  100% {
  -webkit-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  transform: translateY(-6px);
  }
}

@-webkit-keyframes hover-shadow {
  0% {
  -webkit-transform: translateY(6px);
  transform: translateY(6px);
  opacity: .4;
  }

  50% {
  -webkit-transform: translateY(3px);
  transform: translateY(3px);
  opacity: 1;
  }

  100% {
  -webkit-transform: translateY(6px);
  transform: translateY(6px);
  opacity: .4;
  }
}

@keyframes hover-shadow {
  0% {
  -webkit-transform: translateY(6px);
  -ms-transform: translateY(6px);
  transform: translateY(6px);
  opacity: .4;
  }

  50% {
  -webkit-transform: translateY(3px);
  -ms-transform: translateY(3px);
  transform: translateY(3px);
  opacity: 1;
  }

  100% {
  -webkit-transform: translateY(6px);
  -ms-transform: translateY(6px);
  transform: translateY(6px);
  opacity: .4;
  }
}

@-webkit-keyframes hover {
  50% {
  -webkit-transform: translateY(-3px);
  transform: translateY(-3px);
  }

  100% {
  -webkit-transform: translateY(-6px);
  transform: translateY(-6px);
  }
}

@keyframes hover {
  50% {
  -webkit-transform: translateY(-3px);
  -ms-transform: translateY(-3px);
  transform: translateY(-3px);
  }

  100% {
  -webkit-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  transform: translateY(-6px);
  }
}

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

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

23 Февраля 2019 Загрузок: 1 Просмотров: 1365 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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