代码来自头条号'前端小智',侵权删

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>悬停水波纹</title>  <style>    *{      margin: 0;      padding: 0;      box-sizing: border-box;    }    body{      height: 100vh;      background: #000;      display: flex;      align-items: center;      justify-content: center;    }    .container{      position: relative;      display: flex;      /* flex-direction: column; */      align-items: center;    }    a{      position: relative;      width: 150px;      height: 55px;      text-align: center;      line-height: 55px;      margin: 10px;      text-transform: uppercase;      background: #191919;      color: #fff;      letter-spacing: 2px;      text-decoration: none;      overflow: hidden;    }    span{      position: relative;      display: block;      width: 100%;      height: 100%;      z-index: 100;      transition: 0s ease-in;    }    a:hover span{      transition: 0.4s ease-in;      transform: translateY(-100%);    }    a::before{      content: "";      width: 250px;      height: 250px;      background: #2299ff;      border-radius: 50%;      position: absolute;      bottom: -250px;      left: 50%;      transform: translateX(-50%);      transition: 0.4s ease-in;    }    a:hover::before{      bottom: -150px;    }    a:nth-child(2)::before{      bottom: 60px;    }    a:nth-child(2):hover::before {      bottom: -40px;    }  </style></head><body>  <div class="container">    <a href="#"> <!--还只能用a标签, 不然不会换行-->      <span>button</span>      <span>button</span>    </a>    <a herf="#">      <span>button</span>      <span>button</span>    </a>  </div></body></html>