{"loaderData":{"0":null,"0-2":{"total":7077,"projects":[{"created":"2024-01-22T17:00:15.000Z","isPrivate":0,"projectId":"fedfdc","snapshot":null,"tags":null,"title":"button by JkHuger","updated":"2024-01-22T17:00:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1169,"cssLen":1011,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n ","css":"button {\n width: 60px;\n height: 60px;\n transform: scale(1);\n border-style: none;\n outline: none;\n cursor: pointer;\n border-radius: 50%;\n background: rgb(228, 232, 236);\n background: linear-gradient(45deg, rgb(228, 232, 236) 0%, rgb(234 234 234) 100%);\n box-shadow: -2px -7px 10px #f1f1f1, 4px 6px 10px #d4d7da;\n transition: all .3s;\n}\n\nbutton:active {\n background: rgb(218, 221, 224);\n background: linear-gradient(45deg, rgb(218, 221, 224) 0%, rgb(241, 241, 241) 100%);\n box-shadow: -2px -7px 10px #d4d7da, \n 4px 6px 10px #f1f1f1,\n inset -2px -7px 10px #f1f1f1, \n inset 4px 6px 10px #d4d7da;\n transition: all .3s;\n transform: scale(.95);\n}\n\nbutton i {\n font-size: 20px;\n background: linear-gradient(-45deg, gray 0%, lightgray 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n transition: all .3s;\n}\n\nbutton:active i {\n transform: scale(.9);\n transition: all .3s;\n}\n\n.svg {\n width: 25px;\n height: 60px;\n border-style: none;\n align-items: center;\n}"},{"created":"2024-01-22T17:00:15.000Z","isPrivate":0,"projectId":"a2ee86","snapshot":null,"tags":null,"title":"button by sunnyshaikh","updated":"2024-01-22T17:00:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":30,"cssLen":539,"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 background: #FBD148;\n box-sizing: border-box;\n border: 0;\n outline: 0;\n padding: 1rem 3rem;\n font-size: 1em;\n cursor: pointer;\n transition: .25s ease;\n}\n\nbutton::before {\n position: absolute;\n content: '';\n box-sizing: border-box;\n top: 0;\n left: 0;\n transform: translate(-5px, -5px);\n width: 100%;\n height: 100%;\n border: 1px solid rgb(84, 84, 84);\n transition: .25s ease;\n}\n\nbutton:hover {\n transform: translate(-5px, -5px);\n}\n\nbutton:hover::before {\n transform: translate(5px, 5px);\n}"},{"created":"2024-01-22T17:00:15.000Z","isPrivate":0,"projectId":"ef2521","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2529,"cssLen":1105,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".Documents-btn {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: fit-content;\n height: 45px;\n border: none;\n padding: 0px 17px;\n border-radius: 5px;\n background: linear-gradient(to left bottom, #9b3ce8, #3386ef, #13bcec);\n gap: 8px;\n cursor: pointer;\n transition: all 0.3s;\n}\n.folderContainer {\n width: 40px;\n height: fit-content;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-end;\n position: relative;\n}\n.fileBack {\n z-index: 1;\n width: 80%;\n height: auto;\n}\n.filePage {\n width: 50%;\n height: auto;\n position: absolute;\n z-index: 2;\n transition: all 0.3s ease-out;\n}\n.fileFront {\n width: 85%;\n height: auto;\n position: absolute;\n z-index: 3;\n opacity: 0.95;\n transform-origin: bottom;\n transition: all 0.3s ease-out;\n}\n.text {\n color: white;\n font-size: 15px;\n font-weight: 600;\n letter-spacing: 0.5px;\n}\n.Documents-btn:hover .filePage {\n transform: translateY(-5px);\n}\n.Documents-btn:hover {\n background-color: rgb(58, 58, 94);\n}\n.Documents-btn:hover .fileFront {\n transform: rotateX(30deg);\n}\n"},{"created":"2024-01-22T17:00:15.000Z","isPrivate":0,"projectId":"82bef7","snapshot":null,"tags":null,"title":"button by Dashrath-Sharma","updated":"2024-01-22T17:00:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":1505,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n cursor: pointer;\n padding: 1em 2em;\n font-weight: bold;\n font-size: 20px;\n color: #fff;\n position: relative;\n overflow: hidden;\n background: rgba(60, 73, 203, 0.35);\n box-shadow: 0 0px 32px 0 rgba(31, 38, 135, 0.37);\n backdrop-filter: blur(14.5px);\n border: 1px solid rgba(255, 255, 255, 0.18);\n -webkit-backdrop-filter: blur(14.5px);\n}\n\nbutton:hover {\n box-shadow: 0px 0 32px 0 rgba(31, 38, 135, 0.37),\n 0px 0 32px 0 rgba(31, 38, 135, 0.37), 0 0 42px 0px rgba(31, 38, 135, 0.37),\n 0 0 52px 0 rgba(31, 38, 135, 0.37);\n border: 1px solid rgba(255, 255, 255, 0.58);\n}\n\nbutton,\nbutton::before {\n display: grid;\n place-items: center;\n border-radius: 10px;\n box-shadow: 0 0px 32px 0 rgba(31, 38, 135, 0.37);\n}\n\nbutton::before {\n content: \"Button\";\n position: absolute;\n background: blue;\n width: 90%;\n height: 80%;\n background: rgba(26, 18, 241, 0.25);\n backdrop-filter: blur(18.5px);\n -webkit-backdrop-filter: blur(18.5px);\n border: 1px solid rgba(255, 255, 255, 0.18);\n transition: 0.4s;\n}\n\nbutton:hover::before {\n background: rgba(51, 57, 236, 0.4);\n box-shadow: 1px 1px 2px 0 rgba(31, 38, 135, 0.37),\n 2px 2px 2px 0 rgba(31, 38, 135, 0.37), 0 0px 32px 0 rgba(31, 38, 135, 0.37),\n 0 0px 32px 1px rgba(31, 38, 135, 0.37), 0 0px 32px 0 rgba(31, 38, 135, 0.37);\n backdrop-filter: blur(5.5px);\n -webkit-backdrop-filter: blur(5.5px);\n border-radius: 10px;\n border: 1px solid rgba(255, 255, 255, 0.18);\n}\nbutton:active::before {\n transform: scale(0.67);\n}\n"},{"created":"2024-01-22T17:00:15.000Z","isPrivate":0,"projectId":"39085c","snapshot":null,"tags":null,"title":"button by Peary74","updated":"2024-01-22T17:00:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":473,"cssLen":677,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btnCloud {\n background-color: transparent;\n position: relative;\n fill: rgb(155, 153, 153);\n border: none;\n}\n\n.btnCloud::after {\n content: 'SAVE';\n position: absolute;\n top: -50%;\n left: 50%;\n transform: translateX(-50%);\n background-color: #fff;\n padding: 3px 9px;\n border-radius: 5px;\n transition: 200ms linear;\n transition-delay: 200ms;\n color: black;\n font-size: 13px;\n visibility: hidden;\n}\n\n.icon {\n transform: scale(1.4);\n transition: 200ms linear;\n}\n\n.btnCloud:hover > .icon {\n transform: scale(1.7);\n}\n\n.btnCloud:hover > .icon path {\n fill: #fff;\n cursor: pointer;\n}\n\n.btnCloud:hover::after {\n visibility: visible;\n opacity: 1;\n top: -100%;\n}\n"},{"created":"2024-01-22T17:00:15.000Z","isPrivate":0,"projectId":"0ab353","snapshot":null,"tags":null,"title":"button by uiverse-astronaut","updated":"2024-01-22T17:00:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":375,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background: #e999fd;\n font-family: inherit;\n padding: 0.6em 1.3em;\n font-weight: 900;\n font-size: 18px;\n border: 3px solid black;\n border-radius: 0.4em;\n box-shadow: 0.1em 0.1em;\n}\n\nbutton:hover {\n transform: translate(-0.05em, -0.05em);\n box-shadow: 0.15em 0.15em;\n}\n\nbutton:active {\n transform: translate(0.05em, 0.05em);\n box-shadow: 0.05em 0.05em;\n}"},{"created":"2024-01-22T17:00:15.000Z","isPrivate":0,"projectId":"f8b441","snapshot":null,"tags":null,"title":"button by mi-series","updated":"2024-01-22T17:00:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":44,"cssLen":540,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n width: 170px;\n height: 60px;\n color: #fff;\n background: #000;\n font-size: 17px;\n text-decoration: none;\n margin: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0px 0px 0 #000;\n transition: 0.5s;\n position: relative;\n}\n\nbutton:hover {\n box-shadow: 8px 10px 0 #000;\n background: transparent;\n border: 2px solid #000;\n color: #000;\n margin-top: 5px;\n}\n\nbutton span {\n margin-left: 10px;\n width: 0;\n overflow: hidden;\n transition: 0.4s;\n}\n\nbutton:hover span {\n width: 30px;\n}"},{"created":"2024-01-22T17:00:15.000Z","isPrivate":0,"projectId":"cd7fd0","snapshot":null,"tags":null,"title":"button by Rodrypaladin","updated":"2024-01-22T17:00:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":760,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n padding: 10px 20px;\n font-size: 1.1rem;\n background-color: rgb(89, 182, 35);\n border: none;\n color: white;\n position: relative;\n width: 120px;\n height: 45px;\n transition: background-color 0.2s ease-in, all 0.15s ease-in;\n}\n\nbutton::after {\n display: flex;\n align-items: center;\n justify-content: center;\n content: \"Button\";\n width: 120px;\n height: 45px;\n position: absolute;\n top: 0;\n left: 0;\n transform: translate(5px, 5px);\n background-color: white;\n color: rgb(53, 144, 0);\n border: 2px solid rgb(53, 144, 0);\n transition: all 0.15s ease-in;\n}\n\nbutton:hover::after {\n transform: translate(-8px, -9px);\n}\n\nbutton:hover {\n transform: translate(5px, 5px);\n}\n\nbutton:active::after {\n background-color: rgb(232, 255, 219);\n}"},{"created":"2024-01-22T17:00:13.000Z","isPrivate":0,"projectId":"29803a","snapshot":null,"tags":null,"title":"button by Javierrocadev","updated":"2024-01-22T17:00:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1161,"cssLen":2284,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n Your Name\n \n See my profile!\n \n\n","css":".absolute{position:absolute}.relative{position:relative}.top-16{top:4rem}.z-10{z-index:10}.inline-block{display:inline-block}.flex{display:flex}.h-8{height:2rem}.w-8{width:2rem}.items-center{align-items:center}.justify-start{justify-content:flex-start}.gap-2{gap:0.5rem}.rounded{border-radius:0.25rem}.rounded-lg{border-radius:0.5rem}.border-l-2{border-left-width:2px}.bg-sky-600{--tw-bg-opacity:1;background-color:rgb(2 132 199 / var(--tw-bg-opacity))}.bg-sky-700{--tw-bg-opacity:1;background-color:rgb(3 105 161 / var(--tw-bg-opacity))}.fill-neutral-50{fill:#fafafa}.p-2{padding:0.5rem}.px-1{padding-left:0.25rem;padding-right:0.25rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.pr-6{padding-right:1.5rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.text-neutral-50{--tw-text-opacity:1;color:rgb(250 250 250 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.opacity-0{opacity:0}.shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-500{transition-duration:500ms}.before\\:absolute::before{content:var(--tw-content);position:absolute}.before\\:-top-1::before{content:var(--tw-content);top:-0.25rem}.before\\:left-20::before{content:var(--tw-content);left:5rem}.before\\:h-3::before{content:var(--tw-content);height:0.75rem}.before\\:w-3::before{content:var(--tw-content);width:0.75rem}.before\\:rotate-45::before{content:var(--tw-content);--tw-rotate:45deg;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))}.before\\:bg-sky-600::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(2 132 199 / var(--tw-bg-opacity))}.hover\\:bg-sky-600:hover{--tw-bg-opacity:1;background-color:rgb(2 132 199 / var(--tw-bg-opacity))}.group:hover .group-hover\\:opacity-100{opacity:1}"},{"created":"2024-01-22T17:00:13.000Z","isPrivate":0,"projectId":"5b2908","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":629,"cssLen":987,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".Btn {\n width: 45px;\n height: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background-color: transparent;\n position: relative;\n /* overflow: hidden; */\n border-radius: 7px;\n cursor: pointer;\n transition: all 0.3s;\n}\n\n.svgContainer {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n backdrop-filter: blur(0px);\n letter-spacing: 0.8px;\n border-radius: 10px;\n transition: all 0.3s;\n border: 1px solid rgba(156, 156, 156, 0.466);\n}\n\n.BG {\n position: absolute;\n content: \"\";\n width: 100%;\n height: 100%;\n background: #ff0000;\n z-index: -1;\n border-radius: 10px;\n pointer-events: none;\n transition: all 0.3s;\n}\n\n.Btn:hover .BG {\n transform: rotate(35deg);\n transform-origin: bottom;\n}\n\n.Btn:hover .svgContainer {\n border: 1px solid rgba(255, 110, 110, 0.466);\n background-color: rgba(219, 219, 219, 0.466);\n backdrop-filter: blur(4px);\n}\n"},{"created":"2024-01-22T17:00:13.000Z","isPrivate":0,"projectId":"2b5d95","snapshot":null,"tags":null,"title":"button by SmookyDev","updated":"2024-01-22T17:00:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":419,"cssLen":1907,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".relative{position:relative}.z-20{z-index:20}.overflow-hidden{overflow:hidden}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-500{transition-duration:500ms}.after\\:absolute::after{content:var(--tw-content);position:absolute}.after\\:bottom-0::after{content:var(--tw-content);bottom:0px}.after\\:left-0::after{content:var(--tw-content);left:0px}.after\\:z-\\[-20\\]::after{content:var(--tw-content);z-index:-20}.after\\:h-1::after{content:var(--tw-content);height:0.25rem}.after\\:w-full::after{content:var(--tw-content);width:100%}.after\\:rounded-t-full::after{content:var(--tw-content);border-top-left-radius:9999px;border-top-right-radius:9999px}.after\\:bg-\\[\\#abd373\\]::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(171 211 115 / var(--tw-bg-opacity))}.after\\:transition-all::after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.after\\:duration-500::after{content:var(--tw-content);transition-duration:500ms}.hover\\:text-\\[\\#778464\\]:hover{--tw-text-opacity:1;color:rgb(119 132 100 / var(--tw-text-opacity))}.hover\\:transition-all:hover{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.hover\\:duration-500:hover{transition-duration:500ms}.after\\:hover\\:h-\\[200\\%\\]:hover::after{content:var(--tw-content);height:200%}.after\\:hover\\:transition-all:hover::after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.after\\:hover\\:duration-500:hover::after{content:var(--tw-content);transition-duration:500ms}"},{"created":"2024-01-22T17:00:13.000Z","isPrivate":0,"projectId":"43e6c6","snapshot":null,"tags":null,"title":"button by ArturCodeCraft","updated":"2024-01-22T17:00:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":44,"cssLen":502,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"Hover me!","css":"/* ============================ */\na {\n text-decoration: none;\n}\n/* ============================ */\n.menu__link {\n color: #fff;\n line-height: 2;\n position: relative;\n}\n\n.menu__link::before {\n content: '';\n width: 100%;\n height: 2px;\n border-radius: 2px;\n background-color: #fff;\n position: absolute;\n bottom: -.5rem;\n left: 0;\n transition: transform .4s, opacity .4s;\n opacity: 0;\n}\n\n.menu__link:hover::before {\n transform: translateY(-.25rem);\n opacity: 1;\n}"}]}},"actionData":null,"errors":null}