css按钮点击水波纹效果

利用伪元素:after绘制水波纹，此处的水波纹效果使用了css函数radial-gradient(径向渐变)，再配合3D缩放transform及transition过渡效果实现水波动态效果。
以下代码使用less语言

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