{"loaderData":{"0":null,"0-3":{"total":7307,"projects":[{"created":"2024-01-22T17:00:13.000Z","isPrivate":0,"projectId":"ee384f","snapshot":null,"tags":null,"title":"button by AqFox","updated":"2024-01-22T17:00:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":86,"cssLen":975,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n position: relative;\n display: inline-block;\n width: auto;\n height: auto;\n background-color: transparent;\n border: none;\n cursor: pointer;\n margin: 0px 25px 15px;\n min-width: 150px;\n}\n\n.btn span {\n position: relative;\n display: inline-block;\n font-size: 14px;\n font-weight: bold;\n letter-spacing: 2px;\n text-transform: uppercase;\n top: 0;\n left: 0;\n width: 100%;\n padding: 15px 20px;\n transition: 0.3s;\n}\n\n.btn-1::before {\n background-color: #004dff;\n transition: 0.3s ease-out;\n}\n\n.btn-1 span {\n color: rgb(255,255,255);\n border: 1px solid #004dff;\n transition: 0.2s 0.1s;\n}\n\n.btn-1 span:hover {\n color: #004dff;\n transition: 0.2s 0.1s;\n}\n\n:active, :hover, :focus {\n outline: 0!important;\n outline-offset: 0;\n}\n\n::before,\n::after {\n position: absolute;\n content: \"\";\n}\n\n.btn.hover-filled-slide-left::before {\n top: 0;\n bottom: 0;\n left: 0;\n height: 100%;\n width: 100%;\n}\n\n.btn.hover-filled-slide-left:hover::before {\n width: 0%;\n}"},{"created":"2024-01-22T17:00:13.000Z","isPrivate":0,"projectId":"e304b3","snapshot":null,"tags":null,"title":"button by misaraadel","updated":"2024-01-22T17:00:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":6195,"cssLen":1635,"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
\n \n \n\n \n
\n \n \n\n\n \n

","css":".socail-media {\n display: flex;\n align-items: center;\n align-content: center;\n justify-content: center;\n gap: 20px;\n list-style: none;\n}\n\n.socail-media li a {\n width: 50px;\n height: 50px;\n background-color: #5b9d15;\n display: flex;\n overflow: hidden;\n align-items: center;\n align-content: center;\n justify-content: center;\n position: relative;\n z-index: 9;\n border: 1px solid #5b9d15;\n}\n\n.socail-media li a svg {\n width: 24px;\n height: 24px;\n -o-object-fit: contain;\n object-fit: contain;\n filter: invert(100%) sepia(0%) saturate(7455%) hue-rotate(57deg) brightness(108%) contrast(105%);\n}\n\n.socail-media li a::after {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n -webkit-clip-path: polygon(0 0, 100% 0, 0 0, 0 100%);\n clip-path: polygon(0 0, 100% 0, 0 0, 0 100%);\n background-color: #fff;\n z-index: -1;\n top: 0;\n left: 0;\n opacity: 0;\n}\n\n.socail-media li a:hover::after {\n animation: sideClip 0.5s linear;\n -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\n opacity: 1;\n}\n\n.socail-media li a:hover svg {\n animation: fadeInLeft 0.3s linear both;\n filter: invert(52%) sepia(85%) saturate(2286%) hue-rotate(54deg) brightness(92%) contrast(84%);\n}\n\n@keyframes sideClip {\n 0% {\n clip-path: polygon(0 0, 100% 0, 0 0, 0 100%);\n }\n\n 50% {\n clip-path: polygon(0 0, 100% 0, 0 100%, 0 100%);\n }\n\n 100% {\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\n }\n}\n\n@keyframes fadeInLeft {\n from {\n opacity: 0;\n transform: translate3d(-100%, 0, 0);\n }\n\n to {\n opacity: 1;\n transform: none;\n }\n}\n"},{"created":"2024-01-22T17:00:12.000Z","isPrivate":0,"projectId":"a59dfd","snapshot":null,"tags":null,"title":"button by Satwinder04","updated":"2024-01-22T17:00:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":58,"cssLen":1385,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".complex-animated-button {\n --primary-color: #ff7f50;\n --secondary-color: #ffa07a;\n --border-radius: 8px;\n --shadow-color: rgba(0, 0, 0, 0.2);\n --shadow-offset: 2px;\n --shadow-blur: 4px;\n --ripple-color: rgba(255, 255, 255, 0.5);\n background: linear-gradient(to right, var(--primary-color), var(--secondary-color));\n border: none;\n border-radius: var(--border-radius);\n color: white;\n font-size: 1.2rem;\n padding: 1rem 2rem;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n box-shadow: var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) var(--shadow-color);\n transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;\n}\n\n.complex-animated-button:hover {\n transform: scale(1);\n background: linear-gradient(to right, var(--secondary-color), var(--primary-color));\n}\n\n.complex-animated-button:focus {\n outline: none;\n}\n\n.complex-animated-button:active {\n animation: ripple 0.6s ease-out;\n}\n\n@keyframes ripple {\n to {\n transform: scale(1);\n opacity: 0;\n }\n}\n\n.complex-animated-button::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0;\n height: 0;\n background-color: var(--ripple-color);\n border-radius: 50%;\n opacity: 0.5;\n}\n\n.complex-animated-button:active::after {\n width: 100%;\n height: 100%;\n transition: width 0.3s ease-out, height 0.3s ease-out;\n}\n"},{"created":"2024-01-22T17:00:12.000Z","isPrivate":0,"projectId":"104c7f","snapshot":null,"tags":null,"title":"button by AmIt-DasIT","updated":"2024-01-22T17:00:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":204,"cssLen":614,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".svg-wrapper {\n position: relative;\n width: 190px;\n height: 60px;\n text-align: center;\n cursor: pointer;\n}\n\n.shape {\n stroke-dasharray: 100 300;\n stroke-dashoffset: -297;\n fill: transparent;\n stroke: rgb(220, 20, 60);\n stroke-width: 5px;\n transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;\n}\n\n.text {\n font-size: 22px;\n top: -52px;\n position: relative;\n font-weight: 600;\n color: white;\n}\n\n.svg-wrapper:hover .shape {\n stroke-width: 2px;\n stroke-dashoffset: 0;\n stroke-dasharray: 760;\n}\n\n.svg-wrapper:hover {\n background-color: rgba(220, 20, 60, 0.2);\n transition: 1s;\n}\n\n"},{"created":"2024-01-22T17:00:12.000Z","isPrivate":0,"projectId":"d6a190","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":452,"cssLen":706,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".inbox-btn {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n border: none;\n box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.082);\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n background-color: #464646;\n cursor: pointer;\n transition: all 0.3s;\n}\n.inbox-btn svg path {\n fill: white;\n}\n.inbox-btn svg {\n height: 17px;\n transition: all 0.3s;\n}\n.msg-count {\n position: absolute;\n top: -5px;\n right: -5px;\n background-color: rgb(255, 255, 255);\n border-radius: 50%;\n font-size: 0.7em;\n color: rgb(0, 0, 0);\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.inbox-btn:hover {\n transform: scale(1.1);\n}\n"},{"created":"2024-01-22T17:00:11.000Z","isPrivate":0,"projectId":"e9f679","snapshot":null,"tags":null,"title":"button by xXJollyHAKERXx","updated":"2024-01-22T17:00:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":41,"cssLen":534,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button1 {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n font-size: 16px;\n font-weight: 400;\n height: 45px;\n width: 85px;\n border: 0px solid;\n background-image: linear-gradient(45deg,blue,#00f0a0,blue);\n background-size: 500% 400%;\n color: white;\n border-radius: 50px;\n transition: 0.6s all;\n}\n\n.button1:hover {\n background-position: 75% 50%;\n transform: perspective(100px)\n}\n\n.button1:active {\n transform: scale(0.95);\n transition: 0.1s;\n}"},{"created":"2024-01-22T17:00:11.000Z","isPrivate":0,"projectId":"86775a","snapshot":null,"tags":null,"title":"button by TroyRandall","updated":"2024-01-22T17:00:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":113,"cssLen":1302,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Edit Post\n ⚙️\n

\n","css":".edit-post {\n position: relative;\n background: #ffffff;\n color: #000;\n padding: 15px;\n margin: 10px;\n border-radius: 10px;\n width: 40px;\n height: 40px;\n font-size: 17px;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n.edit-tooltip {\n position: absolute;\n top: 0px;\n font-size: 14px;\n background: #ffffff;\n color: #ffffff;\n padding: 5px 8px;\n border-radius: 5px;\n box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);\n opacity: 0;\n pointer-events: none;\n transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n width: 150px;\n}\n\n.edit-tooltip::before {\n position: absolute;\n content: \"\";\n height: 8px;\n width: 8px;\n background: #ffffff;\n bottom: -3px;\n left: 50%;\n transform: translate(-50%) rotate(45deg);\n transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n.edit-post:hover .edit-tooltip {\n top: -45px;\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n}\n\n.edit-icon {\n font-size: 24px;\n}\n\n.edit-post:hover,\n.edit-post:hover .edit-tooltip,\n.edit-post:hover .edit-tooltip::before {\n background: linear-gradient(320deg, rgb(3, 77, 146), rgb(0, 60, 255));\n color: #ffffff;\n}"},{"created":"2024-01-22T17:00:11.000Z","isPrivate":0,"projectId":"a1f6be","snapshot":null,"tags":null,"title":"button by Sujanthapast0","updated":"2024-01-22T17:00:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":811,"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: pink;\n font-weight: bolder;\n font-size: 15px;\n -webkit-box-shadow: 0px 0px 1px;\n box-shadow: 0px 0px 1px;\n -webkit-transform: all 2s esase;\n -ms-transform: all 2s esase;\n transform: all 2s esase;\n -webkit-transition-duration: .3s;\n transition-duration: .3s;\n}\n\nbutton:hover {\n -webkit-transform: translateY(-10px);\n -ms-transform: translateY(-10px);\n transform: translateY(-10px);\n -webkit-box-shadow: 0px 7px 1px rgb(0, 0, 0);\n box-shadow: 0px 7px 1px rgb(0, 0, 0);\n border: 1px solid black;\n}\n\nbutton:active {\n -webkit-transform: translateY(10px);\n -ms-transform: translateY(10px);\n transform: translateY(10px);\n -webkit-box-shadow: 0px 0px 1px;\n box-shadow: 0px 0px 1px;\n}\n \n\n"},{"created":"2024-01-22T17:00:11.000Z","isPrivate":0,"projectId":"639dee","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T17:00:11.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-purple-400 {\n stroke: #c084fc;\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-purple-800 {\n fill: #6b21a8;\n}\n.group:active .group-active\\:fill-purple-600 {\n fill: #9333ea;\n}\n.group:active .group-active\\:stroke-purple-200 {\n stroke: #e9d5ff;\n}\n.group:active .group-active\\:duration-0 {\n transition-duration: 0s;\n}\n"},{"created":"2024-01-22T17:00:11.000Z","isPrivate":0,"projectId":"1e1487","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T17:00:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":176,"cssLen":985,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Easter\n Happy\n \n

","css":".scene {\n width: 10em;\n justify-content: center;\n align-items: center;\n}\n\n.cube {\n color: #ccc;\n cursor: pointer;\n font-family: 'Roboto', sans-serif;\n transition: all 0.85s cubic-bezier(.20,.60,.20,1);\n transform-style: preserve-3d;\n transform-origin: 100% 50%;\n width: 10em;\n height: 4em;\n}\n\n.cube:hover {\n transform: rotateX(-90deg) rotateZ(-20deg);\n}\n\n.side {\n box-sizing: border-box;\n position: absolute;\n display: inline-block;\n height: 4em;\n width: 10em;\n text-align: center;\n text-transform: uppercase;\n padding-top: 1.5em;\n font-weight: bold;\n}\n\n.top {\n background: wheat;\n color: #222229;\n transform: rotateX(90deg) translate3d(0, 0, 2em);\n box-shadow: inset 0 0 0 5px #fff;\n}\n\n.front {\n background: #222229;\n color: #fff;\n box-shadow: inset 0 0 0 5px #fff;\n transform: translate3d(0, 0, 2em);\n}\n\n.right {\n height: 4em;\n width: 4em;\n background: #222229;\n box-shadow: inset 0 0 0 5px #fff;\n transform: rotateY(90deg) translate3d(0, 0, 8em);\n}"},{"created":"2024-01-22T17:00:11.000Z","isPrivate":0,"projectId":"29756d","snapshot":null,"tags":null,"title":"button by Boosterrohit","updated":"2024-01-22T17:00:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":67,"cssLen":902,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".box {\n position: relative;\n width: 120px;\n height: 45px;\n overflow: hidden;\n border: none;\n background-color: rgb(218, 203, 177);\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n border-top-left-radius: 20px;\n cursor: pointer;\n border-bottom-right-radius: 20px;\n box-shadow: 0 0 10px rgb(104, 134, 218);\n}\n\n.box::before {\n content: \"\";\n position: absolute;\n width: 15px;\n height: 200px;\n margin-top: -92px;\n background: linear-gradient(#00ccff,#d400d4);\n animation: amm 4s linear infinite;\n}\n\n@keyframes amm {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.text-button {\n position: relative;\n font-size: 1.2rem;\n font-weight: bold;\n z-index: 1;\n}\n\n.box::after {\n content: \"\";\n position: absolute;\n inset: 4px;\n background-color: rgb(218, 203, 177);\n border-top-left-radius: 20px;\n border-bottom-right-radius: 20px;\n}"},{"created":"2024-01-22T17:00:11.000Z","isPrivate":0,"projectId":"568ace","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":920,"cssLen":826,"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 #08c 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: #08c;\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}