Button by svqantonio

1.main {
2  display: flex;
3  flex-direction: column;
4  gap: 0.5em;
5}
6
7.up {
8  display: flex;
9  flex-direction: row;
10  gap: 0.5em;
11}
12
13.down {
14  display: flex;
15  flex-direction: row;
16  gap: 0.5em;
17}
18
19.card1 {
20  width: 90px;
21  height: 90px;
22  outline: none;
23  border: none;
24  background: white;
25  border-radius: 90px 5px 5px 5px;
26  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
27  transition: .2s ease-in-out;
28}
29
30.instagram {
31  margin-top: 1.5em;
32  margin-left: 1.2em;
33  fill: #cc39a4;
34}
35
36.card2 {
37  width: 90px;
38  height: 90px;
39  outline: none;
40  border: none;
41  background: white;
42  border-radius: 5px 90px 5px 5px;
43  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
44  transition: .2s ease-in-out;
45}
46
47.facebook {
48  margin-top: 1.5em;
49  margin-left: -.9em;
50  fill: #03A9F4;
51}
52
53.card3 {
54  width: 90px;
55  height: 90px;
56  outline: none;
57  border: none;
58  background: white;
59  border-radius: 5px 5px 5px 90px;
60  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
61  transition: .2s ease-in-out;
62}
63
64.whatsapp {
65  margin-top: -.6em;
66  margin-left: 1.2em;
67  fill: #00ff00;
68}
69
70.card4 {
71  width: 90px;
72  height: 90px;
73  outline: none;
74  border: none;
75  background: white;
76  border-radius: 5px 5px 90px 5px;
77  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
78  transition: .2s ease-in-out;
79}
80
81.gmail {
82  margin-top: -.9em;
83  margin-left: -1.2em;
84  fill: #f14336;
85}
86
87.card1:hover {
88  cursor: pointer;
89  scale: 1.1;
90  background-color: #cc39a4;
91}
92
93.card1:hover .instagram {
94  fill: white;
95}
96
97.card2:hover {
98  cursor: pointer;
99  scale: 1.1;
100  background-color: #1877f2;
101}
102
103.card2:hover .facebook {
104  fill: white;
105}
106
107.card3:hover {
108  cursor: pointer;
109  scale: 1.1;
110  background-color: #00ff00;
111}
112
113.card3:hover .whatsapp {
114  fill: white;
115}
116
117.card4:hover {
118  cursor: pointer;
119  scale: 1.1;
120  background-color: #FF0004;
121}
122
123.card4:hover .gmail {
124  fill: white;
125}