JSFiddle - React, Tailwind, and code Playground

HTML

<div class="btn-draw">
  <span></span>
  <a href="#">hai!</a>
</div>

SCSS

$total-animation-draw:    0.9s; //should be multiple of 3
$total-animation-undraw:  0.3s; //should be multiple of 3
$border-color:            pink;

.btn-draw {
  display: inline-block;
  position: relative;
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
}
.btn-draw::before {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  left: 0;
  height: 1px;
  background: $border-color;
  transform-origin: 0% 50%;
  transform: scaleX(0);
  transition: transform ($total-animation-undraw / 3) ease-in-out;
  -webkit-backface-visibility: hidden;
}
.btn-draw:hover::before {
  transition: transform ($total-animation-draw / 3) ease-in-out ($total-animation-draw * 2 / 3);
}
.btn-draw::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: $border-color;
  transform-origin: 50% 50%;
  transform: scaleX(0);
  transition: transform ($total-animation-undraw / 3) ease-in-out ($total-animation-undraw * 2 / 3);
  -webkit-backface-visibility: hidden;
}
.btn-draw:hover::after {
  transition: transform ($total-animation-draw / 3) ease-in-out;
}
.btn-draw > span {
  position: absolute;
  top: 0;
  right: 0;
  left: 50%;
  height: 1px;
  background: $border-color;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ($total-animation-undraw / 3) ease-in-out;
  -webkit-backface-visibility: hidden;
}
.btn-draw:hover > span {
  transition: transform ($total-animation-draw / 3) ease-in-out ($total-animation-draw * 2 / 3);
}
.btn-draw a {
  display: inline-block;
  text-decoration: none;
  color: #000;
  padding: 20px 15px;
  position: relative;
  font-size: 1rem;
  -webkit-backface-visibility: hidden;
}
.btn-draw a::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: pink;
  transform-origin: 50% 100%;
  transform: scaleY(0);
  transition: transform ($total-animation-undraw / 3) ease-in-out ($total-animation-undraw /...