Button by Praashoo7

Posted by

@Praashoo7

Theme:

Light

#social#twitter#instagram#button#Discord#github#social media

#e8e8e8

4.3K views

Add prefixes

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}

.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;
}

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

.main:hover .card {
  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(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;
}

Variations

Get code

Praashoo7

Prashant

MIT License

Copyright - 2023 Praashoo7 (Prashant) 

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.