Часто приходится кастомизировать кнопки обратного звонка и приделывать им эффекты. Один из эффектов это эффект пульсирующей кнопки.
Делается это на чистом CSS. Создаем саму кнопку в виде кружочка:
background: url(images/phone.png) no-repeat,#cd0000;
background-position: center;
display: block;
float: left;
width: 45px;
height: 45px;
font-size: 0;
position: relative;
margin-right: 20px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
-khtml-border-radius: 40px;
border-radius: 40px;
Теперь создадим правило ключевого кадра или кадров:
@-webkit-keyframes pulse{
0%{
-webkit-transform: scale(.6);
opacity: 0;
}
50%{
-webkit-transform: scale(.9);
opacity: 0;
}
60%{
-webkit-transform: scale(1.1);opacity: .6;
}
70%{
-webkit-transform: scale(1.3);opacity: .85;
}
80%{
-webkit-transform: scale(1.4);opacity: .6;
}
100%{
-webkit-transform: scale(1.6);opacity: 0;
}
}
Теперь для создания эффекта пульса добавим псевдо-класс к кнопке:
:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: -3px;
left: -3px;
opacity: 0;
border: 3px solid rgba(255,255,255,0.1);
-webkit-animation: pulse1 2s linear infinite;
-moz-animation: pulse1 2s linear infinite;
animation: pulse1 2s linear infinite;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
-webkit-box-shadow: inset 0px 0px 15px 10px rgba(71,91,115,0.41);
-moz-box-shadow: inset 0px 0px 15px 10px rgba(71,91,115,0.41);
box-shadow: inset 0px 0px 15px 10px rgba(71,91,115,0.41);
}
Кнопку можно разместить в любом месте