1button {
2  background: #fff;
3  border: none;
4  padding: 10px 20px;
5  display: inline-block;
6  font-size: 15px;
7  font-weight: 600;
8  width: 120px;
9  text-transform: uppercase;
10  cursor: pointer;
11  transform: skew(-21deg);
12}
13
14span {
15  display: inline-block;
16  transform: skew(21deg);
17}
18
19button::before {
20  content: '';
21  position: absolute;
22  top: 0;
23  bottom: 0;
24  right: 100%;
25  left: 0;
26  background: rgb(20, 20, 20);
27  opacity: 0;
28  z-index: -1;
29  transition: all 0.5s;
30}
31
32button:hover {
33  color: #fff;
34}
35
36button:hover::before {
37  left: 0;
38  right: 0;
39  opacity: 1;
40}