CSS Button Animation - Heartbeat

CSS Button Animation - Heartbeat

by Nirvanachain

HTML

<a class="btn" href="#">Click Here</a>

CSS

body {
    text-align: center;
    padding: 1em;
}

.btn {
    display: inline-block;
    padding: 15px 25px;
    background-color: red;
    color: white;
    line-height: 25px;
    border: 2px solid black;
    text-decoration: none;
   transition: background-color 0.5s linear;
}

@-webkit-keyframes heartbeat {
    0% { -webkit-transform: scale(1); }
	50% { -webkit-transform: scale(0.9); }
	100% { -webkit-transform: scale(1); }
}

.btn:hover, .btn:focus {
    background-color: #ff9999;
    
	-webkit-animation-name: heartbeat;
	-webkit-animation-duration: 200ms;
	-webkit-transform-origin:50% 50%;
	-webkit-animation-iteration-count: 2;
	-webkit-animation-timing-function: linear;
}