Button by jamik-dev

#e8e8e8

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

.main_back {
  position: absolute;
  border-radius: 10px;
  transform: rotate(90deg);
  width: 11em;
  height: 11em;
  background: linear-gradient(270deg, #03a9f4, #cc39a4, #ffb5d2);
  z-index: -2;
  box-shadow: inset 0px 0px 180px 5px #ffffff;
}

.main {
  display: flex;
  flex-wrap: wrap;
  width: 14em;
  align-items: center;
  justify-content: center;
  z-index: -1;
  transition: transform 0.3s ease-in-out;
}

.card {
  width: 60px;
  height: 60px;
  border-top-left-radius: 10px;
  background: lightgrey;
  transition: 0.4s ease-in-out, 0.2s background-color ease-in-out,
    0.2s background-image ease-in-out;
  background: rgba(255, 255, 255, 0.596);
  backdrop-filter: blur(5px);
  border: 1px solid transparent;
  -webkit-backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card .instagram {
  opacity: 0;
  transition: 0.2s ease-in-out;
  fill: #cc39a4;
}

.card:nth-child(2) {
  border-radius: 0px;
}

.card:nth-child(2) .twitter {
  opacity: 0;
  transition: 0.2s ease-in-out;
  fill: #03a9f4;
}

.card:nth-child(3) {
  border-top-right-radius: 10px;
  border-top-left-radius: 0px;
}

.card:nth-child(3) .dribble {
  opacity: 0;
  transition: 0.2s ease-in-out;
  fill: #ffb5d2;
}

.card:nth-child(4) {
  border-radius: 0px;
}

.card:nth-child(4) .codepen {
  opacity: 0;
  transition: 0.2s ease-in-out;
  fill: black;
}

.card:nth-child(5) {
  border-radius: 0px;
}

.card:nth-child(5) .uiverse {
  position: absolute;
  margin-left: 0.2em;
  margin-top: 0.2em;
  opacity: 0;
  transition: 0.2s ease-in-out;
}

.card:nth-child(6) {
  border-radius: 0px;
}

.card:nth-child(6) .discord {
  opacity: 0;
  transition: 0.2s ease-in-out;
  fill: #8c9eff;
}

.card:nth-child(7) {
  border-bottom-left-radius: 10px;
  border-top-left-radius: 0px;
}

.card:nth-child(7) .github {
  opacity: 0;
  transition: 0.2s ease-in-out;
  fill: black;
}

.card:nth-child(8) {
  border-radius: 0px;
}

.card:nth-child(8) .telegram {
  opacity: 0;
  transition: 0.2s ease-in-out;
  fill: #29b6f6;
}

.card:nth-child(9) {
  border-bottom-right-radius: 10px;
  border-top-left-radius: 0px;
}

.card:nth-child(9) .reddit {
  opacity: 0;
  transition: 0.2s ease-in-out;
}

.main:hover {
  width: 14em;
  cursor: pointer;
  transform: rotate(-45deg);
}

.main:hover .main_back {
  opacity: 0;
}

.main:hover .card {
  margin: 0.2em;
  border-radius: 10px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.2);
}

.main:hover .card svg {
  transform: rotate(45deg);
}

.main:hover .card:nth-child(5) {
  border: transparent;
}

.main:hover .text {
  opacity: 0;
  z-index: -3;
}

.main:hover .instagram {
  opacity: 1;
}

.main:hover .twitter {
  opacity: 1;
}

.main:hover .dribble {
  opacity: 1;
}

.main:hover .codepen {
  opacity: 1;
}

.main:hover .uiverse {
  opacity: 1;
}

.main:hover .discord {
  opacity: 1;
}

.main:hover .github {
  opacity: 1;
}

.main:hover .telegram {
  opacity: 1;
}

.main:hover .reddit {
  opacity: 1;
}

.card:nth-child(1):hover {
  background-color: #cc39a4;
}

.card:nth-child(1):hover .instagram {
  fill: white;
}

.card:nth-child(2):hover {
  background-color: #03a9f4;
}

.card:nth-child(2):hover .twitter {
  fill: white;
}

.card:nth-child(3):hover {
  background-color: #ffb5d2;
}

.card:nth-child(3):hover .dribble {
  fill: white;
}

.card:nth-child(4):hover {
  background-color: #1e1f26;
}

.card:nth-child(4):hover .codepen {
  fill: white;
}

.card:nth-child(5):hover {
  animation: backgroundIMG 0.1s;
  animation-fill-mode: forwards;
}

.card:nth-child(5):hover .uiverse #paint0_linear_501_142 stop {
  stop-color: white;
}

.card:nth-child(5):hover .uiverse #paint1_linear_501_142 stop {
  stop-color: white;
}

.card:nth-child(5):hover .uiverse #paint2_linear_501_142 stop {
  stop-color: white;
}

@keyframes backgroundIMG {
  100% {
    background-image: linear-gradient(#bf66ff, #6248ff, #00ddeb);
  }
}

.card:nth-child(6):hover {
  background-color: #8c9eff;
}

.card:nth-child(6):hover .discord {
  fill: white;
}

.card:nth-child(7):hover {
  background-color: black;
}

.card:nth-child(7):hover .github {
  fill: white;
}

.card:nth-child(8):hover {
  background-color: #29b6f6;
}

.card:nth-child(8):hover .telegram > path:nth-of-type(1) {
  fill: white;
}

.card:nth-child(8):hover .telegram > path:nth-of-type(2) {
  fill: #29b6f6;
}

.card:nth-child(8):hover .telegram > path:nth-of-type(3) {
  fill: #29b6f6;
}

.card:nth-child(9):hover {
  background-color: rgb(255, 69, 0);
}

.card:nth-child(9) .reddit > g circle {
  fill: rgb(255, 69, 0);
}

.card:nth-child(9) .reddit > g path {
  fill: white;
}

.text {
  position: absolute;
  font-size: 0.7em;
  transition: 0.4s ease-in-out;
  color: black;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.33em;
  z-index: 3;
}

Toggle prefixes

233 views

Variation of abutton

Copy to Figma

233 views

Variation of abutton

Comments

MIT License

Copyright - 2024 Praashoo7 (Prashant) 
Copyright - 2024 jamik-dev (Jamshid Toshov) 

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.