console
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<style>
.app {
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.btn68 {
width: 120px;
height: 50px;
background-color: #0093e9;
color: #ffffff;
font-size: 16px;
font-weight: bold;
letter-spacing: 2px;
border: none;
border-radius: 25px;
cursor: pointer;
position: relative;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.1s linear;
}
.btn68:before,
.btn68:after {
content: "";
width: 120px;
height: 50px;
border-radius: 25px;
position: absolute;
animation: eff68 1.4s linear infinite;
}
.btn68:after {
animation-delay: 0.7s;
}
@keyframes eff68 {
0% {
box-shadow: 0 0 0 0px #0093e9;
opacity: 0.2;
}
100% {
box-shadow: 0 0 0 30px #0093e9;
opacity: 0;
}
}
.btn68:active {
transform: scale(0.96);
}
</style>
<title>水波纹按钮</title>
</head>
<body>
<div class="app">
<button class="btn68">button</button>
</div>
</body>
</html>