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

Кнопка обратного звонка с помощью CSS

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

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

Если по умолчанию мы видим простой круг в светло-синей палитре, которая меняется в CSS по цветовой гамме. То стоит только навести курсор, так появится волны и вместо знака трубки, то здесь происходит изменение на слова "кнопка связи" с удержанием, то только курсор убираем, так все остается, как было изначально.

Так выглядит в не рабочем, и аналогично в рабочем виде:

Круглая кнопка для обратного звонка на CSS с анимацией

HTML

Код

<body>
<wrapper>
  <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>
</wrapper>
</body>

CSS

Код

.vidualsatun {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.campakesad, .vebusines, .nigkugas {
  position: absolute;
  width: 90px;
  height: 90px;
  color: #fff;
  text-align: center;
  border-radius: 50%;
}
.vebusines {
  cursor: pointer;
  z-index: 1;
  overflow: hidden;
}
.campakesad {
  background: #5CC2E2;
  position: relative;
  transition: .5s;
}
.nigkugas {
  font-size: 50px;
  line-height: 94px;
  animation: phone .9s ease-in-out infinite;
}
.dsacin {
  position: absolute;
  opacity: 0;
  text-transform: uppercase;
  font-weight: 700;
  top: 28px;
  font-size: 15px;
  transform: scaleX(-1);
  transition: .5s ease-in-out;
}
.nigkugas i {
  transition: .5s ease-in-out;
}
.campakesad:hover {
  background: #29AEE3;
}
.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 #29AEE3;
  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;
  }
}

Как уже заметили, что все работает на чистом CSS, разве только нужно подключить шрифтовые иконки Font Awesome, что отвечают за вывод знака трубки.

Которая изначально красиво показана, где не установлена на одном месте, а производится в связке с анимацией, что смотрится великолепно на любом сайте.

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

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

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

СКАЧАТЬ

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

Kosten

Комментарии: 1
Порядок вывода комментариев: Kosten 15 Февраля 2019 21:27¹ 0 Есть много вариаций, чтоб показать на сайте, где идет функция обратного звонка. Для этого также можете посмотреть вариант обратный звонок, что по схеме стиля они аналогичны, разве эффекты разные, у каждого свой оригинальный.