Button by Lakshay-art

This button was created for Button Mastery

#e8e8e8

1.button {
2  cursor: pointer;
3  width: 335px;
4  height: 110px;
5  border-radius: 30px;
6  border: 1px solid #e5c3e6;
7  position: relative;
8  overflow: hidden;
9  filter: brightness(0.9) contrast(1.2)
10    drop-shadow(0px 20px 16px rgba(0, 0, 0, 0.212));
11}
12#backdrop {
13  height: 110px;
14  width: 335px;
15  overflow: hidden;
16  border-radius: 30px;
17
18  background-color: rgb(255 255 255 / 5%);
19  backdrop-filter: blur(10px);
20}
21
22#backdrop2 {
23  height: 110px;
24  width: 335px;
25  overflow: hidden;
26  border-radius: 30px;
27
28  background-color: rgb(255 255 255 / 5%);
29  backdrop-filter: blur(6px);
30}
31.pink {
32  position: absolute;
33  background-color: #f05ee7;
34  filter: blur(6px);
35  border-radius: 50%;
36}
37.pinki {
38  position: absolute;
39  background-color: #ba63d9;
40  /* filter: blur(6px); */
41  border-radius: 50%;
42}
43.orange {
44  position: absolute;
45  background-color: #f37130;
46  filter: blur(6px);
47  border-radius: 50%;
48}
49.orangei {
50  position: absolute;
51  background-color: #ff4600;
52  filter: blur(3px);
53  border-radius: 50%;
54}
55.white {
56  position: absolute;
57  background-color: white;
58  /* filter: blur(5px); */
59  border-radius: 25px;
60}
61
62#pink1 {
63  top: -10px;
64  left: -10px;
65  height: 50px;
66  width: 150px;
67}
68
69#pink2 {
70  bottom: -10px;
71  left: -10px;
72  height: 50px;
73  width: 140px;
74}
75#pink3 {
76  top: -5px;
77  right: -10px;
78  height: 50px;
79  width: 120px;
80}
81
82#pink4 {
83  bottom: -5px;
84  right: -10px;
85  height: 50px;
86  width: 140px;
87}
88
89#pink5 {
90  top: 25px;
91  left: -20px;
92  height: 70px;
93  width: 120px;
94  opacity: 0.7;
95}
96#pink6 {
97  top: 25px;
98  right: -20px;
99  height: 70px;
100  width: 120px;
101  opacity: 0.7;
102}
103#pink7 {
104  top: 0px;
105  left: -5px;
106  height: 30px;
107  width: 30px;
108  /* opacity: 0.7; */
109}
110#pink8 {
111  bottom: -20px;
112  left: -20px;
113  height: 110px;
114  width: 50px;
115  /* opacity: 0.7; */
116}
117#pink9 {
118  top: 0px;
119  right: -20px;
120  height: 60px;
121  width: 50px;
122  opacity: 0.7;
123}
124#pink10 {
125  bottom: 0px;
126  right: -20px;
127  height: 20px;
128  width: 50px;
129  opacity: 0.7;
130}
131#pink11 {
132  top: 25px;
133  right: 40px;
134  height: 30px;
135  width: 70px;
136  opacity: 0.5;
137}
138#orange1 {
139  top: -15px;
140  left: 120px;
141  height: 50px;
142  width: 130px;
143}
144
145#orange2 {
146  top: 30px;
147  left: 90px;
148  height: 50px;
149  width: 170px;
150  opacity: 0.7;
151}
152#orange3 {
153  top: 80px;
154  left: 120px;
155  height: 50px;
156  width: 120px;
157}
158
159#orange5 {
160  top: 10px;
161  left: 160px;
162  height: 30px;
163  width: 30px;
164}
165#orange6 {
166  top: 15px;
167  left: 135px;
168  height: 20px;
169  width: 20px;
170}
171#orange7 {
172  top: 15px;
173  left: 115px;
174  height: 20px;
175  width: 15px;
176}
177#orange8 {
178  bottom: 15px;
179  left: 135px;
180  height: 25px;
181  width: 20px;
182}
183#orange9 {
184  bottom: 15px;
185  left: 195px;
186  height: 20px;
187  width: 15px;
188}
189
190#orange10 {
191  bottom: 0px;
192  left: 275px;
193  height: 25px;
194  width: 15px;
195}
196#orange11 {
197  bottom: 55px;
198  left: 240px;
199  height: 50px;
200  width: 35px;
201  opacity: 0.8;
202}
203
204#white1 {
205  top: 8px;
206  left: 20px;
207  height: 10px;
208  width: 130px;
209}
210
211#white2 {
212  top: 35px;
213  left: 40px;
214  height: 35px;
215  width: 70px;
216}
217#white3 {
218  top: 8px;
219  left: 200px;
220  height: 10px;
221  width: 70px;
222}
223#white4 {
224  top: 35px;
225  left: 205px;
226  height: 35px;
227  width: 120px;
228}
229#white5 {
230  top: 30px;
231  right: 9px;
232  height: 65px;
233  width: 30px;
234}
235#white6 {
236  bottom: 15px;
237  left: 40px;
238  height: 10px;
239  width: 70px;
240}
241#white7 {
242  bottom: 15px;
243  right: 40px;
244  height: 10px;
245  width: 70px;
246}
247#white8 {
248  top: 15px;
249  right: 20px;
250  height: 50px;
251  width: 30px;
252}
253#white9 {
254  top: 30px;
255  left: 0px;
256  height: 50px;
257  width: 5px;
258  opacity: 0.6;
259}
260#white10 {
261  top: 30px;
262  right: 0px;
263  height: 50px;
264  width: 3px;
265  opacity: 0.9;
266}
267#white11 {
268  top: 6px;
269  left: 25px;
270  height: 15px;
271  width: 100px;
272  background-color: transparent;
273  border-bottom: 7px solid white;
274  border-left: 7px solid white;
275  filter: blur(4px);
276}
277#white12 {
278  top: 15px;
279  left: 8px;
280  height: 25px;
281  width: 15px;
282  background-color: transparent;
283  border-top: 3px solid white;
284  border-right: 3px solid #fff9;
285  filter: blur(2px);
286}
287#white13 {
288  bottom: 6px;
289  right: 9px;
290  height: 20px;
291  width: 20px;
292  background-color: transparent;
293  border-right: 7px solid white;
294  border-top: 7px solid white;
295  filter: blur(3px);
296}
297#white14 {
298  bottom: 28px;
299  right: 3px;
300  height: 20px;
301  width: 20px;
302  background-color: transparent;
303  border-left: 7px solid white;
304  border-bottom: 7px solid white;
305  filter: blur(2px);
306}
307#white15 {
308  top: 10px;
309  right: 13px;
310  height: 10px;
311  width: 10px;
312  filter: blur(3px);
313}
314
315#white16 {
316  top: 28px;
317  left: 28px;
318  height: 12px;
319  width: 15px;
320  filter: blur(3px);
321}
322#whiteOverlay {
323  position: absolute;
324  /* background-color: #ffffff44; */
325  background: linear-gradient(
326    180deg,
327    #ffffff44 92px,
328    #ffffff11 96px,
329    #ffffff66 100px
330  );
331  top: 5px;
332  left: 5px;
333  width: 324px;
334  height: 100px;
335  border-radius: 26px;
336  /* filter: blur(1px); */
337}
338#whiteBorder {
339  position: absolute;
340  /* background-color: #ffffff44; */
341  /* background: linear-gradient(180deg,#ffffff44 95px,#ffffff11 98px,#ffffff44 100px); */
342  top: 15px;
343  left: 20px;
344  width: 295px;
345  height: 74px;
346  border-radius: 15px;
347  border: 5px solid #ffffff66;
348  filter: blur(2px);
349}
350#whiteBorder2 {
351  position: absolute;
352  /* background-color: #ffffff44; */
353  /* background: linear-gradient(180deg,#ffffff44 95px,#ffffff11 98px,#ffffff44 100px); */
354  top: 15px;
355  left: 20px;
356  width: 295px;
357  height: 74px;
358  border-radius: 15px;
359  border: 2px solid #ffffff44;
360  filter: blur(1px);
361}
362#text {
363  height: 110px;
364  width: 335px;
365  position: absolute;
366  top: 40px;
367  font-size: 25px;
368  font-weight: 600;
369  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
370    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
371}
372#bg {
373  position: absolute;
374  inset: 0;
375  background-image: repeating-linear-gradient(
376    -155deg,
377    rgba(255, 255, 255, 0.15),
378    rgba(255, 255, 255, 0.15) 50px,
379    rgba(0, 0, 0, 0.15) 100px,
380    rgba(225, 225, 225, 0.15) 150px
381  );
382  filter: blur(30px);
383}
384#pinkbg {
385  position: absolute;
386  background-color: #e59cfaaa;
387  border-radius: 50%;
388  bottom: -150px;
389  filter: blur(20px);
390  width: 400px;
391  height: 200px;
392  right: 30px;
393}
394#orangebg {
395  position: absolute;
396  background-color: #fb9a71aa;
397  border-radius: 50%;
398  bottom: -150px;
399  filter: blur(20px);
400  width: 250px;
401  height: 200px;
402  right: 0px;
403}
404#yellowbg {
405  position: absolute;
406  background-color: #f8b74555;
407  border-radius: 50%;
408  bottom: -150px;
409  filter: blur(20px);
410  width: 100px;
411  height: 200px;
412  right: 0px;
413}
414#purplebg {
415  position: absolute;
416  background-color: #9b27ee33;
417  border-radius: 50%;
418  bottom: -150px;
419  filter: blur(30px);
420  width: 100px;
421  height: 200px;
422  right: 50%;
423}
424

