<button class="btn">
  <span>button with text</span>
  <svg class="btn-stroke" viewBox="0 0 100 100" preserveAspectRatio="none">
    <defs>
      <linearGradient id="gradient" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0" stop-color="#FC466B"/>
        <stop offset="1" stop-color="#3F5EFB"/>
      </linearGradient>
    </defs>
    
    <path class="btn-path" d="M 0 50, L 0 0, 100 0, 100 100, 0 100 Z"/>
    <path class="btn-path-anim" d="M 0 50, L 0 0, 100 0, 100 100, 0 100 Z"/>
  </svg>
</button>

.btn {
  position: relative;
  font-size: 2rem;
  padding: 0.25em 0.5em;
  z-index: 0;
  border: none;
  background-color: transparent;
  --stroke-width: 4px;
}

.btn:hover .btn-path-anim {
  stroke-dashoffset: 0;
}

.btn::before {
  content: "";
  position: absolute;
  background-color: #fff;
  top: var(--stroke-width);
  bottom: var(--stroke-width);
  left: var(--stroke-width);
  right: var(--stroke-width);
  z-index: -1;
}

.btn-stroke {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

.btn-path-anim, .btn-path {
  fill: none;
  stroke-width: 25px;
}

.btn-path-anim {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  stroke: url(#gradient);
  transition: stroke-dashoffset 1s linear;
}



.btn-path {
  stroke: #ccc;
}