Пульсирующая кнопка на css

Часто приходится кастомизировать кнопки обратного звонка и приделывать им эффекты. Один из эффектов это эффект пульсирующей кнопки.

Делается это на чистом 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);
}

Кнопку можно разместить в любом месте