.button {
  cursor: pointer;
  width: 335px;
  height: 110px;
  border-radius: 30px;
  border: 1px solid #e5c3e6;
  position: relative;
  overflow: hidden;
  filter: brightness(0.9) contrast(1.2)
    drop-shadow(0px 20px 16px rgba(0, 0, 0, 0.212));
}
#backdrop {
  height: 110px;
  width: 335px;
  overflow: hidden;
  border-radius: 30px;

  background-color: rgb(255 255 255 / 5%);
  backdrop-filter: blur(10px);
}

#backdrop2 {
  height: 110px;
  width: 335px;
  overflow: hidden;
  border-radius: 30px;

  background-color: rgb(255 255 255 / 5%);
  backdrop-filter: blur(6px);
}
.pink {
  position: absolute;
  background-color: #f05ee7;
  filter: blur(6px);
  border-radius: 50%;
}
.pinki {
  position: absolute;
  background-color: #ba63d9;
  /* filter: blur(6px); */
  border-radius: 50%;
}
.orange {
  position: absolute;
  background-color: #f37130;
  filter: blur(6px);
  border-radius: 50%;
}
.orangei {
  position: absolute;
  background-color: #ff4600;
  filter: blur(3px);
  border-radius: 50%;
}
.white {
  position: absolute;
  background-color: white;
  /* filter: blur(5px); */
  border-radius: 25px;
}

