1.btn {
2  color: purple;
3  text-transform: uppercase;
4  text-decoration: none;
5  border: 2px solid purple;
6  padding: 10px 20px;
7  font-size: 17px;
8  font-weight: bold;
9  background: transparent;
10  position: relative;
11  transition: all 1s;
12  overflow: hidden;
13}
14
15.btn:hover {
16  color: white;
17}
18
19.btn::before {
20  content: '';
21  position: absolute;
22  height: 100%;
23  width: 0%;
24  top: 0;
25  left: -40px;
26  transform: skewX(45deg);
27  background-color: purple;
28  z-index: -1;
29  transition: all 1s;
30}
31
32.btn:hover::before {
33  width: 160%;
34}