.drawn {
  -webkit-appearance:none;
  -moz-appearance:none;
  animation:show-text 3s linear;
  background-color:#fff;
  border:solid 2px #08c;
  color:#08c;
  padding:.5em 1em;
  position:relative;
  &:before {
    animation:top-right 1s linear;
    background-color:#fff;
    bottom:-2px;
    content:"";
    height:0;
    right:-2px;
    position:absolute;
    width:0;
  }
  &:after {
    animation:bottom-left 2s linear;
    background-color:#fff;
    content:"";
    height:0;
    left:-2px;
    position:absolute;
    top:0;
    width:0;
  }
  &:focus {
    outline:none;
  }
}

@keyframes top-right {
  0% {
    height:calc(100% + 4px);
    width:calc(100% + 4px);
  }
  50% {    
    height:calc(100% + 4px);
    width:4px;
  }
  99.99% {
    height:0;
  }
  100% {
    width:0;
  }
}

@keyframes bottom-left {
  0%, 50% {
    height:calc(100% + 2px);
    width:calc(100% + 2px);
  }
  75% {
    height:calc(100% + 2px);
    width:4px;
  }
  99.99% {
    height:0;
  }
  100% {
    width:0
  }
}

@keyframes show-text {
  0%, 66.67% {
    color:#fff;
  }
  100% {
    color:#08c;
  }
}

body {
  align-items:center;
  display:flex;
  height:100vh;
  justify-content:center;
  margin:0;
}

function drawButton() {
  document.body.innerHTML = '';
  const btn = document.createElement('button');
  btn.setAttribute('type', 'button');
  btn.className = 'drawn';
  btn.textContent = 'Click to redraw';
  btn.addEventListener('click', drawButton);
  document.body.appendChild(btn);
}

drawButton();