JSFiddle - React, Tailwind, and code Playground

HTML

<button>
My button
</button>

CSS

button {
  padding:20px;
  position:relative;
  z-index:1;
  background:#2c3e50;
  color:white;
  border:none;
  outline:none;
  border-radius:50px;
}

button::after {
  position: absolute;
  content:'';
  inset:0;
  border-radius:50px;
  border:3px solid #9b59b6;
  z-index:-1;
  transition: 300ms ease;
}

button:hover::after {
  transform: translateX(10px)
             translateY(10px);
}