{"loaderData":{"0":null,"0-3":{"total":7296,"projects":[{"created":"2024-01-22T17:00:47.000Z","isPrivate":0,"projectId":"e98a7a","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T17:00:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":628,"cssLen":944,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n --color: #ffcd39;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all .5s;\n border: none;\n background-color: transparent;\n}\n\n.btn div {\n letter-spacing: 2px;\n font-weight: bold;\n background: var(--color);\n border-radius: 2rem;\n color: black;\n padding: 1rem;\n}\n\n.btn::before {\n content: '';\n z-index: -1;\n background-color: var(--color);\n border: 2px solid black;\n border-radius: 2rem;\n width: 110%;\n height: 100%;\n position: absolute;\n transform: rotate(10deg);\n transition: .5s;\n opacity: 0.2;\n}\n\n.btn:hover {\n cursor: pointer;\n filter: brightness(1.2);\n transform: scale(1.1);\n}\n\n.btn:hover::before {\n transform: rotate(0deg);\n opacity: 1;\n}\n\n.btn svg {\n transform: translateX(-200%);\n transition: .5s;\n width: 0;\n opacity: 0;\n}\n\n.btn:hover svg {\n width: 25px;\n transform: translateX(0%);\n opacity: 1;\n}\n\n.btn:active {\n filter: brightness(1.4);\n}"},{"created":"2024-01-22T17:00:46.000Z","isPrivate":0,"projectId":"12848a","snapshot":null,"tags":null,"title":"button by ercnersoy","updated":"2024-01-22T17:00:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":43,"cssLen":831,"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: 1rem 4rem;\n border: 0;\n background-color: rebeccapurple;\n color: white;\n box-shadow: 0px 10px 0px 0px rgb(68, 37, 99);\n transition: all 0.9s ease-in-out;\n font-weight: 600;\n font-family: \"Lucida Sans\", \"Lucida Sans Regular\", \"Lucida Grande\",\n \"Lucida Sans Unicode\", Geneva, Verdana, sans-serif;\n font-size: 1rem;\n position: relative;\n}\n.button:hover {\n box-shadow: 0px 10px 0px 0px rgb(122, 71, 173);\n background-color: rgb(80, 31, 129);\n}\n.button:active {\n box-shadow: 0px 5px 0px 0px rgb(122, 71, 173);\n text-shadow: 0 0px 0px #000;\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n left: 0;\n bottom: 0px;\n box-shadow: 0px 10px 0px 0px rgb(229, 104, 9);\n width: 0;\n height: 10px;\n transition: all 0.9s ease-in-out;\n}\n.button:hover::before {\n width: 100%;\n}\n"},{"created":"2024-01-22T17:00:46.000Z","isPrivate":0,"projectId":"6b0a0b","snapshot":null,"tags":null,"title":"button by Sujanthapast0","updated":"2024-01-22T17:00:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":444,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n border: 1px solid black;\n padding: 12px 30px 12px 30px;\n border-radius: 30px;\n background-color: #fa70fa;\n font-weight: bolder;\n font-size: 15px;\n box-shadow: 0px 0px 1px;\n transform: all 2s esase;\n transition-duration: .3s;\n}\n\nbutton:hover {\n transform: translateY(-10px);\n box-shadow: 0px 7px 1px rgb(0, 0, 0);\n border: 1px solid black;\n}\n\nbutton:active {\n transform: translateY(10px);\n box-shadow: 0px 0px 1px;\n}\n \n\n"},{"created":"2024-01-22T17:00:46.000Z","isPrivate":0,"projectId":"b463fa","snapshot":null,"tags":null,"title":"button by Laurits123456","updated":"2024-01-22T17:00:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":176,"cssLen":1122,"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":"/*pushing a hamburger menu into a pillow texture like background*/\n\n.menuButton {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n gap: 13%;\n color: #090909;\n width: 3.5em;\n height: 3.5em;\n border-radius: 0.5em;\n background: #171717;\n border: 1px solid #171717;\n transition: all .3s;\n box-shadow: inset 4px 4px 12px #3a3a3a,\n inset -4px -4px 12px #000000;\n}\n\n.menuButton:hover {\n border: 1px solid black;\n}\n\n.menuButton:active {\n color: #666;\n box-shadow: 6px 6px 12px #3a3a3a,\n -6px -6px 12px #000000;\n}\n\ninput[type = \"checkbox\"] {\n -webkit-appearance: none;\n display: none;\n visibility: hidden;\n}\n\n.menuButton span {\n width: 30px;\n height: 4px;\n background: rgb(200,200,200);\n border-radius: 100px;\n transition: 0.3s ease;\n}\n\ninput[type]:checked ~ span.top {\n transform: translateY(290%)rotate(45deg);\n width: 40px;\n}\n\ninput[type]:checked ~ span.bot {\n transform: translateY(-270%) rotate(-45deg);\n width: 40px;\n box-shadow: 0 0 10px #495057;\n}\n\ninput[type]:checked ~ span.mid {\n transform: translateX(-20px);\n opacity: 0;\n}"},{"created":"2024-01-22T17:00:46.000Z","isPrivate":0,"projectId":"eb30da","snapshot":null,"tags":null,"title":"button by RaspberryBee","updated":"2024-01-22T17:00:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":40,"cssLen":716,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n height: 2em;\n width: 5em;\n border-radius: 1em;\n border: 0.1rem solid transparent;\n background-color: rgb(64, 146, 239);\n transition: 0.3s;\n font-size: 1em;\n}\n\n.button:hover {\n cursor: pointer;\n transform: scale(1.05) rotate(3deg);\n}\n\n.button:active {\n animation: borderMove 0.5s forwards;\n transform: scale(0.9) rotate(-3deg);\n background-color: rgb(0, 0, 0);\n color: rgb(64, 146, 239);\n border: 0.1rem solid rgb(38, 103, 224);\n}\n\n@keyframes borderMove {\n 0% {\n border-width: 0.1rem;\n transform: scale(1) rotate(0deg);\n }\n\n 50% {\n border-width: 0.4rem;\n transform: scale(0.9) rotate(-3deg);\n }\n\n 100% {\n border-width: 0.15rem;\n transform: scale(1) rotate(0deg);\n }\n}\n"},{"created":"2024-01-22T17:00:46.000Z","isPrivate":0,"projectId":"b810b2","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":50,"cssLen":471,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".cyberpunk-button {\n background-color: #2f3640;\n color: #fff;\n border: 2px solid #ff7979;\n border-radius: 5px;\n padding: 10px 15px;\n font-size: 18px;\n text-transform: uppercase;\n letter-spacing: 2px;\n font-weight: bold;\n box-shadow: 2px 2px 10px #ff7979;\n transition: all 0.2s ease-in-out;\n}\n\n.cyberpunk-button:hover {\n background-color: #ff7979;\n color: #2f3640;\n border-color: #2f3640;\n box-shadow: 2px 2px 20px #2f3640;\n transform: translateY(-2px);\n}\n"},{"created":"2024-01-22T17:00:46.000Z","isPrivate":0,"projectId":"cb67f4","snapshot":null,"tags":null,"title":"button by ahmed150up2","updated":"2024-01-22T17:00:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":48,"cssLen":2634,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".delete-button {\n background-color: #000;\n color: #fff;\n font-size: 24px;\n border: 0.5px solid rgba(0, 0, 0, 0.1);\n padding-bottom: 8px;\n width: 300px;\n height: 65px;\n border-radius: 15px 15px 12px 12px;\n cursor: pointer;\n position: relative;\n will-change: transform;\n transition: all .1s ease-in-out 0s;\n user-select: none;\n background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)),\n linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n background-position: bottom right, bottom right;\n background-size: 100% 100%, 100% 100%;\n background-repeat: no-repeat;\n box-shadow: inset -4px -10px 0px rgba(255, 255, 255, 0.4),\n inset -4px -8px 0px rgba(0, 0, 0, 0.3),\n 0px 2px 1px rgba(0, 0, 0, 0.3),\n 0px 2px 1px rgba(255, 255, 255, 0.1);\n transform: perspective(70px) rotateX(5deg) rotateY(0deg);\n}\n\n.delete-button::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.5));\n z-index: -1;\n border-radius: 15px;\n box-shadow: inset 4px 0px 0px rgba(255, 255, 255, 0.1),\n inset 4px -8px 0px rgba(0, 0, 0, 0.3);\n transition: all .1s ease-in-out 0s;\n}\n\n.delete-button::before {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)),\n linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n background-position: bottom right, bottom right;\n background-size: 100% 100%, 100% 100%;\n background-repeat: no-repeat;\n z-index: -1;\n border-radius: 15px;\n transition: all .1s ease-in-out 0s;\n}\n\n.delete-button:active {\n will-change: transform;\n transform: perspective(80px) rotateX(5deg) rotateY(1deg) translateY(3px) scale(0.96);\n height: 64px;\n border: 0.25px solid rgba(0, 0, 0, 0.2);\n box-shadow: inset -4px -8px 0px rgba(255, 255, 255, 0.2),\n inset -4px -6px 0px rgba(0, 0, 0, 0.8),\n 0px 1px 0px rgba(0, 0, 0, 0.9),\n 0px 1px 0px rgba(255, 255, 255, 0.2);\n transition: all .1s ease-in-out 0s;\n}\n\n.delete-button::after:active {\n background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.2));\n}\n\n.delete-button:active::before {\n content: \"\";\n display: block;\n position: absolute;\n top: 5%;\n left: 20%;\n width: 50%;\n height: 80%;\n background-color: rgba(255, 255, 255, 0.1);\n animation: overlay 0.1s ease-in-out 0s;\n pointer-events: none;\n}\n\n@keyframes overlay {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.delete-button:focus {\n outline: none;\n}"},{"created":"2024-01-22T17:00:46.000Z","isPrivate":0,"projectId":"3b3ced","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T17:00:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":460,"cssLen":1968,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".absolute {\n position: absolute\n}\n\n.relative {\n position: relative\n}\n\n.-top-\\[150\\%\\] {\n top: -150%\n}\n\n.left-0 {\n left: 0px\n}\n\n.inline-flex {\n display: inline-flex\n}\n\n.h-\\[5px\\] {\n height: 5px\n}\n\n.w-80 {\n width: 20rem\n}\n\n.overflow-hidden {\n overflow: hidden\n}\n\n.rounded-md {\n border-radius: 0.375rem\n}\n\n.border {\n border-width: 1px\n}\n\n.border-b-4 {\n border-bottom-width: 4px\n}\n\n.border-gray-400 {\n --tw-border-opacity: 1;\n border-color: rgb(156 163 175 / var(--tw-border-opacity))\n}\n\n.bg-gray-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(156 163 175 / var(--tw-bg-opacity))\n}\n\n.bg-gray-950 {\n --tw-bg-opacity: 1;\n background-color: rgb(3 7 18 / var(--tw-bg-opacity))\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n\n.font-medium {\n font-weight: 500\n}\n\n.text-gray-400 {\n --tw-text-opacity: 1;\n color: rgb(156 163 175 / var(--tw-text-opacity))\n}\n\n.opacity-50 {\n opacity: 0.5\n}\n\n.shadow-\\[0_0_10px_10px_rgba\\(0\\2c 0\\2c 0\\2c 0\\.3\\)\\] {\n --tw-shadow: 0 0 10px 10px rgba(0,0,0,0.3);\n --tw-shadow-colored: 0 0 10px 10px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n.shadow-gray-400 {\n --tw-shadow-color: #9ca3af;\n --tw-shadow: var(--tw-shadow-colored)\n}\n\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.duration-300 {\n transition-duration: 300ms\n}\n\n.duration-500 {\n transition-duration: 500ms\n}\n\n.hover\\:border-b:hover {\n border-bottom-width: 1px\n}\n\n.hover\\:border-t-4:hover {\n border-top-width: 4px\n}\n\n.hover\\:brightness-150:hover {\n --tw-brightness: brightness(1.5);\n 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)\n}\n\n.active\\:opacity-75:active {\n opacity: 0.75\n}\n\n.group:hover .group-hover\\:top-\\[150\\%\\] {\n top: 150%\n}"},{"created":"2024-01-22T17:00:46.000Z","isPrivate":0,"projectId":"ad7480","snapshot":null,"tags":null,"title":"button by ercnersoy","updated":"2024-01-22T17:00:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":956,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n padding: 0.5rem 2.5rem 0.5rem 2.5rem;\n box-shadow: 0px 0px 0px 3px black;\n border: 0;\n border-radius: 0.5rem;\n font-size: 1rem;\n background-color: #ffc83d;\n color: black;\n font-weight: bolder;\n font-family: Verdana, Geneva, Tahoma, sans-serif;\n position: relative;\n transition: all .9s ease-in-out;\n letter-spacing: 0.1rem;\n text-transform: uppercase;\n}\n\nbutton:hover {\n background-color: #f03a17;\n color: white;\n}\n\nbutton::before {\n content: \"😍\";\n position: absolute;\n left: -0rem;\n top: 0rem;\n opacity: 1;\n font-size: 1.55rem;\n transition: all .9s ease-in-out;\n transform: rotate(0deg);\n}\n\nbutton:hover::before {\n content: \"😘\";\n opacity: 1;\n visibility: visible;\n transform: rotate(40deg);\n font-size: 2.5rem;\n top: -0.75rem;\n transition: all .9s ease-in-out;\n animation: rightRun 2s forwards;\n}\n\nbutton:active::before {\n content: \"🥰\";\n}\n\n@keyframes rightRun {\n 100% {\n transform: translateX(140px);\n }\n}"},{"created":"2024-01-22T17:00:46.000Z","isPrivate":0,"projectId":"0f8b12","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":742,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n padding: 15px 25px;\n border: unset;\n border-radius: 15px;\n color: #e8e8e8;\n z-index: 1;\n background: #212121;\n position: relative;\n font-weight: 1000;\n font-size: 17px;\n -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);\n box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);\n transition: all 250ms;\n overflow: hidden;\n}\n\nbutton::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 0;\n border-radius: 15px;\n background-color: #e8e8e8;\n z-index: -1;\n -webkit-box-shadow: 4px 8px 19px -3px rgba(255, 255, 255, 0.27);\n box-shadow: 4px 8px 19px -3px rgba(255, 255, 255, 0.27);\n transition: all 250ms\n}\n\nbutton:hover {\n color: #212121;\n}\n\nbutton:hover::before {\n width: 100%;\n}"},{"created":"2024-01-22T17:00:46.000Z","isPrivate":0,"projectId":"69e460","snapshot":null,"tags":null,"title":"button by Yaya12085","updated":"2024-01-22T17:00:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":24,"cssLen":1533,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" ","css":"button {\n font-size: 28px;\n color: rgb(35, 75, 83);\n background-color: rgb(217, 238, 242);\n background-image: linear-gradient(180deg, rgb(201, 194, 240) 30%, transparent 70%);\n background-repeat: no-repeat;\n background-position: center 45%;\n background-size: 100% 200%;\n padding: 10px 30px;\n border-radius: 30px;\n border: none;\n box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px;\n position: relative;\n transition: all 0.5s ease;\n outline: none;\n}\n\nbutton::before, button::after {\n content: \"\";\n inset: 0;\n position: absolute;\n border-radius: 5em;\n}\n\nbutton::before {\n background-image: radial-gradient(ellipse, rgba(204, 246, 255, 0.8) 20%, transparent 50%, transparent 200%), linear-gradient(90deg, #404040 -10%, transparent 30%, transparent 70%, #404040 110%);\n box-shadow: inset 0 0.25em 0.75em rgba(0, 0, 0, 0.8), inset 0 -0.05em 0.2em rgba(255, 255, 255, 0.4), inset 0 -1px 3px rgba(25, 196, 230, 0.75);\n background-blend-mode: overlay;\n background-repeat: no-repeat;\n background-size: 200% 80%, cover;\n background-position: center 220%;\n mix-blend-mode: overlay;\n filter: blur(0);\n}\n\nbutton::after {\n background: linear-gradient(180deg, rgba(213, 204, 255, 0.726), rgba(92, 74, 181, 0.75) 40%, transparent 80%);\n top: 0.075em;\n left: 0.75em;\n right: 0.75em;\n bottom: 1.4em;\n filter: blur(1px);\n mix-blend-mode: screen;\n}\n\nbutton:hover, button:active, button:focus {\n outline: none;\n box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;\n background-position: center calc( 45% - 0.75em );\n}\n"},{"created":"2024-01-22T17:00:46.000Z","isPrivate":0,"projectId":"a45349","snapshot":null,"tags":null,"title":"button by Peary74","updated":"2024-01-22T17:00:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":334,"cssLen":502,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 10px;\n border: none;\n background-color: transparent;\n position: relative;\n}\n\n.btn:hover > .icon {\n transform: scale(1.2);\n cursor: pointer;\n transition: .2s linear;\n}\n\n.btn:focus > .icon {\n fill: #fd1853;\n animation: grosseur .2s linear;\n}\n\n@keyframes grosseur {\n 0% {\n width: 50px;\n height: 50px;\n fill: #fd1853;\n }\n\n 100% {\n width: 30px;\n height: 30px;\n fill: #fd1853;\n }\n}\n\n\n\n\n\n"}]}},"actionData":null,"errors":null}