1.button {
2  font-family: Verdana, Geneva, Tahoma, sans-serif;
3  font-weight: 400;
4  background: #f2295b;
5  color: white;
6  padding: 0.35em 0;
7  font-size: 17px;
8  border: none;
9  border-radius: 0.7em;
10  letter-spacing: 0.08em;
11  position: relative;
12  display: flex;
13  align-content: center;
14  align-items: center;
15  overflow: hidden;
16  height: 2.7em;
17  padding-left: 3em;
18  padding-right: 0.5em;
19}
20
21.button .icon {
22  background: #fff;
23  margin-right: 1em;
24  height: 2.2em;
25  width: 2.2em;
26  border-radius: 0.5em;
27  position: absolute;
28  display: flex;
29  align-items: center;
30  justify-content: center;
31  left: 0.2em;
32  transition: all .7s;
33  gap: 10px;
34}
35
36.shere {
37  width: 1.3rem;
38  height: 1.3rem;
39}
40
41.button:hover .icon {
42  width: calc(100% - 0.6rem);
43}
44
45.button:hover .shere {
46  width: calc(100% - 0.6rem);
47  display: none;
48}
49
50.button .icon-shere {
51  color: #f2295b;
52  width: 1.5rem;
53  height: 1.5rem;
54  display: none;
55}
56
57.button:hover .icon .icon-shere {
58  display: flex;
59}