下面是一个简单的实现水波纹点击效果的CSS代码示例:

css
.button {
position: relative; /* 设置相对定位 */
display: inline-block;
padding: 10px 20px;
background-color: #ccc;
color: #fff;
font-size: 16px;
cursor: pointer;
overflow: hidden; /* 隐藏溢出的水波纹效果 */
}

.button::after {
content: "";
position: absolute; /* 设置绝对定位 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 将水波纹居中 */
width: 0;
height: 0;
background-color: rgba(255, 255, 255, 0.5); /* 设置水波纹的背景色、透明度 */
border-radius: 50%; /* 设置水波纹为圆形 */
opacity: 0; /* 设置初始时水波纹不可见 */
pointer-events: none; /* 禁用水波纹的鼠标事件 */
transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease; /* 设置过渡效果 */
}

.button:hover::after {
width: 200px; /* 水波纹的宽度 */
height: 200px; /* 水波纹的高度 */
opacity: 1; /* 显示水波纹 */
}

这段代码创建了一个按钮样式,当鼠标悬停在按钮上时,会出现一个水波纹效果。你可以通过修改`.button`类的样式来自定义按钮的外观。