.btn {
background-image: url(../img/btn.png);
background-position: 0 0;
width: 478px;
height: 152px;
display: inline-block;
position: absolute;
top: 160px;
left: 0;
font-size: 20px;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,0.53);
text-align: center;
line-height: 150px;
}
.btn:hover {
background-position: 0 -155px;
padding-top: 2px;
}
.btn:before {
content: '';
position: absolute;
top: 50px;
right: 40px;
bottom: 50px;
left: 40px;
border: 6px solid transparent;
border-radius: 50px;
animation-duration: 1s;
}
.btn:hover:before, .btn:focus:before, .btn:active:before {
animation-name: hvr-ripple-out;
}
@keyframes hvr-ripple-out {
100% {
border-color: #ccc;
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
opacity: 0
}
}
.btn{background-image:url(../img/btn.png);background-position:0 0;width:478px;height:152px;display:inline-block;position:absolute;top:160px;left:0;font-size:20px;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,0.53);text-align:center;line-height:150px}.btn:before{content:'';position:absolute;top:50px;right:40px;bottom:50px;left:40px;border:6px solid transparent;border-radius:50px;-webkit-animation-duration:1s;animation-duration:1s}.btn:hover:before,.btn:focus:before,.btn:active:before{-webkit-animation-name:hvr-ripple-out;animation-name:hvr-ripple-out}@-webkit-keyframes hvr-ripple-out{100%{border-color:#ccc;top:-12px;right:-12px;bottom:-12px;left:-12px;opacity:0}}@keyframes hvr-ripple-out{100%{border-color:#ccc;top:-12px;right:-12px;bottom:-12px;left:-12px;opacity:0}}