1.button {
2  width: 45px;
3  height: 45px;
4  background-color: #3b5998;
5  border: none;
6  border-radius: 50%;
7  position: relative;
8  z-index: 1;
9  overflow: hidden;
10  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.185),
11 0px 3px 3px rgba(255, 255, 255, 0.178) inset,
12 0px -3px 3px rgba(0, 0, 0, 0.281) inset;
13  transition: all .3s;
14  display: flex;
15  align-items: center;
16  justify-content: center;
17  cursor: pointer;
18  padding-bottom: 3px;
19}
20
21.button::before {
22  background-color: transparent;
23  content: "f";
24  font-size: 1.6em;
25  font-weight: 700;
26  color: white;
27  z-index: 5;
28  transition: all .3s;
29  font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
30}
31
32.button::after {
33  content: "acebook";
34  background-color: transparent;
35  font-size: 0;
36  opacity: 0;
37  font-weight: 700;
38  color: white;
39  z-index: 5;
40  transition: all .3s;
41  transform: translateX(60px);
42  font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
43}
44
45.button:hover {
46  width: 160px;
47  border-radius: 30px;
48}
49
50.button:hover::after {
51  opacity: 1;
52  font-size: 1.6em;
53  transform: translateX(0px);
54}
55
56.button:hover .shine {
57  transform: translate(-70px ,10px);
58}