{"loaderData":{"0":null,"0-3":{"total":7308,"projects":[{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"706b25","snapshot":null,"tags":null,"title":"button by tarantino421","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":977,"cssLen":1347,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

","css":".box {\n --clr-shadow__border: #0096fa;\n --clr-text: #F6F4EB;\n --clr-snowflake: #F6F4EB;\n --clr-snowfall: #91C8E4;\n --size: 3rem;\n position: relative;\n outline: 1px solid var(--clr-shadow__border);\n}\n\n.button {\n font-weight: 600;\n font-size: 1.5rem;\n letter-spacing: 0.2rem;\n padding: calc(var(--size) / 3) var(--size);\n background: transparent;\n border: none;\n cursor: pointer;\n color: var(--clr-text);\n text-shadow: 2px 0px var(--clr-shadow__border), 0px 2px var(--clr-shadow__border),\n -2px 0px var(--clr-shadow__border), 0px -2px var(--clr-shadow__border);\n}\n\n.snowfall {\n width: 100%;\n height: 100%;\n bottom: 0%;\n gap: 0.3rem;\n transition: 0.5s ease-in-out;\n z-index: -1;\n opacity: 0;\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n background: linear-gradient( to bottom, var(--clr-snowfall), #ffffff);\n}\n\n.box:hover .snowfall {\n opacity: 1;\n}\n\n.snowflake {\n height: 0.3rem;\n width: 0.3rem;\n box-shadow: -30px -50px var(--clr-snowflake);\n background-color: var(--clr-snowflake);\n animation: snowfall-animation calc(0.1s * var(--i)) linear infinite;\n opacity: 1;\n}\n\n@keyframes snowfall-animation {\n 0% {\n transform: translateY(calc(-103% * var(--i)));\n }\n\n 100% {\n transform: translateY(calc(100% * var(--i)));\n opacity: 0;\n }\n}\n\n\n\n\n\n\n\n"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"251a34","snapshot":null,"tags":null,"title":"button by polina066","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":342,"cssLen":999,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn-class-name {\n --color: 180,255, 100;\n border-radius: .5em;\n transition: .3s;\n background-color: rgba(var(--color), .2);\n color: rgb(var(--color));\n fill: rgb(var(--color));\n font-family: monospace;\n font-weight: bolder;\n font-size: x-large;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n cursor: pointer;\n border: 2px solid rgb(var(--color));\n box-shadow: 0 0 10px rgba(var(--color), .4);\n outline: none;\n display: flex;\n align-items: center;\n padding: .5em 1em;\n}\n\n.btn-class-name:hover {\n box-shadow: 0 0 0 5px rgba(var(--color), .5);\n}\n\n.btn-class-name span {\n transform: scale(.8);\n transition: .3s;\n}\n\n.btn-class-name:hover span {\n transform: scale(1);\n}\n\n.btn-class-name svg {\n font-size: 0;\n transform: scale(0.5) translateX(0%) rotate(-180deg);\n transition: .3s;\n}\n\n.btn-class-name:hover svg {\n font-size: 20px;\n transform: scale(1) translateX(20%) rotate(0deg);\n}\n\n.btn-class-name:active {\n transition: 0s;\n box-shadow: 0 0 0 5px rgb(var(--color));\n}"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"65f7ab","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":638,"cssLen":757,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n \n \n\n","css":".cursor-pointer {\n cursor: pointer;\n}\n.fill-none {\n fill: none;\n}\n.stroke-orange-400 {\n stroke: #fb923c;\n}\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.hover\\:rotate-90:hover {\n --tw-rotate: 90deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.group:hover .group-hover\\:fill-orange-800 {\n fill: #9a3412;\n}\n.group:active .group-active\\:fill-orange-600 {\n fill: #ea580c;\n}\n.group:active .group-active\\:stroke-orange-200 {\n stroke: #fed7aa;\n}\n.group:active .group-active\\:duration-0 {\n transition-duration: 0s;\n}\n"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"a0ac7e","snapshot":null,"tags":null,"title":"button by mobinkakei","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":44,"cssLen":871,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n text-decoration: none;\n padding: 20px 40px;\n font-size: 1em;\n position: relative;\n margin: 32px;\n border: none;\n background-color: #26caf8;\n font-weight: 600;\n}\n\n.btn-1 {\n overflow: hidden;\n color: #fff;\n border-radius: 30px;\n box-shadow: 0 0 0 0 rgba(143, 64, 248, 0.5), 0 0 0 0 rgba(39, 200, 255, 0.5);\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.btn-1::after {\n content: \"\";\n width: 400px;\n height: 400px;\n position: absolute;\n top: -50px;\n left: -100px;\n background-color: #ff3cac;\n background-image: linear-gradient(225deg, #27d86c 0%, #26caf8 50%, #c625d0 100%);\n z-index: -1;\n transition: transform 0.5s ease;\n}\n\n.btn-1:hover {\n transform: translate(0, -6px);\n box-shadow: 10px -10px 25px 0 rgba(143, 64, 248, 0.5), -10px 10px 25px 0 rgba(39, 200, 255, 0.5);\n}\n\n.btn-1:hover::after {\n transform: rotate(150deg);\n}"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"edcf84","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T16:59:59.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: #479f76;\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: white;\n padding: 1rem;\n}\n\n.btn::before {\n content: '';\n z-index: -1;\n background-color: var(--color);\n border: 2px solid white;\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-22T16:59:59.000Z","isPrivate":0,"projectId":"5982bb","snapshot":null,"tags":null,"title":"button by Sameer2244","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":36232,"cssLen":3203,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

long click

","css":".button {\n width: 6rem;\n height: 6rem;\n background-color: #da6b34;\n border-radius: 0;\n box-shadow: 5px 5px 0px black;\n transform: translate(0,0);\n z-index: 1;\n padding: 0;\n position: relative;\n}\n\n.coin {\n position: absolute;\n z-index: -2;\n top: 50%;\n transform: translate(0,-20px);\n right: 45%;\n}\n\n.mario {\n position: absolute;\n z-index: 1;\n top: 50%;\n transform: translate(15px,200px);\n right: 45%;\n}\n\n.button:active ~ .mario {\n animation: jump2 0.6s ease-in-out;\n}\n\n.button:active {\n transform: translate(0,-15px);\n}\n\n.button:active ~ .coin {\n animation: jump 1s;\n}\n\n.button:hover {\n animation: animate 1s infinite;\n}\n\n.button-icon {\n position: relative;\n top: 25%;\n left: 63%;\n z-index: 1;\n transform: scale(1.5);\n}\n\n.overlay {\n position: absolute;\n width: 6rem;\n height: 6rem;\n background-color: #FFC07B;\n}\n\n.one {\n position: absolute;\n background-color: #DE5917;\n box-shadow: 2px 2px 0px black;\n width: 1rem;\n height: 0.35rem;\n z-index: 10;\n}\n\n.one:after {\n content: \"\";\n position: absolute;\n background-color: #DE5917;\n box-shadow: 2px 2px 0px black;\n width: 0.5rem;\n height: 0.5rem;\n transform: translate(5px,15px);\n z-index: 10;\n}\n\n.one:before {\n content: \"\";\n position: absolute;\n background-color: #DE5917;\n box-shadow: 2px 2px 0px black;\n width: 0.5rem;\n height: 0.5rem;\n transform: translate(5px,25px);\n z-index: 10;\n}\n\n.two {\n position: absolute;\n background-color: #DE5917;\n box-shadow: 2px 2px 0px black;\n width: 0.5rem;\n height: 0.5rem;\n transform: translate(-50%,50%);\n z-index: 10;\n}\n\n.two::after {\n content: \"\";\n position: absolute;\n background-color: #DE5917;\n box-shadow: 2px 2px 0px black;\n width: 0.5rem;\n height: 0.8rem;\n transform: translate(190%,-5%);\n z-index: 10;\n}\n\n.two::before {\n content: \"\";\n position: absolute;\n background-color: #DE5917;\n width: 0.7rem;\n height: 0.3rem;\n transform: translate(12px,8px);\n z-index: 10;\n}\n\n.dots {\n position: absolute;\n width: 5px;\n height: 5px;\n transform: translate(-20px,-12px);\n background-color: #000;\n}\n\n.dots::after {\n content: \"\";\n position: absolute;\n width: 5px;\n height: 5px;\n transform: translate(50px,0px);\n background-color: #000;\n}\n\n.dots2 {\n position: absolute;\n width: 5px;\n height: 5px;\n transform: translate(-20px,40px);\n background-color: #000;\n}\n\n.dots2::after {\n content: \"\";\n position: absolute;\n width: 5px;\n height: 5px;\n transform: translate(50px,0px);\n background-color: #000;\n}\n\n@keyframes animate {\n 0% {\n background-color: #FFC07B;\n }\n\n 75% {\n background-color: #DE5917;\n }\n\n 100% {\n background-color: #da6b34;\n }\n}\n\n@keyframes jump {\n 0% {\n transform: translate(0,-15px) rotateY(0deg);\n }\n\n 50% {\n transform: translate(0,-200px) rotateY(180deg);\n }\n\n 75% {\n transform: translate(0,-15px) rotateY(270deg);\n }\n\n 100% {\n transform: translate(0,-15px) rotateY(360deg);\n }\n}\n\n.button-container p {\n color: black;\n text-align: center;\n transform: translate(0,1rem);\n font-weight: bold;\n z-index: -2;\n}\n\n@keyframes jump2 {\n 0% {\n transform: translate(20px,200px);\n }\n\n 50% {\n transform: translate(20px,25px);\n }\n\n 100% {\n transform: translate(20px,200px);\n }\n}"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"23f659","snapshot":null,"tags":null,"title":"button by MuhammadHasann","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":81,"cssLen":1191,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":":root {\n --primary: rgb(122, 48, 143);\n --light: rgb(199, 95, 228);\n --text-color: rgb(184, 132, 199);\n}\n\n.button {\n overflow: hidden;\n cursor: pointer;\n position: relative;\n padding: 0.5rem 1.5rem;\n width: fit-content;\n height: fit-content;\n background-color: rgb(122, 48, 143);\n font-size: 0.75rem;\n color: white;\n border: none;\n border-radius: 0.5rem;\n box-shadow: 0px 0px 2px 1px rgb(122, 48, 143);\n transition: all 0.5s cubic-bezier(1, 0, 0, 1);\n}\n\n.button .text-button {\n position: relative;\n z-index: 10;\n}\n\n.button::before,\n.button::after {\n content: \"\";\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n transition: all 0.3s ease-in-out;\n}\n.button::before {\n left: 0;\n background-image: radial-gradient(\n circle at 0% 45%,\n rgba(16, 5, 36, 1) 19%,\n rgba(16, 5, 36, 0.26) 46%,\n rgba(16, 5, 36, 0) 100%\n );\n}\n.button::after {\n right: 0;\n background-image: radial-gradient(\n circle at 100% 45%,\n rgba(16, 5, 36, 1) 19%,\n rgba(16, 5, 36, 0.26) 46%,\n rgba(16, 5, 36, 0) 100%\n );\n}\n\n.button:hover {\n box-shadow: 0px 0px 20px 0 rgb(122, 48, 143);\n}\n\n.button:hover::before,\n.button:hover::after {\n width: 0;\n opacity: 0;\n}\n"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"89288b","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":758,"cssLen":939,"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: #181818;\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 background-color: rgba(156, 156, 156, 0.466);\n backdrop-filter: blur(4px);\n}\n"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"30cf7d","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1505,"cssLen":700,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" ","css":".Btn {\n border: none;\n border-radius: 50%;\n width: 45px;\n height: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition-duration: .4s;\n cursor: pointer;\n position: relative;\n background-color: rgb(31, 31, 31);\n overflow: hidden;\n}\n\n.svgIcon {\n transition-duration: .3s;\n}\n\n.svgIcon path {\n fill: white;\n}\n\n.text {\n position: absolute;\n color: rgb(255, 255, 255);\n width: 120px;\n font-weight: 600;\n opacity: 0;\n transition-duration: .4s;\n}\n\n.Btn:hover {\n width: 110px;\n transition-duration: .4s;\n border-radius: 30px;\n}\n\n.Btn:hover .text {\n opacity: 1;\n transition-duration: .4s;\n}\n\n.Btn:hover .svgIcon {\n opacity: 0;\n transition-duration: .3s;\n}"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"d31bd2","snapshot":null,"tags":null,"title":"button by AnshKaushal","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":302,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n border: 1.5px solid black;\n padding: 10px;\n width: 100px;\n margin: 15px;\n color: #f5f0f0;\n background-color: #101014;\n box-shadow: 3px 3px 6px #101014;\n transition: transform 0.3s ease-in-out;\n}\n\nbutton:hover {\n background-color: #f5f0f0;\n color: #101014;\n transform: scale(1.2);\n}"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"b98dbe","snapshot":null,"tags":null,"title":"button by TanimMahbub","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":569,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n /* typography */\n font-size: 22px;\n font-weight: 600;\n font-family: monospace;\n text-transform: uppercase;\n letter-spacing: 1px;\n\n /* ui */\n border: none;\n cursor: pointer;\n display: inline-block;\n padding: 12px 35px;\n border-radius: 8px;\n background: #f6781e;\n color: #fff;\n box-shadow: 0 0 0 3px #2f2e41, 0 6px 0 #2f2e41;\n transition: all 0.1s ease, background 0.3s ease;\n}\n\n/* ux */\n.button:hover,\n.button:focus {\n background: #df6108;\n}\n\n.button:active {\n box-shadow: 0 0 0 3px #2f2e41, 0 4px 0 #2f2e41;\n transform: translateY(2px);\n}\n"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"b64ec6","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":62,"cssLen":806,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n /* Variables */\n --button_radius: 0.75em;\n --button_color: #e8e8e8;\n --button_outline_color: #000000;\n font-size: 17px;\n font-weight: bold;\n border: none;\n border-radius: var(--button_radius);\n background: var(--button_outline_color);\n}\n\n.button_top {\n display: block;\n box-sizing: border-box;\n border: 2px solid var(--button_outline_color);\n border-radius: var(--button_radius);\n padding: 0.75em 1.5em;\n color: var(--button_outline_color);\n transform: translateY(-0.2em);\n transition: transform 0.1s ease;\n background: linear-gradient(45deg, #FF5F6D, #FFC371);\n}\n\nbutton:hover .button_top {\n /* Pull the button upwards when hovered */\n transform: translateY(-0.33em);\n}\n\nbutton:active .button_top {\n /* Push the button downwards when pressed */\n transform: translateY(0);\n}"}]}},"actionData":null,"errors":null}