CSS: Кнопка звонка с вибрацией

Создаём красивую кнопку звонка с вибрацией.

https://github.com/da41b94c/callbtn

Html код кнопки:

<a href="tel:0123456987" id="callBtn" class="callBtn">
	<span class="callBtnLabel">Call</span>
</a>

Стили:

.callBtn {
	display: block;
	position: fixed;
	text-decoration: none;
	z-index: 9999;	
	width: 58px;
	height: 58px;
	right: 5%;
	bottom: 5%;
}
.callBtnLabel{
	display: block;
	width: 58px;
	height: 58px;
	position:absolute;
	top:0;
	left:0;
	text-indent:-5000px;
	-moz-border-radius: 58px;
	-webkit-border-radius: 58px;
	border-radius: 58px;
	border-top: 1px solid #2dc62d;		
	box-shadow: 0 0px 11px rgba(3,3,3,.2);		
	background-color: #2dc62d;
}
.callBtn:before{
	content:' ';
	position:absolute;
	display:block;		
	width:76px;
	height:76px;
	-moz-border-radius: 76px;
	-webkit-border-radius: 76px;
	border-radius: 76px;				
	top:-9px;
	left:-9px;
	z-index: -1;
	background-color:rgba(45, 198, 45, 0.37);
	 -webkit-animation:pulsate 3s infinite;
	-moz-animation:pulsate 3s infinite;
	-o-animation:pulsate 3s infinite;
	animation:pulsate 3s infinite;
}

