/* HTML */
<a href="#"><button class="button-30"><span>Transform</span></button>
</a>

/* CSS */
.button-30 {
  position: relative;
  display: inline-block;
  
  overflow: hidden;    
  transition: .3s;
  padding: 15px 30px;
  border: solid 2px black;
  border-radius: 5px;
  font: bold 1em 'Bree Serif';
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 1px;
  color: rgb(0, 0, 0);
  background-color: #ffff00;
}

.button-30:before {
  content: "";
  position: absolute;
  padding: 0.1em;
  margin: 0 1em 0 0;
  top: -3%;
  right: 100%; /* From the right, a hundred to the left */ 
  height: 100%;
  width: 120%; /*Needs a bit more because it's skewed */ 
  background-color: crimson;
  transform: skewX(-30deg);
  transition: inherit;

}

.button-30:hover:before {
  right: -20%;
}

/* Make the text readable on hover */ 

.button-30:hover {
  color: #eaeaea;
}

.button-30 span {
  position: relative;
}