Button by artginzburg

#212121

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

.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;
  transition: opacity 1s, border-radius .3s;
}

.main {
  display: flex;
  flex-wrap: wrap;
  width: 14em;
  align-items: center;
  justify-content: center;
  z-index: -1;
}

.card {
  width: 60px;
  height: 60px;
  border-top-left-radius: 10px;
  background: lightgrey;
  transition: .3s ease, .15s background-color, .15s 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: .2s ease-in-out;
  fill: #cc39a4;
}

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

.card:nth-child(2) .twitter {
  opacity: 0;
  transition: .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: .2s ease-in-out;
  fill: #ffb5d2;
}

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

.card:nth-child(4) .codepen {
  opacity: 0;
  transition: .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: .2s ease-in-out;
}

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

.card:nth-child(6) .discord {
  opacity: 0;
  transition: .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: .2s ease-in-out;
  fill: black;
}

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

.card:nth-child(8) .telegram {
  opacity: 0;
  transition: .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: .2s ease-in-out;
}

.main:hover {
  width: 14em;
  cursor: pointer;
}

.main:hover .main_back {
  opacity: 0;
  border-radius: 30px;
}

.main:hover .card {
  --hover-edge-radius: 100%;
  --hover-edge-offset: 10%;
  margin: .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:nth-child(1) {
  border-top-left-radius: var(--hover-edge-radius);
}

.main:hover .card:nth-child(3) {
  border-top-right-radius: var(--hover-edge-radius);
}

.main:hover .card:nth-child(7) {
  border-bottom-left-radius: var(--hover-edge-radius);
}

.main:hover .card:nth-child(9) {
  border-bottom-right-radius: var(--hover-edge-radius);
}

.main:hover .card:nth-child(1) svg {
  margin-top: var(--hover-edge-offset);
  margin-left: var(--hover-edge-offset);
}

.main:hover .card:nth-child(3) svg {
  margin-top: var(--hover-edge-offset);
  margin-right: var(--hover-edge-offset);
}

.main:hover .card:nth-child(7) svg {
  margin-bottom: var(--hover-edge-offset);
  margin-left: var(--hover-edge-offset);
}

.main:hover .card:nth-child(9) svg {
  margin-bottom: var(--hover-edge-offset);
  margin-right: var(--hover-edge-offset);
}

.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 .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: .4s ease-in-out;
  color: black;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.33em;
  z-index: 3;
}

Toggle prefixes

2.5K views

Variation of abutton

Copy to Figma

2.5K views

Variation of abutton

Comments

MIT License

Copyright - 2024 Praashoo7 
Copyright - 2024 Praashoo7 (Prashant) 
Copyright - 2024 artginzburg (Arthur Ginzburg) 

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.