SOURCE

<button>Chlick Me</button>

button{
    border: none;
    background-color: green;
    font-size: 28px;
    padding: 20px;    
    width: 200px;
    color: #fff;
    border-radius: 5px;
    text-transform: capitalize;
    position: relative;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    transition-duration: 0.4s;
}

button::after{
    /* 通过添加一个元素，该元素使用绝对定位，也就是脱离文档流，它只与它的父元素相关(button)，然后通过点击动画实现效果 */
    content: "";
    background-color: red;
    display: block;
    position: absolute;
    padding: 350%;
    margin-left: -20%!important;
    margin-top: -100px;
    opacity: 0;
    transition: all 0.5s;
}
button:active::after{
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s;
}