#pink1 {
  top: -10px;
  left: -10px;
  height: 50px;
  width: 150px;
}

#pink2 {
  bottom: -10px;
  left: -10px;
  height: 50px;
  width: 140px;
}
#pink3 {
  top: -5px;
  right: -10px;
  height: 50px;
  width: 120px;
}

#pink4 {
  bottom: -5px;
  right: -10px;
  height: 50px;
  width: 140px;
}

#pink5 {
  top: 25px;
  left: -20px;
  height: 70px;
  width: 120px;
  opacity: 0.7;
}
#pink6 {
  top: 25px;
  right: -20px;
  height: 70px;
  width: 120px;
  opacity: 0.7;
}
#pink7 {
  top: 0px;
  left: -5px;
  height: 30px;
  width: 30px;
  /* opacity: 0.7; */
}
#pink8 {
  bottom: -20px;
  left: -20px;
  height: 110px;
  width: 50px;
  /* opacity: 0.7; */
}
#pink9 {
  top: 0px;
  right: -20px;
  height: 60px;
  width: 50px;
  opacity: 0.7;
}
#pink10 {
  bottom: 0px;
  right: -20px;
  height: 20px;
  width: 50px;
  opacity: 0.7;
}
#pink11 {
  top: 25px;
  right: 40px;
  height: 30px;
  width: 70px;
  opacity: 0.5;
}
#orange1 {
  top: -15px;
  left: 120px;
  height: 50px;
  width: 130px;
}

#orange2 {
  top: 30px;
  left: 90px;
  height: 50px;
  width: 170px;
  opacity: 0.7;
}
#orange3 {
  top: 80px;
  left: 120px;
  height: 50px;
  width: 120px;
}

#orange5 {
  top: 10px;
  left: 160px;
  height: 30px;
  width: 30px;
}
#orange6 {
  top: 15px;
  left: 135px;
  height: 20px;
  width: 20px;
}
#orange7 {
  top: 15px;
  left: 115px;
  height: 20px;
  width: 15px;
}
#orange8 {
  bottom: 15px;
  left: 135px;
  height: 25px;
  width: 20px;
}
#orange9 {
  bottom: 15px;
  left: 195px;
  height: 20px;
  width: 15px;
}

#orange10 {
  bottom: 0px;
  left: 275px;
  height: 25px;
  width: 15px;
}
#orange11 {
  bottom: 55px;
  left: 240px;
  height: 50px;
  width: 35px;
  opacity: 0.8;
}

#white1 {
  top: 8px;
  left: 20px;
  height: 10px;
  width: 130px;
}

