JSFiddle - React, Tailwind, and code Playground

HTML

<button>HOVER ME!!</button>

CSS

button{
  font-weight: bold;
  color: white;
  display: block;
  padding: 14px 28px;
  border: none;
  background: transparent;
  outline: none;
  position:relative;
  overflow: hidden;
  cursor: pointer;
}

button:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f44336;
  z-index: -1;
  
}

button:after{
  content: '';
  position: absolute;
  top: -50%;
  right: -10px;
  width: 25%;
  height: 200%;
  background: #f5564a;
  z-index: -1;
  transform: rotate(-20deg);
  transition: all 0.25s ease-in-out;
  
}

button:hover:after{
  width: 50%;
}