button slanted slide on hover

1div {
2  position: relative;
3  display: inline-block;
4  padding: 15px 70px;
5  border: 5px solid #B17461;
6  color: #B17461;
7  font-size: 30px;
8  font-family: arial;
9  transition: color .5s;
10  overflow:hidden;
11}
12div:before {
13  content: '';
14  position: absolute;
15  top: 0; left: 0;
16  width: 130%; height: 100%;
17  background: #B17461;
18  z-index: -1;
19  transform-origin:0 0 ;
20  transform:translateX(-100%) skewX(-45deg);
21  transition: transform .5s;
22}
23div:hover {
24  color: #fff;
25}
26div:hover:before {
27  transform: translateX(0) skewX(-45deg);
28}