A pulsação é muito boa para poder chamar a atenção de algum item especifico, como um botão. Nesta página no canto direito inferior demos a demonstração de como funciona.
Para conseguirmos fazer isso vamos utilizar os seguintes códigos:
<a class="buttom-whats"></a>
<style type="text/css">
.buttom-whats{
position:fixed;
width:60px;
height:60px;
bottom:40px;
right:40px;
background-color:#25d366;
color:#FFF;
border-radius:50px;
text-align:center;
font-size:30px;
box-shadow: 1px 1px 2px #888;
z-index:1000;
}
.buttom-whats::after {
content: '';
width: 30px;
height: 30px;
border-radius: 100%;
border: 6px solid #9C27B0;
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: ring 1.5s infinite;
}
@keyframes ring {
0% {
width: 30px;
height: 30px;
opacity: 1;
}
100% {
width: 100px;
height: 100px;
opacity: 0;
}
}
</style>