css按钮水波纹 |css 定义 border

.btn {
position: relative;
overflow: hidden;
display: inline-block;
padding: 12px 24px;
margin: 10px;
font-size: 16px;
font-weight: 500;
color: #fff;
background: #2db5cf;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s ease;
z-index: 1;
}
.btn:hover {
background: #22a0b1;
transition: background 0.3s ease;
}
.btn:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: radial-gradient(circle, #fff 10%, transparent 10.01%);
background-size: 10px 10px;
background-position: center;
transform: scale(1, 1);
opacity: 0;
transition: transform 0.5s, opacity 1s;
}
.btn:active:before {
transform: scale(50, 50);
opacity: .25;
transition: transform 0s, opacity 0.5s;
}

上面的代码是实现按钮水波纹效果的关键。大家将按钮的position设置为relative，并为其增加一个:before伪元素。然后，大家为伪元素设置一个圆形的渐变背景，这是实现波纹效果的关键。

在按钮被激活时，大家会以涟漪的形式显示出来，这里大家使用 CSS3 的 transform 属性，使其水平垂直扩张并淡出。

总的来说， CSS按钮水波纹效果是一种非常流行的 CSS 动画效果，尤其是在开发响应式网站时，它可以非常好的增强用户交互性。这种效果的实现并不困难，只要你掌握了基本的 CSS3 动画和伪元素技术，就可以轻松制作出更加炫酷的效果，为自己的网站增添更多活力。