На официальном сайте нужно вывести телефон, чтоб смотрелось все оригинально, то думаю для вас этот материал будет отличным решением. Так как можно выставить как номер, также надпись "Позвоните нам" где при наведение произойдет красивый эффект. Также в аналогичным порядке веб разработчик может сменить кнопку, фигуру и создать совершенно другую функцию.
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); }
}
Демонстрация
