JSFiddle - React, Tailwind, and code Playground

HTML

<div class="adapt_button">
            <span></span>
          </div>

CSS

.adapt_button {
  width: 96px;
  height: 96px;
  position: relative;
  overflow: hidden;
}
.adapt_button:hover {
  cursor: pointer;
}
.adapt_button:hover span {
  background-color: transparent;
}
.adapt_button:hover span:after {
  top: 0;
  transform: rotate(45deg);
}
.adapt_button:hover span:before {
  bottom: 0;
  transform: rotate(-45deg);
}
.adapt_button span {
  display: block;
  position: absolute;
  height: 8px;
  width: 100%;
  background-color: blue;
  border-radius: 3px;
  top: 44px;
  left: 0;
  right: 18px;
}
.adapt_button span:after, .adapt_button span:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 8px;
  background-color: blue;
  left: 0;
  border-radius: 3px;
  transition-delay: 0s, 0.5s;
}
.adapt_button span:after {
  top: -20px;
  transition-property: top, transform;
  transition-duration: 0.5s, 0.5s;
}
.adapt_button span:before {
  bottom: -20px;
  transition-property: bottom, transform;
}