JSFiddle - React, Tailwind, and code Playground

by Sergey Aleshin

HTML

<button class="btn">BUTTON</button>

CSS

.btn {
  position: relative;
  padding: 10px 30px;
  border: 1px solid #222222;
  background-color: transparent;
  
  -webkit-transition: color 0.1s ease-in;
     -moz-transition: color 0.1s ease-in;
      -ms-transition: color 0.1s ease-in;
       -o-transition: color 0.1s ease-in;
          transition: color 0.1s ease-in;
  
  overflow: hidden;
  color: #222222;
}
.btn:before {
  content: "";
  position: absolute;
  top: -500%;
  bottom: -500%;
  left: 51%;
  right: 51%;
  
  background-color: #222222;
  

  
  -webkit-transition: left 0.3s ease-out, right 0.3s ease-out, transform 0.3s ease-out;
     -moz-transition: left 0.3s ease-out, right 0.3s ease-out, transform 0.3s ease-out;
      -ms-transition: left 0.3s ease-out, right 0.3s ease-out, transform 0.3s ease-out;
       -o-transition: left 0.3s ease-out, right 0.3s ease-out, transform 0.3s ease-out;
          transition: left 0.3s ease-out, right 0.3s ease-out, transform 0.3s ease-out;
  
  z-index: -1;
}

.btn:hover {
  color: #FFFFFF;
}
.btn:hover:before{
  left: -20%;
  right: -20%;
  
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
}