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