JSFiddle - React, Tailwind, and code Playground

HTML

<div class="contain">
<!-- hover亮片效果 -->
    <button class="flash-btn">flash effect</button>
<!-- click水纹效果 -->
    <button class="ripple-btn">ripple effect</button>
</div>

CSS

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.contain{
    width: 90%;
    margin: 20px auto;
}
button{
    padding: 10px;
    color: #409eff;
    background-color: #ecf5ff;
    border: 1px solid #b3d8ff;
    outline: none;
    position: relative;
    border-radius: 3px;
    user-select: none;
    cursor: pointer;
}
button + button{
    margin-left: 10px;
}
.flash-btn:before{
    content:'';
    background:rgba(255,255,255,.5);
    position:absolute;
    height:100%;
    width:2em;
    left:-4em;
    top:0;
    transform:skewX(-45deg) translateX(0);
}
.flash-btn:hover:before{
    transition:all .7s ease-in-out;
    transform:skewX(-45deg) translateX(10em);
}
.ripple-btn{
    overflow: hidden;
}
.ripple{
    position: absolute;
    background-color: rgba(0, 0, 0, .15);
    border-radius: 100%;
    transform: scale(0);
    pointer-events: none;
}
.ripple.show{
    animation-name: ripple;
    animation-duration: .75s;
    animation-timing-function: ease-out;
}
@keyframes ripple{
    to{
        transform: scale(2);
        opacity: 0;
    }
}

JavaScript

var addRippleEffect = function(e) {
    var target = e.target;
    if(target.tagName.toLowerCase() !== "button") return false;
    var rect = target.getBoundingClientRect();
    var ripple = target.querySelector(".ripple");
    if(!ripple){
        ripple = document.createElement("span");
        ripple.className = 'ripple';
        ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
        target.appendChild(ripple)
    }
    ripple.classList.remove("show");
    var top = e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop;
    var left = e.pageX - rect.left - ripple.offsetWidth /2 - document.body.scrollLeft;
    ripple.style.top = top + 'px';
    ripple.style.left = left + 'px';
    ripple.classList.add("show")
    return false
}
//点击时给按钮添加水纹效果
document.addEventListener("click", addRippleEffect, false);