@-webkit-keyframes pulsate {
	0% {-webkit-transform: scale(0.8, 0.8);opacity: 0.3;}
	50% {-webkit-transform: scale(1, 1);opacity: 1.0;}
	100% {-webkit-transform: scale(0.8, 0.8);opacity: 0.3;}
}
@-moz-keyframes pulsate {
	0% {-moz-transform: scale(0.8, 0.8);opacity: 0.3;}
	50% {-moz-transform: scale(1, 1);opacity: 1.0;}
	100% {-moz-transform: scale(0.8, 0.8);opacity: 0.3;}
}
@-o-keyframes pulsate {
	0% {-o-transform: scale(0.8, 0.8);opacity: 0.3;}
	50% {-o-transform: scale(1, 1);opacity: 1.0;}
	100% {-o-transform: scale(0.8, 0.8);opacity: 0.3;}
}
@keyframes pulsate {
	0% {transform: scale(0.8, 0.8);opacity: 0.3;}
	50% {transform: scale(1, 1);opacity: 1.0;}
	100% {transform: scale(0.8, 0.8);opacity: 0.3;}
}
.callBtn:after{
	content:' ';
	position:absolute;
	display:block;		
	width:58px;
	height:58px;	
	-moz-border-radius: 58px;
	-webkit-border-radius: 58px;
	border-radius: 58px;
	transform: translate3d(0, 0, 0) scale(1);		
	background-position:center;
	background-size: 36px 36px;
	background-repeat: no-repeat;		
	background-image:  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAA...QmCC);
	 -webkit-animation:ring 3s infinite;
	-moz-animation:ring 3s infinite;
	-o-animation:ring 3s infinite;
	animation:ring 3s infinite;
	transform: translate3d(0, 0, 0);
}
@-webkit-keyframes ring {		
	0% { -webkit-transform: translate3d(0, 0, 0); }
	2% { -webkit-transform: translate3d(3px, 0, 0); }
	4% { -webkit-transform: translate3d(-3px, 0, 0); }
	6% { -webkit-transform: translate3d(3px, 0, 0); }
	8% { -webkit-transform: translate3d(-3px, 0, 0); }
	10% { -webkit-transform: translate3d(3px, 0, 0); }
	12% { -webkit-transform: translate3d(-3px, 0, 0); }
	14% { -webkit-transform: translate3d(3px, 0, 0); }
	16% { -webkit-transform: translate3d(-3px, 0, 0); }
	18% { -webkit-transform: translate3d(3px, 0, 0); }
	20% { -webkit-transform: translate3d(-3px, 0, 0); }
	22% { -webkit-transform: translate3d(3px, 0, 0); }
	24% { -webkit-transform: translate3d(-3px, 0, 0); }
	26% { -webkit-transform: translate3d(3px, 0, 0); }
	28% { -webkit-transform: translate3d(-3px, 0, 0); }
	30% { -webkit-transform: translate3d(3px, 0, 0); }
	32% { -webkit-transform: translate3d(-3px, 0, 0); }
	34% { -webkit-transform: translate3d(3px, 0, 0); }
	36% { -webkit-transform: translate3d(-3px, 0, 0); }
	38% { -webkit-transform: translate3d(3px, 0, 0); }
	40% { -webkit-transform: translate3d(-3px, 0, 0); }
	42% { -webkit-transform: translate3d(3px, 0, 0); }
	44% { -webkit-transform: translate3d(-3px, 0, 0); }
	46% { -webkit-transform: translate3d(0, 0, 0); }
}
@-moz-keyframes ring {		
	0% { -moz-transform: translate3d(0, 0, 0); }
	2% { -moz-transform: translate3d(3px, 0, 0); }
	4% { -moz-transform: translate3d(-3px, 0, 0); }
	6% { -moz-transform: translate3d(3px, 0, 0); }
	8% { -moz-transform: translate3d(-3px, 0, 0); }
	10% { -moz-transform: translate3d(3px, 0, 0); }
	12% { -moz-transform: translate3d(-3px, 0, 0); }
	14% { -moz-transform: translate3d(3px, 0, 0); }
	16% { -moz-transform: translate3d(-3px, 0, 0); }
	18% { -moz-transform: translate3d(3px, 0, 0); }
	20% { -moz-transform: translate3d(-3px, 0, 0); }
	22% { -moz-transform: translate3d(3px, 0, 0); }
	24% { -moz-transform: translate3d(-3px, 0, 0); }
	26% { -moz-transform: translate3d(3px, 0, 0); }
	28% { -moz-transform: translate3d(-3px, 0, 0); }
	30% { -moz-transform: translate3d(3px, 0, 0); }
	32% { -moz-transform: translate3d(-3px, 0, 0); }
	34% { -moz-transform: translate3d(3px, 0, 0); }
	36% { -moz-transform: translate3d(-3px, 0, 0); }
	38% { -moz-transform: translate3d(3px, 0, 0); }
	40% { -moz-transform: translate3d(-3px, 0, 0); }
	42% { -moz-transform: translate3d(3px, 0, 0); }
	44% { -moz-transform: translate3d(-3px, 0, 0); }
	46% { -moz-transform: translate3d(0, 0, 0); }
}
@-o-keyframes ring {
	0% { -o-transform: translate3d(0, 0, 0); }
	2% { -o-transform: translate3d(3px, 0, 0); }
	4% { -o-transform: translate3d(-3px, 0, 0); }
	6% { -o-transform: translate3d(3px, 0, 0); }
	8% { -o-transform: translate3d(-3px, 0, 0); }
	10% { -o-transform: translate3d(3px, 0, 0); }
	12% { -o-transform: translate3d(-3px, 0, 0); }
	14% { -o-transform: translate3d(3px, 0, 0); }
	16% { -o-transform: translate3d(-3px, 0, 0); }
	18% { -o-transform: translate3d(3px, 0, 0); }
	20% { -o-transform: translate3d(-3px, 0, 0); }
	22% { -o-transform: translate3d(3px, 0, 0); }
	24% { -o-transform: translate3d(-3px, 0, 0); }
	26% { -o-transform: translate3d(3px, 0, 0); }
	28% { -o-transform: translate3d(-3px, 0, 0); }
	30% { -o-transform: translate3d(3px, 0, 0); }
	32% { -o-transform: translate3d(-3px, 0, 0); }
	34% { -o-transform: translate3d(3px, 0, 0); }
	36% { -o-transform: translate3d(-3px, 0, 0); }
	38% { -o-transform: translate3d(3px, 0, 0); }
	40% { -o-transform: translate3d(-3px, 0, 0); }
	42% { -o-transform: translate3d(3px, 0, 0); }
	44% { -o-transform: translate3d(-3px, 0, 0); }
	46% { -o-transform: translate3d(0, 0, 0); }
}
@keyframes ring {
	0% { transform: translate3d(0, 0, 0); }
	2% { transform: translate3d(3px, 0, 0); }
	4% { transform: translate3d(-3px, 0, 0); }
	6% { transform: translate3d(3px, 0, 0); }
	8% { transform: translate3d(-3px, 0, 0); }
	10% { transform: translate3d(3px, 0, 0); }
	12% { transform: translate3d(-3px, 0, 0); }
	14% { transform: translate3d(3px, 0, 0); }
	16% { transform: translate3d(-3px, 0, 0); }
	18% { transform: translate3d(3px, 0, 0); }
	20% { transform: translate3d(-3px, 0, 0); }
	22% { transform: translate3d(3px, 0, 0); }
	24% { transform: translate3d(-3px, 0, 0); }
	26% { transform: translate3d(3px, 0, 0); }
	28% { transform: translate3d(-3px, 0, 0); }
	30% { transform: translate3d(3px, 0, 0); }
	32% { transform: translate3d(-3px, 0, 0); }
	34% { transform: translate3d(3px, 0, 0); }
	36% { transform: translate3d(-3px, 0, 0); }
	38% { transform: translate3d(3px, 0, 0); }
	40% { transform: translate3d(-3px, 0, 0); }
	42% { transform: translate3d(3px, 0, 0); }
	44% { transform: translate3d(-3px, 0, 0); }
	46% { transform: translate3d(0, 0, 0); }
}