{"loaderData":{"0":null,"0-2":{"total":7072,"projects":[{"created":"2024-01-22T17:02:34.000Z","isPrivate":0,"projectId":"9ac36f","snapshot":null,"tags":null,"title":"checkbox by catraco","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":755,"cssLen":899,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n\n","css":"/*------ Settings ------*/\n.container {\n --color: #a5a5b0;\n --size: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: pointer;\n font-size: var(--size);\n user-select: none;\n fill: var(--color);\n}\n\n.container .check-regular {\n position: absolute;\n animation: keyframes-fill .5s;\n}\n\n.container .check-solid {\n position: absolute;\n display: none;\n animation: keyframes-fill .5s;\n}\n\n/* ------ On check event ------ */\n.container input:checked ~ .check-regular {\n display: none;\n}\n\n.container input:checked ~ .check-solid {\n display: block;\n}\n\n/* ------ Hide the default checkbox ------ */\n.container input {\n position: absolute;\n opacity: 0;\n height: 0;\n width: 0;\n}\n\n/* ------ Animation ------ */\n@keyframes keyframes-fill {\n 0% {\n transform: scale(0);\n opacity: 0;\n }\n\n 50% {\n transform: scale(1.2) rotate(15deg);\n }\n}"},{"created":"2024-01-22T17:02:33.000Z","isPrivate":0,"projectId":"4feed2","snapshot":null,"tags":null,"title":"checkbox by adamgiebl","updated":"2024-01-22T17:02:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":173,"cssLen":1243,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n Checkbox\n \n \n","css":".checkbox {\n display: flex;\n align-items: center;\n margin: 10px;\n font-family: Arial, sans-serif;\n color: black;\n}\n\n.checkbox input {\n display: none;\n}\n\n.checkbox .checkmark {\n width: 28px;\n height: 28px;\n border-radius: 10px;\n background-color: #ffffff2b;\n box-shadow: rgba(0, 0, 0, 0.62) 0px 0px 5px inset, rgba(0, 0, 0, 0.21) 0px 0px 0px 24px inset,\n #22cc3f 0px 0px 0px 0px inset, rgba(224, 224, 224, 0.45) 0px 1px 0px 0px;\n cursor: pointer;\n position: relative;\n}\n\n.checkbox .checkmark::after {\n content: \"\";\n width: 18px;\n height: 18px;\n border-radius: 5px;\n background-color: #e3e3e3;\n box-shadow: transparent 0px 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 6px 6px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transition: background-color 0.3s ease-in-out;\n}\n\n.checkbox input:checked + .checkmark {\n background-color: #22cc3f;\n box-shadow: rgba(0, 0, 0, 0.62) 0px 0px 5px inset, #22cc3f 0px 0px 0px 2px inset, #22cc3f 0px 0px 0px 24px inset,\n rgba(224, 224, 224, 0.45) 0px 1px 0px 0px;\n}\n\n.checkbox input:checked + .checkmark::after {\n background-color: white;\n}\n\n.checkbox .label {\n margin-right: 10px;\n user-select: none;\n font-weight: 700;\n cursor: pointer;\n}"},{"created":"2024-01-22T17:02:33.000Z","isPrivate":0,"projectId":"cea2a9","snapshot":null,"tags":null,"title":"checkbox by andrew-demchenk0","updated":"2024-01-22T17:02:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":939,"cssLen":433,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n","css":".container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n.container {\n display: block;\n position: relative;\n cursor: pointer;\n user-select: none;\n}\n\n.container svg {\n position: relative;\n top: 0;\n left: 0;\n height: 50px;\n width: 50px;\n transition: all 0.3s;\n fill: #666;\n}\n\n.container svg:hover {\n transform: scale(1.1);\n}\n\n.container input:checked ~ svg {\n fill: #ffeb49;\n}\n"},{"created":"2024-01-22T17:02:33.000Z","isPrivate":0,"projectId":"7b92c6","snapshot":null,"tags":null,"title":"checkbox by cssbuttons-io","updated":"2024-01-22T17:02:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":132,"cssLen":1125,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

","css":".cbx {\n position: relative;\n top: 1px;\n width: 27px;\n height: 27px;\n border: 1px solid #c8ccd4;\n border-radius: 3px;\n vertical-align: middle;\n transition: background 0.1s ease;\n cursor: pointer;\n display: block;\n}\n\n.cbx:after {\n content: '';\n position: absolute;\n top: 2px;\n left: 8px;\n width: 7px;\n height: 14px;\n opacity: 0;\n transform: rotate(45deg) scale(0);\n border-right: 2px solid #fff;\n border-bottom: 2px solid #fff;\n transition: all 0.3s ease;\n transition-delay: 0.15s;\n}\n\n.lbl {\n margin-left: 5px;\n vertical-align: middle;\n cursor: pointer;\n}\n\n#cbx:checked ~ .cbx {\n border-color: transparent;\n background: #6871f1;\n animation: jelly 0.6s ease;\n}\n\n#cbx:checked ~ .cbx:after {\n opacity: 1;\n transform: rotate(45deg) scale(1);\n}\n\n.cntr {\n position: relative;\n}\n\n@keyframes jelly {\n from {\n transform: scale(1, 1);\n }\n\n 30% {\n transform: scale(1.25, 0.75);\n }\n\n 40% {\n transform: scale(0.75, 1.25);\n }\n\n 50% {\n transform: scale(1.15, 0.85);\n }\n\n 65% {\n transform: scale(0.95, 1.05);\n }\n\n 75% {\n transform: scale(1.05, 0.95);\n }\n\n to {\n transform: scale(1, 1);\n }\n}\n\n.hidden-xs-up {\n display: none!important;\n}\n"},{"created":"2024-01-22T17:02:33.000Z","isPrivate":0,"projectId":"ac7a45","snapshot":null,"tags":null,"title":"checkbox by Nawsome","updated":"2024-01-22T17:02:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":138,"cssLen":641,"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":".clear {\n clear: both;\n}\n\n.checkBox {\n display: block;\n cursor: pointer;\n width: 30px;\n height: 30px;\n border: 3px solid rgba(255, 255, 255, 0);\n border-radius: 10px;\n position: relative;\n overflow: hidden;\n box-shadow: 0px 0px 0px 2px #fff;\n}\n\n.checkBox div {\n width: 60px;\n height: 60px;\n background-color: #fff;\n top: -52px;\n left: -52px;\n position: absolute;\n transform: rotateZ(45deg);\n z-index: 100;\n}\n\n.checkBox input[type=checkbox]:checked + div {\n left: -10px;\n top: -10px;\n}\n\n.checkBox input[type=checkbox] {\n position: absolute;\n left: 50px;\n visibility: hidden;\n}\n\n.transition {\n transition: 300ms ease;\n}"},{"created":"2024-01-22T17:02:33.000Z","isPrivate":0,"projectId":"90b4d8","snapshot":null,"tags":null,"title":"checkbox by andrew-demchenk0","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":110,"cssLen":877,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n","css":".container {\n --input-focus: #2d8cf0;\n --input-out-of-focus: #ccc;\n --bg-color: #fff;\n --bg-color-alt: #666;\n --main-color: #323232;\n position: relative;\n cursor: pointer;\n}\n\n.container input {\n position: absolute;\n opacity: 0;\n}\n\n.checkmark {\n width: 30px;\n height: 30px;\n position: relative;\n top: 0;\n left: 0;\n border: 2px solid var(--main-color);\n border-radius: 5px;\n box-shadow: 4px 4px var(--main-color);\n background-color: var(--input-out-of-focus);\n transition: all 0.3s;\n}\n\n.container input:checked ~ .checkmark {\n background-color: var(--input-focus);\n}\n\n.checkmark:after {\n content: \"\";\n width: 7px;\n height: 15px;\n position: absolute;\n top: 2px;\n left: 8px;\n display: none;\n border: solid var(--bg-color);\n border-width: 0 2.5px 2.5px 0;\n transform: rotate(45deg);\n}\n\n.container input:checked ~ .checkmark:after {\n display: block;\n}\n"},{"created":"2024-01-22T17:00:48.000Z","isPrivate":0,"projectId":"aafbe0","snapshot":null,"tags":null,"title":"button by cybrejon","updated":"2024-01-22T17:00:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":526,"cssLen":743,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n","css":"a {\n color: rgba(255, 255, 255, 0.692);\n padding: 10px 15px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n text-shadow: 0 0 20px rgba(255, 255, 255, 0.397);\n background: rgba(255, 255, 255, 0.068);\n overflow: hidden;\n font-size: 0.9rem;\n font-weight: 600;\n gap: 8px;\n border-radius: 5px;\n margin: 0 5px;\n transition: 0.2s;\n border: 1px solid transparent;\n}\n\na:hover {\n border-color: rgba(255, 255, 255, 0.623);\n background: linear-gradient(\n to bottom,\n rgba(255, 255, 255, 0.144),\n rgba(255, 255, 255, 0.247),\n rgba(255, 255, 255, 0.39)\n );\n box-shadow: 0 6px rgba(255, 255, 255, 0.623);\n transform: translateY(-6px);\n}\n\na:active {\n transform: translateY(2px);\n box-shadow: none;\n}\n"},{"created":"2024-01-22T17:00:48.000Z","isPrivate":0,"projectId":"8b9272","snapshot":null,"tags":null,"title":"button by glisovic01","updated":"2024-01-22T17:00:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":728,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n display: inline-block;\n font-family: sans-serif;\n font-weight: 600;\n font-size: 16px;\n color: #fff;\n margin: 1rem auto;\n padding: 0.7rem 2rem;\n border-radius: 30em;\n border-style: none;\n position: relative;\n z-index: 1;\n overflow: hidden;\n text-decoration: none;\n text-transform: uppercase;\n letter-spacing: 2px;\n background-color: transparent;\n box-shadow: 1px 1px 12px #000000;\n}\n\n.btn::before {\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n background-color: #fff;\n transform: translateX(-101%);\n transition: all .3s ease;\n z-index: -1;\n}\n\n.btn:hover {\n color: #272727;\n transition: all .3s ease;\n}\n\n.btn:hover::before {\n transform: translateX(0);\n}"},{"created":"2024-01-22T17:00:48.000Z","isPrivate":0,"projectId":"aa25ec","snapshot":null,"tags":null,"title":"button by Yaya12085","updated":"2024-01-22T17:00:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":807,"cssLen":496,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n display: flex;\n background-color: #0A66C2;\n color: #ffffff;\n padding: 0.5rem 1.4rem;\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 700;\n text-align: center;\n vertical-align: middle;\n align-items: center;\n border-radius: 0.5rem;\n gap: 0.75rem;\n border: none;\n cursor: pointer;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n transition: .6s ease;\n}\n\n.button svg {\n height: 30px;\n}\n\n.button:hover {\n box-shadow: none;\n}"},{"created":"2024-01-22T17:00:48.000Z","isPrivate":0,"projectId":"b8d33f","snapshot":null,"tags":null,"title":"button by doniaskima","updated":"2024-01-22T17:00:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":52,"cssLen":1970,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn-11,\n.btn-11 *,\n.btn-11 :after,\n.btn-11 :before,\n.btn-11:after,\n.btn-11:before {\n border: 0 solid;\n box-sizing: border-box;\n}\n\n.btn-11 {\n -webkit-tap-highlight-color: transparent;\n -webkit-appearance: button;\n background-color: #000;\n background-image: none;\n color: #fff;\n cursor: pointer;\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,\n Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,\n Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n font-size: 100%;\n font-weight: 900;\n line-height: 1.5;\n margin: 0;\n -webkit-mask-image: -webkit-radial-gradient(#000, #fff);\n padding: 0;\n text-transform: uppercase;\n}\n\n.btn-11:disabled {\n cursor: default;\n}\n\n.btn-11:-moz-focusring {\n outline: auto;\n}\n\n.btn-11 svg {\n display: block;\n vertical-align: middle;\n}\n\n.btn-11 [hidden] {\n display: none;\n}\n\n.btn-11 {\n border-radius: 99rem;\n border-width: 2px;\n overflow: hidden;\n padding: 0.8rem 3rem;\n position: relative;\n}\n\n.btn-11 span {\n mix-blend-mode: difference;\n}\n\n.btn-11:before {\n -webkit-animation: bg-scroll 3s linear infinite;\n animation: bg-scroll 3s linear infinite;\n -webkit-animation-play-state: paused;\n animation-play-state: paused;\n background: repeating-linear-gradient(\n 45deg,\n hsla(0, 0%, 100%, 0.2),\n hsla(0, 0%, 100%, 0.2) 0.7%,\n transparent 0,\n transparent 4%\n );\n content: \"\";\n display: block;\n height: 300%;\n left: -100%;\n opacity: 0;\n position: absolute;\n top: 0;\n transition: opacity 0.3s, background-color 0.2s;\n width: 300%;\n}\n\n.btn-11:hover:before {\n -webkit-animation-play-state: running;\n animation-play-state: running;\n opacity: 1;\n}\n\n.btn-11:active:before {\n background-color: #fff;\n}\n\n@-webkit-keyframes bg-scroll {\n 0% {\n transform: translateX(0);\n }\n\n to {\n transform: translateX(33%);\n }\n}\n\n@keyframes bg-scroll {\n 0% {\n transform: translateX(0);\n }\n\n to {\n transform: translateX(33%);\n }\n}\n"},{"created":"2024-01-22T17:00:48.000Z","isPrivate":0,"projectId":"9e0478","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":45,"cssLen":658,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n display: flex;\n align-items: center;\n justify-content: center;\n line-height: 1;\n text-decoration: none;\n color: #0000FF;\n font-size: 17px;\n border-radius: 5px;\n width: 160px;\n height: 40px;\n border: 1px solid #0000FF;\n position: relative;\n transition: 0.3s;\n background-color: #ffffff;\n font-weight: 600;\n}\n\n.button::before {\n content: \"FREE\";\n display: block;\n font-size: 13px;\n background-color: #0000FF;\n color: #fff;\n border-radius: 3px;\n padding: 3px 5px;\n position: absolute;\n top: 0;\n left: 0;\n transform: translate(-5px, -30%);\n transition: .3s;\n}\n\n.button:hover::before {\n transform: translate(-5px, -50%);\n}\n\n"},{"created":"2024-01-22T17:00:48.000Z","isPrivate":0,"projectId":"ac089d","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1950,"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 #2867b2 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: #2867b2;\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}"}]}},"actionData":null,"errors":null}