1.btn {
2  width: 120px;
3  height: 40px;
4  border: none;
5  position: relative;
6  transition: .2s linear;
7  display: flex;
8  align-items: center;
9  justify-content: center;
10  letter-spacing: 2px;
11  text-transform: uppercase;
12}
13
14.btn > .icon {
15  display: none;
16  transition: .2s linear;
17}
18
19.btn,
20.socials {
21  border-radius: 20px;
22  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.281));
23}
24
25.socials {
26  display: flex;
27  list-style: none;
28  width: 120px;
29  height: 100%;
30  position: absolute;
31  top: 0;
32  left: 50%;
33  transform: translateX(-50%);
34  align-items: center;
35  justify-content: space-around;
36  transition: .2s linear;
37  opacity: 0;
38  visibility: hidden;
39}
40
41.btn:focus > span {
42  display: none;
43}
44
45.btn:focus > .icon {
46  display: flex;
47}
48
49.btn:focus {
50  width: 40px;
51}
52
53.btn:focus > .socials {
54  opacity: 1;
55  visibility: visible;
56  top: -120%;
57}
58
59