JSFiddle - React, Tailwind, and code Playground

HTML

<div class='button'>
  <button>Click Me</button>
  <svg viewBox="0 0 500 150" preserveAspectRatio="none">
    <path fill="none" d="M325,18C228.7-8.3,118.5,8.3,78,21C22.4,38.4,4.6,54.6,5.6,77.6c1.4,32.4,52.2,54,142.6,63.7 c66.2,7.1,212.2,7.5,273.5-8.3c64.4-16.6,104.3-57.6,33.8-98.2C386.7-4.9,179.4-1.4,126.3,20.7" />
  </svg>
</div>

CSS

.button {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.button button {
  padding: 8px 16px;
  border: none;
  background: none;
  outline: none;
}

.button svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.button path {
  stroke: #db3157;
  stroke-width: 8px;
  stroke-dasharray: 0 1500;
}

.button:hover path {
  animation: draw 1s forwards;
}

@keyframes draw {
  from {
    stroke-dasharray: 0 1500;
  }

  to {
    stroke-dasharray: 1500 1500;
  }
}