.ripple{position:relative;}
.ripple:after{content:"";display:block;position:absolute;width:13px;height:13px;top:3px;left:1px;z-index:999;pointer-events:none;background-image:radial-gradient(circle,#000 20%,transparent 10.01%);background-repeat:no-repeat;background-position:5% left;transform:scale(10,10);-ms-transform:scale(10.10);-webkit-transform:scale(10,10);opacity:0;transition:transform .5s, opacity 1s;-webkit-transition:transform .5s, opacity 1s;}
.ripple:active:after{transform:scale(0,0);-ms-transform:scale(0.0);-webkit-transform:scale(0,0);opacity:.5;transition:0s;-webkit-transition:0s;}
@media screen and (-webkit-min-device-pixel-ratio:0){.ripple{position:relative;}
 .ripple:after{content:"";display:block;position:absolute;width:13px;height:13px;top:5px;left:2px;z-index:999;pointer-events:none;background-image:radial-gradient(circle,#000 20%,transparent 10.01%);background-repeat:no-repeat;background-position:5% left;transform:scale(10,10);opacity:0;transition:transform .5s,opacity 1s }
 .ripple:active:after{transform:scale(0,0);opacity:.5;transition:0s}
}