Button by amirhoseinman2019

1.main_back {
2  position: absolute;
3  border-radius: 10px;
4  transform: rotate(90deg);
5  width: 11em;
6  height: 11em;
7  background: linear-gradient(270deg, #03a9f4, #cc39a4, #ffb5d2);
8  z-index: -2;
9  box-shadow: inset 0px 0px 180px 5px #ffffff;
10}
11
12.main {
13  display: flex;
14  flex-wrap: wrap;
15  width: 14em;
16  align-items: center;
17  justify-content: center;
18  z-index: -1;
19}
20
21.card {
22  width: 60px;
23  height: 60px;
24  border-top-left-radius: 10px;
25  background: lightgrey;
26  transition: .4s ease-in-out, .2s background-color ease-in-out, .2s background-image ease-in-out;
27  background: rgba(255, 255, 255, 0.596);
28  backdrop-filter: blur(5px);
29  border: 1px solid transparent;
30  -webkit-backdrop-filter: blur(5px);
31  display: flex;
32  align-items: center;
33  justify-content: center;
34}
35
36.card .instagram {
37  opacity: 0;
38  transition: .2s ease-in-out;
39  fill: #cc39a4;
40}
41
42.card:nth-child(2) {
43  border-radius: 0px;
44}
45
46.card:nth-child(2) .twitter {
47  opacity: 0;
48  transition: .2s ease-in-out;
49  fill: #03A9F4;
50}
51
52.card:nth-child(3) {
53  border-top-right-radius: 10px;
54  border-top-left-radius: 0px;
55}
56
57.card:nth-child(3) .dribble {
58  opacity: 0;
59  transition: .2s ease-in-out;
60  fill: #ffb5d2;
61}
62
63.card:nth-child(4) {
64  border-radius: 0px;
65}
66
67.card:nth-child(4) .codepen {
68  opacity: 0;
69  transition: .2s ease-in-out;
70  fill: black;
71}
72
73.card:nth-child(5) {
74  border-radius: 0px;
75}
76
77.card:nth-child(5) .uiverse {
78  position: absolute;
79  margin-left: 0.2em;
80  margin-top: 0.2em;
81  opacity: 0;
82  transition: .2s ease-in-out;
83}
84
85.card:nth-child(6) {
86  border-radius: 0px;
87}
88
89.card:nth-child(6) .discord {
90  opacity: 0;
91  transition: .2s ease-in-out;
92  fill: #8c9eff;
93}
94
95.card:nth-child(7) {
96  border-bottom-left-radius: 10px;
97  border-top-left-radius: 0px;
98}
99
100.card:nth-child(7) .github {
101  opacity: 0;
102  transition: .2s ease-in-out;
103  fill: black;
104}
105
106.card:nth-child(8) {
107  border-radius: 0px;
108}
109
110.card:nth-child(8) .telegram {
111  opacity: 0;
112  transition: .2s ease-in-out;
113  fill: #29b6f6;
114}
115
116.card:nth-child(9) {
117  border-bottom-right-radius: 10px;
118  border-top-left-radius: 0px;
119}
120
121.card:nth-child(9) .reddit {
122  opacity: 0;
123  transition: .2s ease-in-out;
124}
125
126.main:hover {
127  width: 14em;
128  cursor: pointer;
129}
130
131.main:hover .main_back {
132  opacity: 0;
133}
134
135.main:hover .card {
136  margin: .2em;
137  border-radius: 10px;
138  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
139  border: 1px solid rgba(255, 255, 255, 0.3);
140  background: rgba(255, 255, 255, 0.2);
141}
142
143.main:hover .card:nth-child(5) {
144  border: transparent;
145}
146
147.main:hover .text {
148  opacity: 0;
149  z-index: -3;
150}
151
152.main:hover .instagram {
153  opacity: 1;
154}
155
156.main:hover .twitter {
157  opacity: 1;
158}
159
160.main:hover .dribble {
161  opacity: 1;
162}
163
164.main:hover .codepen {
165  opacity: 1;
166}
167
168.main:hover .uiverse {
169  opacity: 1;
170}
171
172.main:hover .discord {
173  opacity: 1;
174}
175
176.main:hover .github {
177  opacity: 1;
178}
179
180.main:hover .telegram {
181  opacity: 1;
182}
183
184.main:hover .reddit {
185  opacity: 1;
186}
187
188.card:nth-child(1):hover {
189  background-color: #cc39a4;
190}
191
192.card:nth-child(1):hover .instagram {
193  fill: white;
194}
195
196.card:nth-child(2):hover {
197  background-color: #03A9F4;
198}
199
200.card:nth-child(2):hover .twitter {
201  fill: white;
202}
203
204.card:nth-child(3):hover {
205  background-color: #ffb5d2;
206}
207
208.card:nth-child(3):hover .dribble {
209  fill: white;
210}
211
212.card:nth-child(4):hover {
213  background-color: #1E1F26;
214}
215
216.card:nth-child(4):hover .codepen {
217  fill: white;
218}
219
220.card:nth-child(5):hover {
221  animation: backgroundIMG .1s;
222  animation-fill-mode: forwards;
223}
224
225.card:nth-child(5):hover .uiverse #paint0_linear_501_142 stop {
226  stop-color: white;
227}
228
229.card:nth-child(5):hover .uiverse #paint1_linear_501_142 stop {
230  stop-color: white;
231}
232
233.card:nth-child(5):hover .uiverse #paint2_linear_501_142 stop {
234  stop-color: white;
235}
236
237@keyframes backgroundIMG {
238  100% {
239    background-image: linear-gradient(#BF66FF,#6248FF,#00DDEB);
240  }
241}
242
243.card:nth-child(6):hover {
244  background-color: #8c9eff;
245}
246
247.card:nth-child(6):hover .discord {
248  fill: white;
249}
250
251.card:nth-child(7):hover {
252  background-color: black;
253}
254
255.card:nth-child(7):hover .github {
256  fill: white;
257}
258
259.card:nth-child(8):hover {
260  background-color: #29b6f6;
261}
262
263.card:nth-child(8):hover .telegram > path:nth-of-type(1) {
264  fill: white;
265}
266
267.card:nth-child(8):hover .telegram > path:nth-of-type(2) {
268  fill: #29b6f6;
269}
270
271.card:nth-child(8):hover .telegram > path:nth-of-type(3) {
272  fill: #29b6f6;
273}
274
275.card:nth-child(9):hover {
276  background-color: rgb(255,69,0);
277}
278
279.card:nth-child(9) .reddit > g circle {
280  fill: rgb(255,69,0);
281}
282
283.card:nth-child(9) .reddit > g path {
284  fill: white;
285}
286
287.text {
288  position: absolute;
289  font-size: 0.7em;
290  transition: .4s ease-in-out;
291  color: black;
292  text-align: center;
293  font-weight: bold;
294  letter-spacing: 0.33em;
295  z-index: 3;
296}