JSFiddle - React, Tailwind, and code Playground

HTML

<a role='button'>Button</a>

CSS

body {
  text-align: center;
}

a {
  position: relative;
  margin-top: 2rem;
  display: inline-block;
    cursor: pointer;
}

a::before {
  position: absolute;
  width: calc(100% + 1.8rem);
  height: calc(100% + 0.8rem);
  background: #4ae038;
  top: -0.4rem;
  left: -1rem;
  content: '';
  z-index: -1;
  border: 2px solid black;
  transform: skew(-30deg);
  transition: 300ms background-color ease-in-out;
}

a:hover::before {
  background: green;
}