1.button {
2  --main-focus: #2d8cf0;
3  --font-color: #323232;
4  --bg-color-sub: #dedede;
5  --bg-color: #eee;
6  --main-color: #323232;
7  position: relative;
8  width: 150px;
9  height: 40px;
10  cursor: pointer;
11  display: flex;
12  align-items: center;
13  border: 2px solid var(--main-color);
14  box-shadow: 4px 4px var(--main-color);
15  background-color: var(--bg-color);
16  border-radius: 10px;
17  overflow: hidden;
18}
19
20.button, .button__icon, .button__text {
21  transition: all 0.3s;
22}
23
24.button .button__text {
25  transform: translateX(22px);
26  color: var(--font-color);
27  font-weight: 600;
28}
29
30.button .button__icon {
31  position: absolute;
32  transform: translateX(109px);
33  height: 100%;
34  width: 39px;
35  background-color: var(--bg-color-sub);
36  display: flex;
37  align-items: center;
38  justify-content: center;
39}
40
41.button .svg {
42  width: 20px;
43  fill: var(--main-color);
44}
45
46.button:hover {
47  background: var(--bg-color);
48}
49
50.button:hover .button__text {
51  color: transparent;
52}
53
54.button:hover .button__icon {
55  width: 148px;
56  transform: translateX(0);
57}
58
59.button:active {
60  transform: translate(3px, 3px);
61  box-shadow: 0px 0px var(--main-color);
62}