<svg id="stroke" xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <defs>
    <path id="line" d="M2 2c49.7 2.6 100 3.1 150 1.7-46.5 2-93 4.4-139.2 7.3 45.2-1.5 90.6-1.8 135.8-.6" fill="none" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke"/>
  </defs>
</svg>

<div class="container">
  <a class="btn" href="/">I am a button with a long name
    <svg class="button-stroke" viewBox="0 0 154 13">
      <use href="#line"></use>
    </svg>
    <svg class="button-stroke" viewBox="0 0 154 13">
      <use href="#line"></use>
    </svg>
  </a>
  <a class="btn" href="/">Find out more
    <svg class="button-stroke" viewBox="0 0 154 13">
      <use href="#line"></use>
    </svg>
    <svg class="button-stroke" viewBox="0 0 154 13">
      <use href="#line"></use>
    </svg>
  </a>
  <a class="btn" href="/">Button
    <svg class="button-stroke" viewBox="0 0 154 13">
      <use href="#line"></use>
    </svg>
    <svg class="button-stroke" viewBox="0 0 154 13">
      <use href="#line"></use>
    </svg>
  </a>
</div>

* {
  box-sizing: border-box;
}

body {
  background-color: #263238;
}

.btn {
  display: inline-block;
  color: white;
  min-width: 154px;
  text-decoration: none;
  margin-right: 50px;
  padding: 20px;
  position: relative;
  text-align: center;
  
  &:hover {
    .button-stroke:nth-child(2) {
      stroke-dashoffset: 0;
    }
  }
}

.button-stroke {
  display: block;
  width: calc(100% - 40px);
  height: 20px;
  stroke: yellow;
  position: absolute;
  left: 20px;
  bottom: -10px;
  stroke-width: 4;
  
  &:nth-child(2) {
    stroke-dasharray: 650px;
    stroke-dashoffset: 650px;
    stroke: darken(#263238, 10%);
    stroke-width: 5;
    transition: stroke-dashoffset 800ms ease-out;
  }
}