Анимированная кнопка заказа звонка на сайт

Кнопка заказать звонок Кнопка заказать звонок

Видео:

https://www.youtube.com/watch?v=_I9CwnJiTZ0

HTML Код

<body>
    <a href="Ваша ссылка на всплывающее окно">
<wrapper>
<div class="animate-pulse2">
  <div class="vidualsatun">
  <div class="campakesad">
  <div class="vebusines"></div>
  <div class="nigkugas"><i class="fa fa-phone" aria-hidden="true"></i></div>
  <div class="dsacin">
          Заказать звонок
  </div>
  </div>
  </div>
  </div>
 </a>
</wrapper>
</body>

CSS Код

.vidualsatun {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: animate_pulse2 2s infinite; 
  border-radius: 100px;
}

.campakesad, .vebusines, .nigkugas {
  position: absolute;
  width: 70px;
  height: 70px;
  color: #fff;
  text-align: center;
  border-radius: 50%;
}
.vebusines {
  cursor: pointer;
  z-index: 1;
  overflow: hidden;
}
.campakesad {
  background: #00BD15;
  position: relative;
  transition: .5s;
}
.nigkugas {
  font-size: 28px;
  line-height: 70px;
  animation: phone .9s ease-in-out infinite;
}
.dsacin {
  position: absolute;
  opacity: 0;
  text-transform: uppercase;
  font-weight: 500;
  top: 18px;
  font-size: 12px;
  transform: scaleX(-1);
  transition: .5s ease-in-out;
}
.nigkugas i {
  transition: .5s ease-in-out;
}
.campakesad:hover {
  background: #00BD15;
}
.campakesad:hover i {
  transition: .5s ease-in-out;
  transform: scale(0);
}
.campakesad:hover .dsacin {
  transform: scaleX(1);
  transition: .5s ease-in-out;
  opacity: 1;
}
.campakesad:hover::before,
.campakesad:hover::after {
  content: '';
  position: absolute;
  border: 1px solid #green;
  left: -20px;
  right: -20px;
  top: -20px;
  bottom: -20px;
  border-radius: 50%;
  animation: pulse 1.8s linear infinite;
  opacity: 0;
}
.campakesad:hover::after {
  animation-delay: .5s;
 
}

@keyframes phone {
  0%, 100% {
  transform: rotate(-20deg);
  }
  50% {
  transform: rotate(21deg);
  }
}
@keyframes pulse {
  0% {
  transform: scale(0.5);
  opacity: 0;
  }
  50% {
  opacity: 1;
  }
  100% {
  transform: scale(1.2);
  opacity: 0;
  }
  
}

@keyframes animate_pulse2 {
	0% {
		box-shadow: 0 0 0 0 rgba(0, 189, 31, 0.67);
	}
	70% {
		box-shadow: 0 0 0 20px rgba(0, 189, 31, 0.27);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(0, 189, 31, 0.17);
	}

 

Адаптивная, SEO подготовленная WordPress тема
Артём/ автор статьи
Понравилась статья? Поделиться с друзьями:
Комментарии: 1
  1. Александр

    Спасибо, виджет выглядит хорошо. Но предложенная вами система позиционирования не позволяет правильно располагать кнопку на устройствах с различными разрешениеми экрана. То, что расположено уместно в 1920×1080, исчезает при разрешении 1366х768 и т.д. Добиться хорошего расположения на различных разрешениях экрана мне не удалось. Ещё один момент. Хорошо когда при взгляде на кнопку пользователь сразу понимает, что речь идёт именно об обратном звонке, а не о том, что он сам может позвонить (у вас для этого нужно навести курсор на объект — мобильных устройствах это не работает). Т.е. периодические самостоятельные перевороты кномпки, на мой взгляд, улучшили бы виджет.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: