{"loaderData":{"0":null,"0-2":{"total":6508,"projects":[{"created":"2024-01-22T17:00:46.000Z","isPrivate":0,"projectId":"e65596","snapshot":null,"tags":null,"title":"button by MuhammadHasann","updated":"2024-01-22T17:00:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":89,"cssLen":1924,"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 padding: 13px 35px;\n background: #2e323c;\n font-size: 17px;\n font-weight: 900;\n color: #FFF;\n border: 3px solid #2e323c;\n border-radius: 8px;\n transition: all .3s ease-in-out;\n}\n\np:nth-child(1) {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 17px;\n font-weight: 900;\n color: #FFF;\n transition: all .3s ease-in-out;\n z-index: -5;\n}\n\np:nth-child(2) {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 17px;\n font-weight: 900;\n color: #FFF;\n transition: all .3s ease-in-out;\n z-index: -5;\n}\n\np:nth-child(3) {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 17px;\n font-weight: 900;\n color: #FFF;\n transition: all .3s ease-in-out;\n z-index: -5;\n}\n\np:nth-child(4) {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 17px;\n font-weight: 900;\n color: #FFF;\n transition: all .3s ease-in-out;\n z-index: -5;\n}\n\nbutton:hover {\n background: transparent;\n box-shadow: 0 0 15px #2e323c;\n}\n\nbutton:hover p:nth-child(1) {\n top: 0%;\n filter: drop-shadow(0 0 5px #FFFFFF);\n z-index: 1;\n}\n\nbutton:hover p:nth-child(2) {\n top: -50%;\n filter: drop-shadow(0 0 5px #FFFFFF);\n z-index: 1;\n}\n\nbutton:hover p:nth-child(3) {\n top: 100%;\n filter: drop-shadow(0 0 5px #FFFFFF);\n z-index: 1;\n}\n\nbutton:hover p:nth-child(4) {\n top: 150%;\n filter: drop-shadow(0 0 5px #FFFFFF);\n z-index: 1;\n}\n\nbutton:active p:nth-child(1) {\n top: -20%;\n filter: drop-shadow(0 0 5px #FFFFFF);\n z-index: 1;\n}\n\nbutton:active p:nth-child(2) {\n top: -90%;\n filter: drop-shadow(0 0 5px #FFFFFF);\n z-index: 1;\n}\n\nbutton:active p:nth-child(3) {\n top: 120%;\n filter: drop-shadow(0 0 5px #FFFFFF);\n z-index: 1;\n}\n\nbutton:active p:nth-child(4) {\n top: 190%;\n filter: drop-shadow(0 0 5px #FFFFFF);\n z-index: 1;\n}"},{"created":"2024-01-22T17:00:45.000Z","isPrivate":0,"projectId":"24f9bb","snapshot":null,"tags":null,"title":"button by ozgeozkaraa01","updated":"2024-01-22T17:00:45.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":443,"cssLen":700,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n display: grid;\n place-items: center;\n background-color: #e2e8f0;\n padding: 1.5em;\n border-radius: 10px;\n box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),\n\t -6px -6px 10px -1px rgba(255,255,255,0.7);\n border: none;\n cursor: pointer;\n transition: transform 0.5s;\n}\n\n.btn:hover {\n box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.2),\n\t inset -4px -4px 6px -1px rgba(255,255,255,0.7),\n\t -0.5px -0.5px 0px rgba(255,255,255,1),\n\t 0.5px 0.5px 0px rgba(0,0,0,0.15),\n\t 0px 12px 10px -10px rgba(0,0,0,0.05);\n border: 1px solid rgba(0,0,0,0.1);\n transform: translateY(0.5em);\n}\n\n.btn svg {\n transition: transform 0.6s;\n}\n\n.btn:hover svg {\n transform: scale(0.9);\n}\n\n"},{"created":"2024-01-22T17:00:45.000Z","isPrivate":0,"projectId":"1b7cbc","snapshot":null,"tags":null,"title":"button by mrhyddenn","updated":"2024-01-22T17:00:45.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":34,"cssLen":387,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background-color: #1197cc;\n box-shadow: #094c66 4px 4px 0px;\n border-radius: 8px;\n padding: 15px 10px;\n color: #fff;\n border: none;\n font-weight: bold;\n font-size: 15px;\n text-transform: uppercase;\n min-width: 120px;\n transition: transform 200ms, box-shadow 200ms;\n}\n\nbutton:active {\n transform: translateY(4px) translateX(4px);\n box-shadow: #094c66 0px 0px 0px;\n}"},{"created":"2024-01-22T17:00:45.000Z","isPrivate":0,"projectId":"87c3f5","snapshot":null,"tags":null,"title":"button by DevPTG","updated":"2024-01-22T17:00:45.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":909,"cssLen":1159,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".chat {\n display: flex;\n position: relative;\n}\n\n.background {\n background-color: #1950ff;\n border-radius: 50%;\n box-shadow: 0 2.1px 1.3px rgba(0, 0, 0, 0.044),\n 0 5.9px 4.2px rgba(0, 0, 0, 0.054), 0 12.6px 9.5px rgba(0, 0, 0, 0.061),\n 0 25px 20px rgba(0, 0, 0, 0.1);\n height: 80px;\n left: 10px;\n position: absolute;\n top: 10px;\n width: 80px;\n}\n\n.chat-bubble {\n cursor: pointer;\n position: relative;\n}\n\n.bubble {\n transform-origin: 50%;\n transition: transform 500ms cubic-bezier(0.17, 0.61, 0.54, 0.9);\n}\n\n.line {\n fill: none;\n stroke: #ffffff;\n stroke-width: 2.75;\n stroke-linecap: round;\n transition: stroke-dashoffset 500ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.line1 {\n stroke-dasharray: 60 90;\n stroke-dashoffset: -20;\n}\n\n.line2 {\n stroke-dasharray: 67 87;\n stroke-dashoffset: -18;\n}\n\n.circle {\n fill: #ffffff;\n stroke: none;\n transform-origin: 50%;\n transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.active .bubble {\n transform: translateX(24px) translateY(4px) rotate(45deg);\n}\n\n.active .line1 {\n stroke-dashoffset: 21;\n}\n\n.active .line2 {\n stroke-dashoffset: 30;\n}\n\n.active .circle {\n transform: scale(0);\n}"},{"created":"2024-01-22T17:00:45.000Z","isPrivate":0,"projectId":"f57374","snapshot":null,"tags":null,"title":"button by SelfMadeSystem","updated":"2024-01-22T17:00:45.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1834,"cssLen":1686,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"/* Note the transparent background :) */\n.btn {\n border-radius: 0.5em;\n font-size: larger;\n height: 3em;\n width: 8em;\n position: relative;\n border: none;\n background-color: transparent;\n isolation: isolate;\n}\n\n.btn > span {\n position: relative;\n pointer-events: none;\n}\n\n.ripple-container {\n position: absolute;\n inset: -0.3em;\n display: grid;\n grid-template-columns: repeat(16, 0.5em);\n border-radius: 0.8em;\n padding: 0.3em;\n mask: linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n /* I forgor that I need the two mask composites because of firefoxxxxxx */\n mask-composite: exclude;\n mask-composite: xor;\n -webkit-mask: linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n -webkit-mask-composite: exclude;\n -webkit-mask-composite: xor;\n overflow: hidden;\n}\n\n.ripple-container > span {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.ripple-container > span::after {\n content: \"\";\n pointer-events: none;\n position: absolute;\n background-color: hsl(218, 68%, 65%);\n transition: width 0.5s ease-out, height 0.5s ease-out, opacity 1s;\n width: 18em;\n height: 18em;\n opacity: 0;\n border-radius: 999em;\n}\n\n.ripple-container > span:active::after {\n transition: 0s;\n width: 0em;\n height: 0em;\n opacity: 1;\n}\n\n.ripple-container::before {\n content: \"\";\n pointer-events: none;\n position: absolute;\n background-color: hsla(218, 68%, 65%, 0.5);\n width: 13em;\n height: 13em;\n border-radius: 999em;\n transition: transform 0.25s ease-out;\n transform: translate(-25%, -25%) scale(0);\n}\n\n.ripple-container:hover::before {\n transform: translate(-25%, -25%) scale(1);\n}\n"},{"created":"2024-01-22T17:00:45.000Z","isPrivate":0,"projectId":"cb96bf","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:45.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":858,"cssLen":1087,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".Btn {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: 45px;\n height: 45px;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n transition-duration: 0.3s;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);\n background-color: rgb(53, 53, 53);\n}\n\n/* plus sign */\n.svgWrapper {\n width: 100%;\n transition-duration: 0.3s;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.svgIcon {\n width: 17px;\n}\n\n/* text */\n.text {\n position: absolute;\n right: 0%;\n width: 0%;\n opacity: 0;\n color: white;\n font-size: 1.2em;\n font-weight: 600;\n transition-duration: 0.3s;\n}\n/* hover effect on button width */\n.Btn:hover {\n width: 125px;\n border-radius: 40px;\n transition-duration: 0.3s;\n}\n\n.Btn:hover .svgWrapper {\n width: 30%;\n transition-duration: 0.3s;\n padding-left: 20px;\n}\n/* hover effect button's text */\n.Btn:hover .text {\n opacity: 1;\n width: 70%;\n transition-duration: 0.3s;\n padding-right: 10px;\n}\n/* button click effect*/\n.Btn:active {\n transform: translate(2px, 2px);\n}\n"},{"created":"2024-01-22T17:00:45.000Z","isPrivate":0,"projectId":"b5c369","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:45.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":875,"cssLen":747,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n\n","css":".button {\n color: white;\n background-color: #222;\n font-weight: 600;\n border-radius: 0.5rem;\n font-size: 1rem;\n line-height: 2rem;\n padding-left: 2rem;\n padding-right: 2rem;\n padding-top: 0.7rem;\n padding-bottom: 0.7rem;\n text-align: center;\n margin-right: 0.5rem;\n display: inline-flex;\n align-items: center;\n border: none;\n}\n\n.button:hover {\n background-color: #fff;\n color: #222;\n border: 2px solid #222;\n}\n\n.button:hover svg {\n fill: #222;\n}\n\n.button svg {\n display: inline;\n width: 1.3rem;\n height: 1.3rem;\n margin-right: 0.75rem;\n color: white;\n}\n\n.button:hover svg {\n animation: spin_357 0.5s linear;\n}\n\n@keyframes spin_357 {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotatey(360deg);\n }\n}\n\n"},{"created":"2024-01-22T17:00:45.000Z","isPrivate":0,"projectId":"66180e","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:45.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":685,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background: linear-gradient(-45deg, #3f00b5, #9f69fe, #27c8b7, #3f00b5);\n background-size: 800% 400%;\n padding: 1em 2em;\n display: inline-block;\n border: none;\n border-radius: 10px;\n font-size: 17px;\n font-weight: 700;\n color: white;\n transition: all .5s ease-in-out;\n animation: gradient 10s infinite cubic-bezier(.62, .28, .23, .99) both;\n}\n\nbutton:hover {\n animation: gradient 3s infinite;\n transform: scale(1.05);\n}\n\nbutton:active {\n animation: gradient 3s infinite;\n transform: scale(0.8);\n}\n\n@keyframes gradient {\n 0% {\n background-position: 0% 50%;\n }\n\n 50% {\n background-position: 100% 50%;\n }\n\n 100% {\n background-position: 0% 50%;\n }\n}"},{"created":"2024-01-22T17:00:45.000Z","isPrivate":0,"projectId":"dbddfe","snapshot":null,"tags":null,"title":"button by Creatlydev","updated":"2024-01-22T17:00:45.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":654,"cssLen":534,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n --bg: linear-gradient(180deg,\n hsla(0, 0%, 100%, .1),\n hsla(0, 0%, 100%, 0)),\n hsl(128, 52%, 45%);\n box-shadow: 0 1px 2px #25114f66, 0 0 0 1px hsla(128, 50%, 45%, 0.761);\n background-color: transparent;\n border: none;\n line-height: 1;\n display: flex;\n align-items: center;\n gap: .5rem;\n padding: .25rem .5rem;\n cursor: pointer;\n padding-right: 1rem;\n font-weight: 600;\n color: #fff;\n background: var(--bg);\n white-space: nowrap;\n border-radius: 6px;\n border: 1px solid #fff3;\n}"},{"created":"2024-01-22T17:00:45.000Z","isPrivate":0,"projectId":"9e1e50","snapshot":null,"tags":null,"title":"button by Gautammsharma","updated":"2024-01-22T17:00:45.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":45,"cssLen":569,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".comic-btn {\n display: inline-block;\n padding: 1rem 2rem;\n border-radius: 2rem;\n border: none;\n background-color: #ff7675;\n color: #fff;\n font-size: 1.5rem;\n font-weight: bold;\n text-transform: uppercase;\n text-shadow: 2px 2px #000;\n box-shadow: 6px 6px 0px #d63031;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.comic-btn:hover {\n background-color: #fdcb6e;\n box-shadow: 4px 4px 0px #e17055;\n transform: translate(2px, 2px);\n}\n\n.comic-btn:active {\n background-color: #e17055;\n box-shadow: 0px 0px 0px #d63031;\n transform: translate(6px, 6px);\n}\n"},{"created":"2024-01-22T17:00:45.000Z","isPrivate":0,"projectId":"9b5f7f","snapshot":null,"tags":null,"title":"button by MuhammadHasann","updated":"2024-01-22T17:00:45.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1642,"cssLen":3168,"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 padding: 0;\n width: 135px;\n height: 65px;\n background: transparent;\n font-size: 17px;\n border: 1px solid #ffffff1c;\n border-radius: 8px;\n box-shadow: inset 0 0 10px #ffffff1c;\n}\n\nbutton::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 135px;\n height: 65px;\n background: radial-gradient(circle at 100% -50%, #ffffff69 45%, #d4d4d44f 60%, #ffffff36 2%);\n /* background-size: 200%; */\n background-repeat: no-repeat;\n filter: opacity(.3) blur(.3em);\n}\n\nbutton::after {\n content: \"\";\n position: absolute;\n top: 120%;\n left: 0;\n transform: perspective(1.5em) rotateX(35deg) scale(1, .6);\n height: 100%;\n width: 100%;\n background-color: #fbfd7b;\n filter: blur(2em);\n opacity: 0;\n pointer-events: none;\n}\n\nbutton p {\n display: inline-block;\n width: 135px;\n line-height: 65px;\n font-size: 17px;\n font-weight: 900;\n color: #d6d6d6;\n filter: blur(.02em);\n z-index: 5;\n}\n\nbutton .svg-1 {\n position: absolute;\n top: 50%;\n left: 20%;\n transform: translate(0, -50%) rotate(45deg);\n width: 2.5rem;\n height: auto;\n filter: blur(.1rem) opacity(.5);\n z-index: -5;\n}\n\n.fil0 {\n fill: #935E28\n}\n\nbutton:hover {\n filter: blur(.05em);\n animation: lightBox 1s ease-in-out forwards;\n}\n\nbutton:hover::after {\n animation: light 1s ease-in-out forwards;\n}\n\nbutton:hover p {\n animation: lightText 1s ease-in-out forwards;\n}\n\n@keyframes lightBox {\n 0% {\n border: 1px solid #fbfd7b;\n box-shadow: 0 0 5px 0px #fbfd7b8a, inset 0 0 10px #fbfd7b8a;\n }\n\n 20% {\n border: 1px solid #ffffff1c;\n box-shadow: none;\n }\n\n 30% {\n border: 1px solid #fbfd7b;\n box-shadow: 0 0 10px 0px #fbfd7b8a, inset 0 0 15px #fbfd7b8a;\n }\n\n 38% {\n border: 1px solid #ffffff1c;\n box-shadow: none;\n }\n\n 45% {\n border: 1px solid #fbfd7b;\n box-shadow: 0 0 15px 0px #fbfd7b8a, inset 0 0 20px #fbfd7b8a;\n }\n\n 50% {\n border: 1px solid #ffffff1c;\n box-shadow: none;\n }\n\n 53% {\n border: 1px solid #fbfd7b;\n box-shadow: 0 0 15px 0px #fbfd7b8a, inset 0 0 25px #fbfd7b8a;\n }\n\n 65% {\n border: 1px solid #ffffff1c;\n box-shadow: none;\n }\n\n 100% {\n border: 1px solid #fbfd7b;\n box-shadow: 0 0 15px 0px #fbfd7b8a, inset 0 0 25px #fbfd7b8a;\n }\n}\n\n@keyframes light {\n 0% {\n opacity: .7;\n }\n\n 20% {\n opacity: 0;\n }\n\n 30% {\n opacity: .7;\n }\n\n 38% {\n opacity: 0;\n }\n\n 45% {\n opacity: .7;\n }\n\n 50% {\n opacity: 0;\n }\n\n 53% {\n opacity: .7;\n }\n\n 65% {\n opacity: 0;\n }\n\n 100% {\n opacity: .7;\n }\n}\n\n@keyframes lightText {\n 0% {\n color: #fbfd7b;\n text-shadow: 0 0 5px #fbfd7b8a;\n }\n\n 20% {\n color: #ffffff;\n text-shadow: none;\n }\n\n 30% {\n color: #fbfd7b;\n text-shadow: 0 0 10px #fbfd7b8a;\n }\n\n 38% {\n color: #ffffff;\n text-shadow: none;\n }\n\n 45% {\n color: #fbfd7b;\n text-shadow: 0 0 15px #fbfd7b8a;\n }\n\n 50% {\n color: #ffffff;\n text-shadow: none;\n }\n\n 53% {\n color: #fbfd7b;\n text-shadow: 0 0 15px #fbfd7b8a;\n }\n\n 65% {\n color: #ffffff;\n text-shadow: none;\n }\n\n 100% {\n color: #fbfd7b;\n text-shadow: 0 0 15px #fbfd7b8a;\n }\n}"},{"created":"2024-01-22T17:00:45.000Z","isPrivate":0,"projectId":"60a693","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:45.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":879,"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: #053eff;\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(214, 214, 214, 0.466);\n backdrop-filter: blur(4px);\n}\n"}]}},"actionData":null,"errors":null}