Кнопки CSS

Круглая пульсирующая кнопка

Похожа на callbackhunter. Иконка из UIKit 3.

HTML

<a href="#call" class="puls-button" data-uk-toggle>
    <div class="call-btn">
        <i uk-icon="icon: mail; ratio: 1.5;"></i>
        <span>Написать<br>нам</span>
    </div>
</a>

LESS

.puls-button {
	background: @brand-color;
	border-radius: 50%;
	box-shadow: 0 8px 10px rgba(221, 45, 24,0.3);
	cursor: pointer;
	height: 68px;
	text-align: center;
	width: 68px;
	position: fixed;
	right: 8%;
	bottom: 10%;
	z-index: 999;
	transition: .3s;
	-webkit-animation: hoverWave linear 1s infinite;
	animation: hoverWave linear 1s infinite;
	.call-btn {
		height: 68px;
		width: 68px;        
		border-radius: 50%;
		position: relative;
		overflow: hidden;
		span {
			text-align: center;
			color: @brand-color;
			opacity: 0;
			font-size: 0;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			line-height: 14px;
			font-weight: bold;
			transition: opacity .3s linear;
			font-family: 'montserrat', Arial, Helvetica, sans-serif;
		}
		&:hover {
			span {
				opacity: 1;
				font-size: 11px;
			}
			i {
				display:none;
			}
		}
	}
	i {
		color: #fff;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: -15px;
		margin-left: -15px;
		transition: .3s;
		transition: .5s ease-in-out;
		
		animation: 1200ms ease 0s normal none 1 running shake;
        animation-iteration-count: infinite;
        -webkit-animation: 1200ms ease 0s normal none 1 running shake;
        -webkit-animation-iteration-count: infinite;
	}
	&:hover {
		z-index: 1;
        background: #fff;
        color: transparent;
        transition: .3s;
		i {
			color: #38a3fd;
			font-size: 40px;
			transition: .3s;
		}
	}
}

@-webkit-keyframes hoverWave {
	0% {
        box-shadow: 0 8px 10px rgba(221, 45, 24,0.3),0 0 0 0 rgba(221, 45, 24,0.2),0 0 0 0 rgba(221, 45, 24,0.2)
	}
	40% {
		box-shadow:0 8px 10px rgba(221, 45, 24,0.3),0 0 0 15px rgba(221, 45, 24,0.2),0 0 0 0 rgba(221, 45, 24,0.2)
	}
	80% {
		box-shadow:0 8px 10px rgba(221, 45, 24,0.3),0 0 0 30px rgba(221, 45, 24,0),0 0 0 26.7px rgba(221, 45, 24,0.067)
	}
	100% {
		box-shadow:0 8px 10px rgba(221, 45, 24,0.3),0 0 0 30px rgba(221, 45, 24,0),0 0 0 40px rgba(221, 45, 24,0.0)
	}
}
@keyframes hoverWave {
	0% {
		box-shadow:0 8px 10px rgba(221, 45, 24,0.3),0 0 0 0 rgba(221, 45, 24,0.2),0 0 0 0 rgba(221, 45, 24,0.2)
	}
	40% {
		box-shadow:0 8px 10px rgba(221, 45, 24,0.3),0 0 0 15px rgba(221, 45, 24,0.2),0 0 0 0 rgba(221, 45, 24,0.2)
	}
	80% {
		box-shadow:0 8px 10px rgba(221, 45, 24,0.3),0 0 0 30px rgba(221, 45, 24,0),0 0 0 26.7px rgba(221, 45, 24,0.067)
	}
	100% {
		box-shadow:0 8px 10px rgba(221, 45, 24,0.3),0 0 0 30px rgba(221, 45, 24,0),0 0 0 40px rgba(221, 45, 24,0.0)
	}
}

@-webkit-keyframes shake {
	0% {
		transform: rotateZ(0deg);
			-ms-transform: rotateZ(0deg);
			-webkit-transform: rotateZ(0deg);
	}
	10% {
		transform: rotateZ(-30deg);
			-ms-transform: rotateZ(-30deg);
			-webkit-transform: rotateZ(-30deg);
	}
	20% {
		transform: rotateZ(15deg);
			-ms-transform: rotateZ(15deg);
			-webkit-transform: rotateZ(15deg);
	}
	30% {
		transform: rotateZ(-10deg);
			-ms-transform: rotateZ(-10deg);
			-webkit-transform: rotateZ(-10deg);
	}
	40% {
		transform: rotateZ(7.5deg);
			-ms-transform: rotateZ(7.5deg);
			-webkit-transform: rotateZ(7.5deg);
	}
	50% {
		transform: rotateZ(-6deg);
			-ms-transform: rotateZ(-6deg);
			-webkit-transform: rotateZ(-6deg);
	}
	60% {
		transform: rotateZ(5deg);
			-ms-transform: rotateZ(5deg);
			-webkit-transform: rotateZ(5deg);
	}
	70% {
		transform: rotateZ(-4.28571deg);
			-ms-transform: rotateZ(-4.28571deg);
			-webkit-transform: rotateZ(-4.28571deg);
	}
	80% {
		transform: rotateZ(3.75deg);
			-ms-transform: rotateZ(3.75deg);
			-webkit-transform: rotateZ(3.75deg);
	}
	90% {
		transform: rotateZ(-3.33333deg);
			-ms-transform: rotateZ(-3.33333deg);
			-webkit-transform: rotateZ(-3.33333deg);
	}
	100% {
		transform: rotateZ(0deg);
			-ms-transform: rotateZ(0deg);
			-webkit-transform: rotateZ(0deg);
	}
}
@keyframes shake {
	0% {
		transform: rotateZ(0deg);
			-ms-transform: rotateZ(0deg);
			-webkit-transform: rotateZ(0deg);
	}
	10% {
		transform: rotateZ(-30deg);
			-ms-transform: rotateZ(-30deg);
			-webkit-transform: rotateZ(-30deg);
	}
	20% {
		transform: rotateZ(15deg);
			-ms-transform: rotateZ(15deg);
			-webkit-transform: rotateZ(15deg);
	}
	30% {
		transform: rotateZ(-10deg);
			-ms-transform: rotateZ(-10deg);
			-webkit-transform: rotateZ(-10deg);
	}
	40% {
		transform: rotateZ(7.5deg);
			-ms-transform: rotateZ(7.5deg);
			-webkit-transform: rotateZ(7.5deg);
	}
	50% {
		transform: rotateZ(-6deg);
			-ms-transform: rotateZ(-6deg);
			-webkit-transform: rotateZ(-6deg);
	}
	60% {
		transform: rotateZ(5deg);
			-ms-transform: rotateZ(5deg);
			-webkit-transform: rotateZ(5deg);
	}
	70% {
		transform: rotateZ(-4.28571deg);
			-ms-transform: rotateZ(-4.28571deg);
			-webkit-transform: rotateZ(-4.28571deg);
	}
	80% {
		transform: rotateZ(3.75deg);
			-ms-transform: rotateZ(3.75deg);
			-webkit-transform: rotateZ(3.75deg);
	}
	90% {
		transform: rotateZ(-3.33333deg);
			-ms-transform: rotateZ(-3.33333deg);
			-webkit-transform: rotateZ(-3.33333deg);
	}
	100% {
		transform: rotateZ(0deg);
			-ms-transform: rotateZ(0deg);
			-webkit-transform: rotateZ(0deg);
	}
}