JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<button><p>ЛЕБЕДЬ,</p></button>
<button><p>РАК</p></button>
<button><p>И</p></button>
<button><p>ЩУКА</p></button>
</body>

CSS

body {
  background: #435a6b;
  padding:10px;
  }
p {  
  color: white;
}
:focus {
  outline:none;
}
button {
  position:relative;
  font-size:18px;
  line-height:22px;
  cursor:pointer;
  padding:10px 20px;
  margin:10px;
  background: #435a6b;
  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 #354856;
}
button:after {
  border:4px solid white;
  opacity:0;
  transform:translate(10px,-10px);
  transition:opacity .3s, transform .3s;
}
button:hover:after {
  opacity:1;
  transform:translate(0,0);
}