.ripple{position:relative;overflow:hidden}.ripple:after{content:"";display:block;position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;background-image:radial-gradient(circle,#000 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;-webkit-transform:scale(10,10);transform:scale(10,10);opacity:0;-webkit-transition:opacity 1s,-webkit-transform .2s;transition:opacity 1s,-webkit-transform .2s;transition:transform .2s,opacity 1s;transition:transform .2s,opacity 1s,-webkit-transform .2s}.ripple:active:after{-webkit-transform:scale(0,0);transform:scale(0,0);opacity:.2;-webkit-transition:0s;transition:0s}