Как сделать пульсирующую кнопку телефона — PROG-TIME

Как сделать пульсирующую кнопку телефона

16.10.2020
Содержание:

Сегодня я вам покажу как сделать пульсирующую кнопку для звонка. Кнопка будет закреплена в правом нижнем углу и при нажатии будет выбираться приложение для звонка.

HTML

<a class="mobil_call_but">
  <img src="https://prog-time.ru/wp-content/uploads/2019/11/phone.png"/>
</a>

CSS

Пульсация достигается за счёт изменения тени для блока. Мы создаем анимацию с помощью @keyframes.

.mobil_call_but {
    display: block;
    position: fixed;
    bottom: 20px;
    right: 15px;
    z-index: 999;
    width: 90px;
    height: 90px;
    animation: radial-pulse 1s infinite;
    border-radius: 50%;
}
/*создаем анимацию пульсации*/
@keyframes radial-pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(116, 228, 116, 0.5);
  }
  100% {
    box-shadow: 0 0 0 40px rgba(207, 241, 207, 0);
  }
}