{"loaderData":{"0":null,"0-3":{"total":7296,"projects":[{"created":"2024-01-22T17:00:38.000Z","isPrivate":0,"projectId":"e3bfd8","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":550,"cssLen":653,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".Btn {\n width: 200px;\n height: 40px;\n border: none;\n border-radius: 40px;\n background: linear-gradient(to right,#bf953f,#fcf6ba,#b38728,#fbf5b7,#aa771c);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n font-size: 0.8em;\n color: rgb(121, 103, 3);\n font-weight: 600;\n cursor: pointer;\n position: relative;\n z-index: 2;\n transition-duration: 3s;\n box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.144);\n background-size: 200% 200%;\n}\n\n.logoIcon path {\n fill: rgb(121, 103, 3);\n}\n\n.Btn:hover {\n transform: scale(0.95);\n transition-duration: 3s;\n animation: gradient 5s ease infinite;\n background-position: right;\n}\n"},{"created":"2024-01-22T17:00:38.000Z","isPrivate":0,"projectId":"1c8e1d","snapshot":null,"tags":null,"title":"button by Pradeepsaranbishnoi","updated":"2024-01-22T17:00:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":102,"cssLen":956,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n

","css":".mybutton {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.button {\n all: unset;\n display: flex;\n justify-content: center;\n align-items: center;\n column-gap: .5em;\n position: relative;\n border-radius: 50px;\n padding: 16px 24px;\n background-color: #f0f7fa;\n box-shadow: inset 0 -4px 8px #87bfd8, 0 4px 6px rgba(0, 0, 0, 0.2);\n cursor: pointer;\n color: #0470e3;\n transition: transform 0.4s cubic-bezier(0.55, 1, 0.15, 1);\n will-change: transform;\n}\n\n.button:active {\n transform: scale(0.92);\n}\n\n.button:active::after {\n opacity: 1;\n outline: none;\n border: 0;\n}\n\n.button::after {\n content: '';\n position: absolute;\n inset: 0;\n border-image-slice: 50%;\n border-image-width: 40px;\n border-style: solid;\n transform: scale(1.04, 1.08);\n opacity: 0;\n border: 0;\n transition-property: opacity;\n transition-duration: .4s;\n transition-timing-function: cubic-bezier(0.55, 1, 0.15, 1);\n will-change: transform;\n}\n"},{"created":"2024-01-22T17:00:38.000Z","isPrivate":0,"projectId":"0fc151","snapshot":null,"tags":null,"title":"button by reshades","updated":"2024-01-22T17:00:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":339,"cssLen":455,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n background-color: #ffffff00;\n color: #fff;\n width: 8.5em;\n height: 2.9em;\n border: #00000000 0.2em solid;\n border-radius: 11px;\n text-align: right;\n transition: all 0.6s ease;\n}\n\n.button:hover {\n background-color: #3654ff;\n}\n\n.button svg {\n width: 1.6em;\n margin: -0.2em 0.8em 1em;\n position: absolute;\n display: flex;\n transition: all 0.6s ease;\n}\n\n.button:hover svg {\n transform: translateX(5px);\n}\n\n.text {\n margin: 0 1.5em\n}"},{"created":"2024-01-22T17:00:38.000Z","isPrivate":0,"projectId":"03aecd","snapshot":null,"tags":null,"title":"button by gharsh11032000","updated":"2024-01-22T17:00:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":66,"cssLen":917,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".animated-button {\n position: relative;\n display: inline-block;\n padding: 16px 32px;\n border: none;\n background-color: #2196F3;\n color: #fff;\n font-size: 16px;\n text-transform: uppercase;\n font-weight: 600;\n cursor: pointer;\n border-radius: 8px;\n overflow: hidden;\n transition: all 0.8s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.animated-button:before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 120%;\n height: 120%;\n background-color: #fff;\n opacity: 0;\n transition: all 0.8s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.animated-button span {\n position: relative;\n z-index: 1;\n}\n\n.animated-button:hover {\n color: #2196F3;\n background-color: #fff;\n box-shadow: 0 0 20px hsla(263, 77%, 31%, 0);\n}\n\n.animated-button:active {\n scale: 0.9;\n}\n\n.animated-button:hover:before {\n transform: translate(-50%, -50%) rotate(45deg);\n opacity: 1;\n}\n\n\n\n\n"},{"created":"2024-01-22T17:00:37.000Z","isPrivate":0,"projectId":"746351","snapshot":null,"tags":null,"title":"button by Javierrocadev","updated":"2024-01-22T17:00:37.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1501,"cssLen":2630,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n Github\n\n","css":".relative{position:relative}.flex{display:flex}.h-6{height:1.5rem}.w-6{width:1.5rem}.origin-left{transform-origin:left}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:0.5rem}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23 / var(--tw-bg-opacity))}.fill-neutral-50{fill:#fafafa}.p-3{padding:0.75rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.text-left{text-align:left}.text-base{font-size:1rem;line-height:1.5rem}.font-bold{font-weight:700}.text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251 / var(--tw-text-opacity))}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.underline-offset-2{text-underline-offset:2px}.duration-500{transition-duration:500ms}.after\\:absolute::after{content:var(--tw-content);position:absolute}.after\\:-left-8::after{content:var(--tw-content);left:-2rem}.after\\:top-8::after{content:var(--tw-content);top:2rem}.after\\:z-10::after{content:var(--tw-content);z-index:10}.after\\:h-12::after{content:var(--tw-content);height:3rem}.after\\:w-12::after{content:var(--tw-content);width:3rem}.after\\:rounded-full::after{content:var(--tw-content);border-radius:9999px}.after\\:bg-sky-900::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(12 74 110 / var(--tw-bg-opacity))}.after\\:blur-lg::after{content:var(--tw-content);--tw-blur:blur(16px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.after\\:duration-500::after{content:var(--tw-content);transition-duration:500ms}.hover\\:border-neutral-900:hover{--tw-border-opacity:1;border-color:rgb(23 23 23 / var(--tw-border-opacity))}.hover\\:text-neutral-300:hover{--tw-text-opacity:1;color:rgb(212 212 212 / var(--tw-text-opacity))}.hover\\:underline:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.hover\\:decoration-2:hover{text-decoration-thickness:2px}.hover\\:underline-offset-4:hover{text-underline-offset:4px}.hover\\:duration-500:hover{transition-duration:500ms}@keyframes pulse{50%{content:var(--tw-content);opacity:.5}}.hover\\:after\\:animate-pulse:hover::after{content:var(--tw-content);animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.group:hover .group-hover\\:before\\:duration-500::before{content:var(--tw-content);transition-duration:500ms}.group:hover .group-hover\\:after\\:duration-500::after{content:var(--tw-content);transition-duration:500ms}"},{"created":"2024-01-22T17:00:37.000Z","isPrivate":0,"projectId":"fc30b5","snapshot":null,"tags":null,"title":"button by Pradeepsaranbishnoi","updated":"2024-01-22T17:00:37.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":200,"cssLen":2735,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n

\n \n

\n","css":"#c {\n display: none;\n}\n\n#upload_app {\n display: block;\n position: absolute;\n top: 50%;\n right: 0;\n left: 0;\n margin: 0 auto;\n width: 120px;\n height: 42px;\n transform: translateY(-50%);\n transition: 0.3s ease width;\n cursor: pointer;\n}\n\n#app {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: #fff;\n border: 2px solid #143240;\n overflow: hidden;\n z-index: 2;\n}\n\n#app:before {\n content: \"Upload\";\n position: absolute;\n top: 0;\n right: 0;\n padding: 12px;\n left: 0;\n color: #143240;\n font-size: 14px;\n line-height: 14px;\n font-weight: bold;\n z-index: 1;\n}\n\n#arrow {\n position: absolute;\n top: 0;\n right: 0;\n width: 38px;\n height: 38px;\n background-color: #fff;\n z-index: 2;\n}\n\n#arrow:before,\n#arrow:after {\n content: \"\";\n position: absolute;\n top: 18px;\n width: 10px;\n height: 2px;\n background-color: #143240;\n}\n\n#arrow:before {\n right: 17px;\n transform: rotateZ(-45deg);\n}\n\n#arrow:after {\n right: 11px;\n transform: rotateZ(45deg);\n}\n\n#success {\n position: absolute;\n top: 0;\n right: 0;\n width: 54px;\n height: 54px;\n margin: -8px;\n background-color: #143240;\n transform: scale(0);\n border-radius: 50%;\n z-index: 3;\n}\n\n#success i {\n font-size: 20px;\n color: #fff;\n display: block;\n width: 20px;\n height: 20px;\n margin: 17px auto;\n transform: scale(0);\n}\n\n#c:checked + #upload_app {\n width: 42px;\n}\n\n#c:checked + #upload_app #arrow:before {\n animation: _a 0.4s ease 0.4s forwards, _incHeight 4s ease 1s forwards;\n}\n\n#c:checked + #upload_app #arrow:after {\n animation: _b 0.4s ease 0.4s forwards, _incHeight 4s ease 1s forwards;\n}\n\n#c:checked + #upload_app #success {\n animation: _success 0.4s cubic-bezier(0, 0.74, 0.32, 1.21) 5s forwards;\n}\n\n#c:checked + #upload_app #success i {\n animation: _success 0.3s cubic-bezier(0, 0.74, 0.32, 1.21) 5.2s forwards;\n}\n\n@keyframes _a {\n 0% {\n top: 18px;\n right: 17px;\n width: 10px;\n transform: rotateZ(-45deg);\n background-color: #143240;\n }\n\n 100% {\n top: 36px;\n right: 19px;\n width: 19px;\n transform: rotateZ(0deg);\n background-color: #ffc107;\n }\n}\n\n@keyframes _b {\n 0% {\n top: 18px;\n right: 11px;\n width: 10px;\n transform: rotateZ(45deg);\n background-color: #143240;\n }\n\n 100% {\n top: 36px;\n right: 0;\n width: 19px;\n transform: rotateZ(0deg);\n background-color: #ffc107;\n }\n}\n\n@keyframes _incHeight {\n 0% {\n top: 36px;\n height: 2px;\n }\n\n 25% {\n top: 31px;\n height: 8px;\n }\n\n 50% {\n top: 21px;\n height: 18px;\n }\n\n 80% {\n top: 11px;\n height: 28px;\n }\n\n 100% {\n top: 0;\n height: 39px;\n }\n}\n\n@keyframes _success {\n 0% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n"},{"created":"2024-01-22T17:00:37.000Z","isPrivate":0,"projectId":"375035","snapshot":null,"tags":null,"title":"button by lumamantelli","updated":"2024-01-22T17:00:37.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":327,"cssLen":2141,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".inline-flex{display:inline-flex}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.rounded-full{border-radius:9999px}.border-2{border-width:2px}.border-rose-600{--tw-border-opacity:1;border-color:rgb(225 29 72 / var(--tw-border-opacity))}.px-9{padding-left:2.25rem;padding-right:2.25rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.font-mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-semibold{font-weight:600}.text-rose-600{--tw-text-opacity:1;color:rgb(225 29 72 / var(--tw-text-opacity))}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.delay-150{transition-delay:150ms}.duration-300{transition-duration:300ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.hover\\:-translate-y-1:hover{--tw-translate-y:-0.25rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:scale-75:hover{--tw-scale-x:.75;--tw-scale-y:.75;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:bg-rose-600:hover{--tw-bg-opacity:1;background-color:rgb(225 29 72 / var(--tw-bg-opacity))}.hover\\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.focus\\:bg-transparent:focus{background-color:transparent}"},{"created":"2024-01-22T17:00:37.000Z","isPrivate":0,"projectId":"75abaf","snapshot":null,"tags":null,"title":"button by misaraadel","updated":"2024-01-22T17:00:37.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":84,"cssLen":1467,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n hover me\n \n","css":".custom-btn {\n width: 220px;\n height: 50px;\n display: flex;\n align-items: center;\n align-content: center;\n justify-content: center;\n position: relative;\n z-index: 9;\n border: 1px solid #5BA50E;\n gap: 10px;\n text-decoration: none;\n background-color: #5BA50E;\n}\n\n.custom-btn::after {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n -webkit-clip-path: polygon(0 0, 100% 0, 0 0, 0 100%);\n clip-path: polygon(0 0, 100% 0, 0 0, 0 100%);\n z-index: -1;\n background-color: #fff;\n top: 0;\n left: 0;\n opacity: 0;\n}\n\n.custom-btn span {\n font-size: 16px;\n font-weight: 700;\n color: #fff;\n}\n\n.custom-btn:hover::after {\n animation: sideClip 0.5s linear;\n -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\n opacity: 1;\n}\n\n.custom-btn:hover span {\n animation: storm 0.4s linear both;\n color: #5BA50E;\n}\n\n@keyframes sideClip {\n 0% {\n clip-path: polygon(0 0, 100% 0, 0 0, 0 100%);\n }\n\n 50% {\n clip-path: polygon(0 0, 100% 0, 0 100%, 0 100%);\n }\n\n 100% {\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\n }\n}\n\n@keyframes storm {\n 0% {\n transform: translate3d(0, 0, 0) translateZ(0);\n }\n\n 25% {\n transform: translate3d(4px, 0, 0) translateZ(0);\n }\n\n 50% {\n transform: translate3d(-3px, 0, 0) translateZ(0);\n }\n\n 75% {\n transform: translate3d(2px, 0, 0) translateZ(0);\n }\n\n 100% {\n transform: translate3d(0, 0, 0) translateZ(0);\n }\n}"},{"created":"2024-01-22T17:00:37.000Z","isPrivate":0,"projectId":"0ea17a","snapshot":null,"tags":null,"title":"button by Yaya12085","updated":"2024-01-22T17:00:37.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1984,"cssLen":1111,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n position: relative;\n outline: 0;\n border: 1px solid transparent;\n background-color: #488aec;\n color: #ffffff;\n font-size: 0.75rem;\n line-height: 1rem;\n font-weight: 700;\n text-transform: uppercase;\n padding: 0.75rem 1.5rem;\n border-radius: 0.5rem;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n overflow: hidden;\n box-shadow: 0 4px 6px -1px #488aec31, 0 2px 4px -1px #488aec17;\n}\n\n.btn span {\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.75rem;\n transition: all .4s ease;\n}\n\nbutton svg {\n width: 1.25rem;\n height: 1.25rem;\n}\n\n.btn span:nth-child(2),.btn span:nth-child(3) {\n position: absolute;\n top: 40px;\n color: #fff;\n}\n\n.btn span:nth-child(2) {\n background-color: #488aec;\n}\n\n.btn span:nth-child(3) {\n background-color: #488aec;\n}\n\n.btn:hover {\n box-shadow: 0 10px 15px -3px #488aec4f, 0 4px 6px -2px #488aec17;\n}\n\n.btn:hover span:nth-child(2), .btn:focus span:nth-child(3) {\n top: 0;\n}\n\n.btn:focus {\n box-shadow: none;\n}"},{"created":"2024-01-22T17:00:37.000Z","isPrivate":0,"projectId":"ad51dd","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:37.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2410,"cssLen":832,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n position: relative;\n width: 130px;\n height: 35px;\n border-radius: 30px;\n background-color: white;\n border: 1px #ff5700 solid;\n overflow: hidden;\n}\n\n.text1 {\n font-size: 15px;\n font-weight: 600;\n margin-left: 22%;\n}\n\n.text2 {\n position: absolute;\n top: 25%;\n left: -50px;\n font-weight: 700;\n font-size: 14px;\n color: white;\n}\n\n.icon {\n position: absolute;\n top: 0;\n left: 0;\n transition: transform 0.5s;\n}\n\n.icon::before {\n position: absolute;\n left: -100px;\n top: 0;\n z-index: -1;\n content: '';\n width: 130px;\n height: 33px;\n border-radius: 30px;\n background-color: #ff5700;\n}\n\nbutton:hover .icon {\n transform: translateX(96px);\n transition: transform 0.5s;\n}\n\nbutton:hover .text2 {\n transform: translateX(100px);\n transition: transform 0.6s;\n}\n\nbutton:active {\n transform: scale(1.03);\n}"},{"created":"2024-01-22T17:00:37.000Z","isPrivate":0,"projectId":"3f5193","snapshot":null,"tags":null,"title":"button by KSAplay","updated":"2024-01-22T17:00:37.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":405,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background-color: #0050ec;\n color: white;\n font-size: 16px;\n font-weight: bold;\n padding: 15px 20px;\n border-radius: 2em;\n cursor: pointer;\n transition: 0.1s ease;\n border-width: 0;\n box-shadow: 1px 5px 0 0 #0e285d;\n}\n\nbutton:hover {\n transform: translateY(-4px);\n box-shadow: 1px 9px 0 0 #0e285d;\n}\n\nbutton:active {\n transform: translateY(4px);\n box-shadow: 0px 0px 0 0 #0e285d;\n}"},{"created":"2024-01-22T17:00:37.000Z","isPrivate":0,"projectId":"6d6c12","snapshot":null,"tags":null,"title":"button by artginzburg","updated":"2024-01-22T17:00:37.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":11079,"cssLen":5675,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

HOVER

FOR

SOCIAL

","css":".main_back {\n position: absolute;\n border-radius: 10px;\n transform: rotate(90deg);\n width: 11em;\n height: 11em;\n background: linear-gradient(270deg, #03a9f4, #cc39a4, #ffb5d2);\n z-index: -2;\n box-shadow: inset 0px 0px 180px 5px #ffffff;\n transition: opacity 1s, border-radius .3s;\n}\n\n.main {\n display: flex;\n flex-wrap: wrap;\n width: 14em;\n align-items: center;\n justify-content: center;\n z-index: -1;\n}\n\n.card {\n width: 60px;\n height: 60px;\n border-top-left-radius: 10px;\n background: lightgrey;\n transition: .3s ease, .15s background-color, .15s background-image ease-in-out;\n background: rgba(255, 255, 255, 0.596);\n backdrop-filter: blur(5px);\n border: 1px solid transparent;\n -webkit-backdrop-filter: blur(5px);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.card .instagram {\n opacity: 0;\n transition: .2s ease-in-out;\n fill: #cc39a4;\n}\n\n.card:nth-child(2) {\n border-radius: 0px;\n}\n\n.card:nth-child(2) .twitter {\n opacity: 0;\n transition: .2s ease-in-out;\n fill: #03A9F4;\n}\n\n.card:nth-child(3) {\n border-top-right-radius: 10px;\n border-top-left-radius: 0px;\n}\n\n.card:nth-child(3) .dribble {\n opacity: 0;\n transition: .2s ease-in-out;\n fill: #ffb5d2;\n}\n\n.card:nth-child(4) {\n border-radius: 0px;\n}\n\n.card:nth-child(4) .codepen {\n opacity: 0;\n transition: .2s ease-in-out;\n fill: black;\n}\n\n.card:nth-child(5) {\n border-radius: 0px;\n}\n\n.card:nth-child(5) .uiverse {\n position: absolute;\n margin-left: 0.2em;\n margin-top: 0.2em;\n opacity: 0;\n transition: .2s ease-in-out;\n}\n\n.card:nth-child(6) {\n border-radius: 0px;\n}\n\n.card:nth-child(6) .discord {\n opacity: 0;\n transition: .2s ease-in-out;\n fill: #8c9eff;\n}\n\n.card:nth-child(7) {\n border-bottom-left-radius: 10px;\n border-top-left-radius: 0px;\n}\n\n.card:nth-child(7) .github {\n opacity: 0;\n transition: .2s ease-in-out;\n fill: black;\n}\n\n.card:nth-child(8) {\n border-radius: 0px;\n}\n\n.card:nth-child(8) .telegram {\n opacity: 0;\n transition: .2s ease-in-out;\n fill: #29b6f6;\n}\n\n.card:nth-child(9) {\n border-bottom-right-radius: 10px;\n border-top-left-radius: 0px;\n}\n\n.card:nth-child(9) .reddit {\n opacity: 0;\n transition: .2s ease-in-out;\n}\n\n.main:hover {\n width: 14em;\n cursor: pointer;\n}\n\n.main:hover .main_back {\n opacity: 0;\n border-radius: 30px;\n}\n\n.main:hover .card {\n --hover-edge-radius: 100%;\n --hover-edge-offset: 10%;\n margin: .2em;\n border-radius: 10px;\n box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.3);\n background: rgba(255, 255, 255, 0.2);\n}\n\n.main:hover .card:nth-child(1) {\n border-top-left-radius: var(--hover-edge-radius);\n}\n\n.main:hover .card:nth-child(3) {\n border-top-right-radius: var(--hover-edge-radius);\n}\n\n.main:hover .card:nth-child(7) {\n border-bottom-left-radius: var(--hover-edge-radius);\n}\n\n.main:hover .card:nth-child(9) {\n border-bottom-right-radius: var(--hover-edge-radius);\n}\n\n.main:hover .card:nth-child(1) svg {\n margin-top: var(--hover-edge-offset);\n margin-left: var(--hover-edge-offset);\n}\n\n.main:hover .card:nth-child(3) svg {\n margin-top: var(--hover-edge-offset);\n margin-right: var(--hover-edge-offset);\n}\n\n.main:hover .card:nth-child(7) svg {\n margin-bottom: var(--hover-edge-offset);\n margin-left: var(--hover-edge-offset);\n}\n\n.main:hover .card:nth-child(9) svg {\n margin-bottom: var(--hover-edge-offset);\n margin-right: var(--hover-edge-offset);\n}\n\n.main:hover .card:nth-child(5) {\n border: transparent;\n}\n\n.main:hover .text {\n opacity: 0;\n z-index: -3;\n}\n\n.main:hover .instagram {\n opacity: 1;\n}\n\n.main:hover .twitter {\n opacity: 1;\n}\n\n.main:hover .dribble {\n opacity: 1;\n}\n\n.main:hover .codepen {\n opacity: 1;\n}\n\n.main:hover .uiverse {\n opacity: 1;\n}\n\n.main:hover .discord {\n opacity: 1;\n}\n\n.main:hover .github {\n opacity: 1;\n}\n\n.main:hover .telegram {\n opacity: 1;\n}\n\n.main:hover .reddit {\n opacity: 1;\n}\n\n.card:nth-child(1):hover {\n background-color: #cc39a4;\n}\n\n.card:nth-child(1):hover .instagram {\n fill: white;\n}\n\n.card:nth-child(2):hover {\n background-color: #03A9F4;\n}\n\n.card:nth-child(2):hover .twitter {\n fill: white;\n}\n\n.card:nth-child(3):hover {\n background-color: #ffb5d2;\n}\n\n.card:nth-child(3):hover .dribble {\n fill: white;\n}\n\n.card:nth-child(4):hover {\n background-color: #1E1F26;\n}\n\n.card:nth-child(4):hover .codepen {\n fill: white;\n}\n\n.card:nth-child(5):hover {\n animation: backgroundIMG .1s;\n animation-fill-mode: forwards;\n}\n\n.card:nth-child(5):hover .uiverse #paint0_linear_501_142 stop {\n stop-color: white;\n}\n\n.card:nth-child(5):hover .uiverse #paint1_linear_501_142 stop {\n stop-color: white;\n}\n\n.card:nth-child(5):hover .uiverse #paint2_linear_501_142 stop {\n stop-color: white;\n}\n\n@keyframes backgroundIMG {\n 100% {\n background-image: linear-gradient(#BF66FF,#6248FF,#00DDEB);\n }\n}\n\n.card:nth-child(6):hover {\n background-color: #8c9eff;\n}\n\n.card:nth-child(6):hover .discord {\n fill: white;\n}\n\n.card:nth-child(7):hover {\n background-color: black;\n}\n\n.card:nth-child(7):hover .github {\n fill: white;\n}\n\n.card:nth-child(8):hover {\n background-color: #29b6f6;\n}\n\n.card:nth-child(8):hover .telegram > path:nth-of-type(1) {\n fill: white;\n}\n\n.card:nth-child(8):hover .telegram > path:nth-of-type(2) {\n fill: #29b6f6;\n}\n\n.card:nth-child(8):hover .telegram > path:nth-of-type(3) {\n fill: #29b6f6;\n}\n\n.card:nth-child(9):hover {\n background-color: rgb(255,69,0);\n}\n\n.card:nth-child(9) .reddit > g circle {\n fill: rgb(255,69,0);\n}\n\n.card:nth-child(9) .reddit > g path {\n fill: white;\n}\n\n.text {\n position: absolute;\n font-size: 0.7em;\n transition: .4s ease-in-out;\n color: black;\n text-align: center;\n font-weight: bold;\n letter-spacing: 0.33em;\n z-index: 3;\n}"}]}},"actionData":null,"errors":null}