本站已不再更新,最新资源请前往zcjun.com获取!

HTML

<button class="btn ripple">Button</button>

CSS

.btn {
    position: relative;
    margin: 0 auto;
    width: 200px;
    height: 50px;
    line-height: 50px;
    border-radius: 4px;
    box-shadow: 0 0 10px gray;
    background-color: #fff;
    overflow: hidden;
    cursor: pointer;
  }
  
  .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, #852 10%, transparent 20%);
      background-repeat: no-repeat;
      background-position: 50%;
      transform: scale(10, 10);
      opacity: 0;
      transition: transform 1s, opacity 1s;
  }
  
  .ripple:active:after {

      transform: scale(0, 0);
      opacity: .3;
      transition: 0s;
  }