Border Draw on Hover

A border that draws itself around the button on hover, starting from the top-left and completing at the bottom-left. Pure CSS, no JavaScript.

.btn-draw {
  padding: 12px 24px;
  border: none;
  background: transparent;
  color: #8b5cf6;
  position: relative;
  cursor: pointer;
}
.btn-draw::before, .btn-draw::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 2px solid transparent;
  box-sizing: border-box;
}
.btn-draw::before { top: 0; left: 0; }
.btn-draw::after { bottom: 0; right: 0; }
.btn-draw:hover::before {
  width: 100%; height: 100%;
  border-top-color: #8b5cf6;
  border-right-color: #8b5cf6;
  transition: width 0.15s ease, height 0.15s ease 0.15s;
}
.btn-draw:hover::after {
  width: 100%; height: 100%;
  border-bottom-color: #8b5cf6;
  border-left-color: #8b5cf6;
  transition: width 0.15s ease 0.3s, height 0.15s ease 0.45s;
}