<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
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.