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 #cc0000;
9  background-color: #e50000;
10  overflow: hidden;
11}
12
13.button, .button__icon, .button__text {
14  transition: all 0.3s;
15}
16
17.button .button__text {
18  transform: translateX(35px);
19  color: #fff;
20  font-weight: 600;
21}
22
23.button .button__icon {
24  position: absolute;
25  transform: translateX(109px);
26  height: 100%;
27  width: 39px;
28  background-color: #cc0000;
29  display: flex;
30  align-items: center;
31  justify-content: center;
32}
33
34.button .svg {
35  width: 20px;
36}
37
38.button:hover {
39  background: #cc0000;
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: #b20000;
53}
54
55.button:active {
56  border: 1px solid #b20000;
57}