Button by andrew-demchenk0

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 #0078E8;
9  background-color: #0082FC;
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(30px);
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: #0078E8;
29  display: flex;
30  align-items: center;
31  justify-content: center;
32}
33
34.button .svg {
35  width: 20px;
36  fill: #fff;
37}
38
39.button:hover {
40  background: #0078E8;
41}
42
43.button:hover .button__text {
44  color: transparent;
45}
46
47.button:hover .button__icon {
48  width: 148px;
49  transform: translateX(0);
50}
51
52.button:active .button__icon {
53  background-color: #006cd0;
54}
55
56.button:active {
57  border: 1px solid #006cd0;
58}