• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов HTML » Эффект кнопки звонка телефона на CSS (Делаем звонок телефона с кнопкой для сайта)
Эффект кнопки звонка телефона на CSS
Kosten
Дата: Четверг, 2018-10-11, 19:08 | Сообщение 1
Администраторы
Сообщений:18771
Награды: 55


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



HTML

Код
<a href="tel:"><span>☎️</span> Позвоните нам</a>


CSS

Код
a{
    font-family: 'Roboto', sans-serif;
    font-size: 35px;
    color: #191717;
    text-decoration: none;
    opacity: .7;
    transition: .3s ease-in-out;
}

    a:hover{
  opacity: 1;
    }

  a:hover span{
   -webkit-animation: vibrate 2s .6s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
  }

         span{
            display: inline-block;
         }

   a:hover span::before{
    position: absolute;
    margin-top: -45px;
    margin-left: 4px;
    content: "☎️";
    font-size: 24px;
    z-index: -1;
    opacity: 0;
    -webkit-animation: sound 2s .6s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
   }

a:first-of-type{
    margin-right: 50px;
}

@keyframes sound {
    0% { margin-top: 0px; opacity: 1; }
}

@keyframes vibrate {
    2% { transform: rotate(15deg); }
    4% { transform: rotate(0deg); }
    6% { transform: rotate(-15deg); }
    8% { transform: rotate(0deg); }
    92% { transform: rotate(0deg); }
    94% { transform: rotate(15deg); }
    96% { transform: rotate(0deg); }
    98% { transform: rotate(-15deg); }
}


Демонстрация
Прикрепления: 0865013.png(5.7 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов HTML » Эффект кнопки звонка телефона на CSS (Делаем звонок телефона с кнопкой для сайта)
  • Страница 1 из 1
  • 1
Поиск: