<button class="waveBtn">
<svg width="40" height="30" viewBox="5 0 80 60" class="waveImg"><path class="wave" fill="none" stroke="#4963E3" stroke-width="3" stroke-linecap="round" d="M 0 37.5 c 7.684299348848887 0 7.172012725592294 -15 15 -15 s 7.172012725592294 15 15 15 s 7.172012725592294 -15 15 -15 s 7.172012725592294 15 15 15 s 7.172012725592294 -15 15 -15 s 7.172012725592294 15 15 15 s 7.172012725592294 -15 15 -15 s 7.172012725592294 15 15 15 s 7.172012725592294 -15 15 -15 s 7.172012725592294 15 15 15 s 7.172012725592294 -15 15 -15 s 7.172012725592294 15 15 15 s 7.172012725592294 -15 15 -15 s 7.172012725592294 15 15 15 s 7.172012725592294 -15 15 -15" />
</svg>
</button>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
margin: 0;
background: #282937;
}
.waveBtn {
background: transparent;
height: 22px;
width: 55px;
border-radius: 9999rem;
border: 1px solid #4963E3;
position: relative;
overflow: hidden;
transform: scale(12);
}
.waveImg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.wave {
animation: moveTheWave 3400ms linear infinite;
stroke-dasharray: 0 16 101 16;
}
@keyframes moveTheWave {
0% {
stroke-dashoffset: -3;
transform: translate3d(0, 0, 0);
}
100% {
stroke-dashoffset: -138;
transform: translate3d(-90px, 0, 0);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.