JSFiddle - React, Tailwind, and code Playground

HTML

<button>IMBUE</button>
<button>SUMPTUOUS</button>
<button>SCINTILLA</button>
<button>PROPINQUITY</button>
<button>HARBINGER</button>

CSS

body {
  padding:10px;
}
:focus {
  outline:none;
}
button {
  position:relative;
  font-size:18px;
  line-height:22px;
  cursor:pointer;
  padding:10px 20px;
  margin:10px;
  background:transparent;
  border:0;
}
button:before,
button:after {
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
	box-sizing:border-box;
}
button:before {
  border:4px solid red;
}
button:after {
  border:4px solid blue;
  opacity:0;
  transform:translate(10px,-10px);
  transition:opacity .3s, transform .3s;
}
button:hover:after {
  opacity:1;
  transform:translate(0,0);
}