1.btn {
2  width: 150px;
3  height: 50px;
4  border: 1px solid #333;
5  font-size: 20px;
6  cursor: pointer;
7  -webkit-tap-highlight-color: transparent;
8  display: flex;
9  align-items: center;
10  justify-content: center;
11  position: relative;
12  z-index: 0;
13  transition: 1s;
14  color: #000;
15  font-family: sans-serif;
16}
17
18.btn::before,
19.btn::after {
20  position: absolute;
21  background: #e8e8e8;
22  z-index: -1;
23  transition: 1s;
24  content: "";
25}
26
27.btn::before {
28  height: 50px;
29  width: 130px;
30}
31
32.btn::after {
33  width: 150px;
34  height: 30px;
35}
36
37.noselect {
38  -webkit-touch-callout: none;
39  -webkit-user-select: none;
40  -khtml-user-select: none;
41  -moz-user-select: none;
42  -ms-user-select: none;
43  user-select: none;
44}
45
46.btn:hover::before {
47  width: 0px;
48  background: #e8e8e8;
49}
50
51.btn:hover::after {
52  height: 0px;
53  background: #fff;
54}
55
56.btn:hover {
57  background: #fff;
58}