#white2 {
  top: 35px;
  left: 40px;
  height: 35px;
  width: 70px;
}
#white3 {
  top: 8px;
  left: 200px;
  height: 10px;
  width: 70px;
}
#white4 {
  top: 35px;
  left: 205px;
  height: 35px;
  width: 120px;
}
#white5 {
  top: 30px;
  right: 9px;
  height: 65px;
  width: 30px;
}
#white6 {
  bottom: 15px;
  left: 40px;
  height: 10px;
  width: 70px;
}
#white7 {
  bottom: 15px;
  right: 40px;
  height: 10px;
  width: 70px;
}
#white8 {
  top: 15px;
  right: 20px;
  height: 50px;
  width: 30px;
}
#white9 {
  top: 30px;
  left: 0px;
  height: 50px;
  width: 5px;
  opacity: 0.6;
}
#white10 {
  top: 30px;
  right: 0px;
  height: 50px;
  width: 3px;
  opacity: 0.9;
}
#white11 {
  top: 6px;
  left: 25px;
  height: 15px;
  width: 100px;
  background-color: transparent;
  border-bottom: 7px solid white;
  border-left: 7px solid white;
  filter: blur(4px);
}
#white12 {
  top: 15px;
  left: 8px;
  height: 25px;
  width: 15px;
  background-color: transparent;
  border-top: 3px solid white;
  border-right: 3px solid #fff9;
  filter: blur(2px);
}
#white13 {
  bottom: 6px;
  right: 9px;
  height: 20px;
  width: 20px;
  background-color: transparent;
  border-right: 7px solid white;
  border-top: 7px solid white;
  filter: blur(3px);
}
#white14 {
  bottom: 28px;
  right: 3px;
  height: 20px;
  width: 20px;
  background-color: transparent;
  border-left: 7px solid white;
  border-bottom: 7px solid white;
  filter: blur(2px);
}
#white15 {
  top: 10px;
  right: 13px;
  height: 10px;
  width: 10px;
  filter: blur(3px);
}

#white16 {
  top: 28px;
  left: 28px;
  height: 12px;
  width: 15px;
  filter: blur(3px);
}
#whiteOverlay {
  position: absolute;
  /* background-color: #ffffff44; */
  background: linear-gradient(
    180deg,
    #ffffff44 92px,
    #ffffff11 96px,
    #ffffff66 100px
  );
  top: 5px;
  left: 5px;
  width: 324px;
  height: 100px;
  border-radius: 26px;
  /* filter: blur(1px); */
}
#whiteBorder {
  position: absolute;
  /* background-color: #ffffff44; */
  /* background: linear-gradient(180deg,#ffffff44 95px,#ffffff11 98px,#ffffff44 100px); */
  top: 15px;
  left: 20px;
  width: 295px;
  height: 74px;
  border-radius: 15px;
  border: 5px solid #ffffff66;
  filter: blur(2px);
}
#whiteBorder2 {
  position: absolute;
  /* background-color: #ffffff44; */
  /* background: linear-gradient(180deg,#ffffff44 95px,#ffffff11 98px,#ffffff44 100px); */
  top: 15px;
  left: 20px;
  width: 295px;
  height: 74px;
  border-radius: 15px;
  border: 2px solid #ffffff44;
  filter: blur(1px);
}
#text {
  height: 110px;
  width: 335px;
  position: absolute;
  top: 40px;
  font-size: 25px;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
#bg {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -155deg,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.15) 50px,
    rgba(0, 0, 0, 0.15) 100px,
    rgba(225, 225, 225, 0.15) 150px
  );
  filter: blur(30px);
}
#pinkbg {
  position: absolute;
  background-color: #e59cfaaa;
  border-radius: 50%;
  bottom: -150px;
  filter: blur(20px);
  width: 400px;
  height: 200px;
  right: 30px;
}
#orangebg {
  position: absolute;
  background-color: #fb9a71aa;
  border-radius: 50%;
  bottom: -150px;
  filter: blur(20px);
  width: 250px;
  height: 200px;
  right: 0px;
}
#yellowbg {
  position: absolute;
  background-color: #f8b74555;
  border-radius: 50%;
  bottom: -150px;
  filter: blur(20px);
  width: 100px;
  height: 200px;
  right: 0px;
}
#purplebg {
  position: absolute;
  background-color: #9b27ee33;
  border-radius: 50%;
  bottom: -150px;
  filter: blur(30px);
  width: 100px;
  height: 200px;
  right: 50%;
}

Toggle prefixes

248 views

Copy to Figma

248 views

Comments

No variations yet

MIT License

Copyright - 2024 Lakshay-art (Lakshay Gupta) 

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.