Button Transition With Background-Position

Left

Angle

Close

`
button{
  color:maroon;
  border:1px solid maroon;
  font-size:50px;
  padding:20px 40px;
  border-radius:15px;
  transition-duration:0.5s;
  position:relative;
  overflow:hidden;
}
button:hover{
  color:#fff;
}
.left{
  background:-webkit-linear-gradient(left, maroon 50%, transparent 50%);
  background-size:200% 100%;
  background-position:100% 0%;

}
.left:hover{
  background-position:0% 0%;
}

.angle{
  background:-webkit-linear-gradient(225deg, maroon 50%, transparent 50%);
  background-size:250% 100%;
}
.angle:hover{
  background-position:100% 0%;
}

.close{
  background:-webkit-linear-gradient(left, transparent 50%, maroon 50%);
  background-size:200% 100%;
}
.close:after{
  content:"";
  position:absolute;
  z-index: -1;
  top:0;
  left:0;
  right: 0;
  bottom: 0;
  background:-webkit-linear-gradient(left, maroon 50%, transparent 50%);
  background-size:200% 100%;
  background-position:100% 0%;
  transition-duration:.5s;
}
.close:hover{
  background-position:50% 0%;
}
.close:hover:after{
  background-position:50% 0%;
}
}

`