效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/3cff3bf74c94705575afb205ee026f0b.gif)
代码
<div>
<button class="btn">点击</button>
</div>
<style>
.btn {
position: relative;
overflow: hidden;
background-color: #000;
border: 1px solid #00ffff;
color: #fff;
padding: 4px 10px;
outline: none;
}
.btn:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: scale(10, 10);
opacity: 0;
transition: transform 0.3s, opacity 0.5s;
}
.btn:active:after {
transform: scale(0, 0);
opacity: 0.6;
transition: 0s;
}
</style>