要在 HTML 中创建波纹效果按钮，可以使用 CSS 动画和伪元素。首先，需要创建一个按钮元素，例如：
<button class="ripple-btn">点击我</button>然后，在 CSS 中定义按钮的样式和波纹效果：
.ripple-btn {
position: relative;
overflow: hidden;
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
.ripple-btn::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.7);
transform: translate(-50%, -50%);
opacity: 0;
transition: width 0.3s ease-out, height 0.3s ease-out, opacity 0.3s ease-out;
}
.ripple-btn:hover::after {
width: 200%;
height: 200%;
opacity: 1;
}在这个例子中，我们给按钮元素添加了一个名为 ripple-btn 的类。然后，我们使用 position: relative 和 overflow: hidden 来创建一个容器，使得伪元素 ::after 可以在按钮内部创建。
接下来，我们定义 ::after 伪元素的样式。我们将其放置在按钮的中心位置，使用 border-radius: 50% 来创建一个圆形，设置 background-color 来定义波纹的颜色，设置 opacity 为 0 来隐藏它。
最后，我们使用 transition 属性来定义动画效果，当鼠标经过按钮时，::after 伪元素将会展开，显示出一个波纹效果。
重要关键词：
::after 和 ::before)position: relative 和 overflow: hiddenborder-radius: 50%transition 属性