{"loaderData":{"0":null,"0-2":{"total":7070,"projects":[{"created":"2024-01-22T17:00:31.000Z","isPrivate":0,"projectId":"83664b","snapshot":null,"tags":null,"title":"button by doniaskima","updated":"2024-01-22T17:00:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":51,"cssLen":1805,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn-9,\n.btn-9 *,\n.btn-9 :after,\n.btn-9 :before,\n.btn-9:after,\n.btn-9:before {\n border: 0 solid;\n box-sizing: border-box;\n}\n\n.btn-9 {\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-9:disabled {\n cursor: default;\n}\n\n.btn-9:-moz-focusring {\n outline: auto;\n}\n\n.btn-9 svg {\n display: block;\n vertical-align: middle;\n}\n\n.btn-9 [hidden] {\n display: none;\n}\n\n.btn-9 {\n border-radius: 99rem;\n border-width: 2px;\n overflow: hidden;\n padding: 0.8rem 3rem;\n position: relative;\n}\n\n.btn-9 span {\n mix-blend-mode: difference;\n}\n\n.btn-9:after,\n.btn-9:before {\n --tilt: 1.2rem;\n background: #fff;\n -webkit-clip-path: polygon(\n 0 0,\n calc(100% - var(--tilt)) 0,\n 100% 50%,\n calc(100% - var(--tilt)) 100%,\n 0 100%\n );\n clip-path: polygon(\n 0 0,\n calc(100% - var(--tilt)) 0,\n 100% 50%,\n calc(100% - var(--tilt)) 100%,\n 0 100%\n );\n content: \"\";\n display: block;\n height: 100%;\n left: calc(-100% - var(--tilt));\n position: absolute;\n top: 0;\n transform: translateX(var(--progress, 0));\n transition: transform 0.2s ease;\n width: calc(100% + var(--tilt));\n}\n\n.btn-9:after {\n left: 100%;\n transform: translateX(var(--progress, 0)) rotate(180deg);\n z-index: -1;\n}\n\n.btn-9:hover:before {\n --progress: 100%;\n}\n\n.btn-9:hover:after {\n --progress: -100%;\n}\n"},{"created":"2024-01-22T17:00:31.000Z","isPrivate":0,"projectId":"3c6fc7","snapshot":null,"tags":null,"title":"button by imPradhyumn","updated":"2024-01-22T17:00:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":40,"cssLen":969,"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 display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 5px;\n background: #183153;\n font-family: \"Montserrat\", sans-serif;\n box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.2);\n overflow: hidden;\n border: none;\n}\n\nbutton:after {\n content: \" \";\n width: 0%;\n height: 100%;\n background: #FFD401;\n position: absolute;\n transition: all 0.4s ease-in-out;\n right: auto;\n left: auto;\n}\n\nbutton:hover::after {\n right: auto;\n left: auto;\n width: 100%;\n}\n\nbutton span {\n text-align: center;\n text-decoration: none;\n width: 100%;\n padding: 18px 25px;\n color: #fff;\n font-size: 1.125em;\n font-weight: 700;\n letter-spacing: 0.3em;\n z-index: 20;\n transition: all 0.3s ease-in-out;\n}\n\nbutton:hover span {\n color: #183153;\n animation: scaleUp 0.3s ease-in-out;\n}\n\n@keyframes scaleUp {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(0.95);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n"},{"created":"2024-01-22T17:00:31.000Z","isPrivate":0,"projectId":"d0b455","snapshot":null,"tags":null,"title":"button by mrhyddenn","updated":"2024-01-22T17:00:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":49,"cssLen":1079,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n text-transform: uppercase;\n letter-spacing: 0.1em;\n padding: 10px 30px;\n transition: 0.5s;\n position: relative;\n font-size: 17px;\n background: #333;\n border: none;\n color: #fff;\n}\n\nbutton:hover {\n letter-spacing: 0.25em;\n background: #ff1867;\n color: #ff1867;\n box-shadow: 0 0 45px #ff1867;\n}\n\nbutton::before {\n content: '';\n position: absolute;\n inset: 2px;\n background: #222222;\n}\n\nbutton span {\n position: relative;\n z-index: 1;\n}\n\nbutton i {\n position: absolute;\n inset: 0;\n display: block;\n}\n\nbutton i::before {\n content: '';\n position: absolute;\n border: 2px solid #ff1867;\n width: 7px;\n height: 4px;\n top: -3.5px;\n left: 80%;\n background: #222222;\n transform: translateX(-50%);\n transition: 0.5s;\n}\n\nbutton:hover i::before {\n width: 20px;\n left: 20%;\n}\n\nbutton i::after {\n content: '';\n position: absolute;\n border: 2px solid #ff1867;\n width: 7px;\n height: 4px;\n bottom: -3.5px;\n left: 20%;\n background: #222222;\n transform: translateX(-50%);\n transition: 0.5s;\n}\n\nbutton:hover i::after {\n width: 20px;\n left: 80%;\n}"},{"created":"2024-01-22T17:00:31.000Z","isPrivate":0,"projectId":"ddf783","snapshot":null,"tags":null,"title":"button by ozgeozkaraa01","updated":"2024-01-22T17:00:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":288,"cssLen":432,"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 cursor: pointer;\n transition: all 0.3s linear;\n border-radius: 10px;\n border: 1px solid #F2BED1;\n padding: 10px 20px;\n}\n\nbutton > svg {\n margin-left: 5px;\n transition: all 0.4s ease-in;\n}\n\nbutton:hover > svg {\n font-size: 1.2em;\n transform: translateX(6px);\n}\n\nbutton:hover {\n box-shadow: 10px 10px 40px #d1d1d1;\n transform: translateY(-5px);\n}"},{"created":"2024-01-22T17:00:31.000Z","isPrivate":0,"projectId":"4f8685","snapshot":null,"tags":null,"title":"button by Admin12121","updated":"2024-01-22T17:00:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":89,"cssLen":3350,"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":".bin {\n --black: #000000;\n --binbg: #e6e6e6;\n --width: 40px;\n --height: 50px;\n background-image: repeating-linear-gradient(to right, transparent, transparent 5px, var(--black) 5px, var(--black) 7px, transparent 7px);\n background-size: 11px calc(var(--height) / 2);\n background-position: 2px center;\n background-repeat: repeat-x;\n margin: auto;\n position: relative;\n background-color: var(--binbg);\n border: 0;\n color: transparent;\n width: var(--width);\n height: var(--height);\n border: 2px solid var(--black);\n border-radius: 0 0 6px 6px;\n}\n\n.bin::after, .bin::before {\n content: \"\";\n position: absolute;\n transform-origin: left bottom;\n transition: 200ms ease-in-out;\n border-width: 2px;\n border-style: solid;\n margin: auto;\n right: 0;\n}\n\n.bin::after {\n left: -4px;\n top: -5px;\n height: 7px;\n width: var(--width);\n border: 2px solid var(--black);\n background-color: var(--binbg);\n border-radius: 5px 5px 0 0;\n}\n\n.bin::before {\n top: -8px;\n height: 2px;\n width: 10px;\n border-color: var(--black) var(--black) transparent var(--black);\n left: 0;\n}\n\n.bin:focus, .bin:active {\n outline: none;\n cursor: none;\n}\n\n.bin:focus::before, .bin:focus::after, .bin:active::before, .bin:active::after {\n transform-origin: left bottom;\n transform: rotate(-45deg);\n}\n\n.bin:focus::before, .bin:active::before {\n top: -18px;\n left: -23px;\n right: 3px;\n}\n\n.bin:focus ~ .div, .bin:active ~ .div {\n cursor: none;\n z-index: 1;\n}\n\n.bin:focus ~ .div:hover, .bin:active ~ .div:hover {\n cursor: none;\n}\n\n.bin:focus ~ .overlay, .bin:active ~ .overlay {\n pointer-events: inherit;\n z-index: 2;\n cursor: none;\n}\n\n.bin:focus ~ .div > small, .bin:active ~ .div > small {\n opacity: 1;\n animation: throw 300ms 30ms cubic-bezier(0.215, 0.61, 0.355, 0.3) forwards;\n}\n\n.div:focus, .div:active, .div:hover {\n z-index: 1;\n cursor: none;\n}\n\n.div > small {\n position: absolute;\n width: 20px;\n height: 16px;\n left: 0;\n right: -58px;\n margin: auto;\n top: 27px;\n bottom: 0;\n border-left: 1px solid black;\n opacity: 0;\n}\n\n.div > small::before, .div > small::after {\n content: \"\";\n position: absolute;\n width: 1px;\n border-right: 1px solid black;\n}\n\n.div > small::before {\n height: 17px;\n transform: rotate(-42deg);\n top: -3px;\n right: 13px;\n}\n\n.div > small::after {\n height: 4px;\n transform: rotate(-112deg);\n top: 18px;\n right: 11px;\n}\n\n.div > small > i::before, .div > small > i::after {\n content: \"\";\n position: absolute;\n border-top: 1px solid black;\n}\n\n.div > small > i::before {\n border-left: 1px solid black;\n width: 4px;\n bottom: -4px;\n height: 4px;\n transform: rotate(66deg);\n}\n\n.div > small > i::after {\n border-right: 1px solid black;\n width: 5px;\n bottom: -2px;\n height: 5px;\n transform: rotate(-114deg);\n right: 6px;\n}\n\n@keyframes throw {\n 0% {\n transform: translate(0, 0);\n }\n\n 50% {\n transform: translate(0, -30px) rotate(-10deg);\n }\n\n 60% {\n transform: translate(0, -40px) rotate(-30deg);\n }\n\n 70% {\n transform: translate(-5px, -50px) rotate(-40deg) scale(1);\n opacity: 1;\n }\n\n 80% {\n transform: translate(-10px, -60px) rotate(-60deg) scale(0.9);\n opacity: 1;\n }\n\n 90% {\n transform: translate(-20px, -50px) rotate(-100deg) scale(0.5);\n opacity: 0.8;\n }\n\n 100% {\n transform: translate(-30px, -20px) rotate(-80deg) scale(0.4);\n opacity: 0;\n }\n}"},{"created":"2024-01-22T17:00:31.000Z","isPrivate":0,"projectId":"8d050e","snapshot":null,"tags":null,"title":"button by Ahmedkamel-1","updated":"2024-01-22T17:00:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1387,"cssLen":1576,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n","css":".light-button button.bt {\n position: relative;\n height: 200px;\n display: flex;\n align-items: flex-end;\n outline: none;\n background: none;\n border: none;\n}\n\n.light-button button.bt .button-holder {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100px;\n width: 100px;\n background-color: #0a0a0a;\n border-radius: 5px;\n color: #0f0f0f;\n font-weight: 700;\n transition: 300ms;\n outline: #0f0f0f 2px solid;\n outline-offset: 20;\n}\n\n.light-button button.bt .button-holder svg {\n height: 50px;\n fill: #0f0f0f;\n transition: 300ms;\n}\n\n.light-button button.bt .light-holder {\n position: absolute;\n height: 200px;\n width: 100px;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.light-button button.bt .light-holder .dot {\n position: absolute;\n top: 0;\n width: 10px;\n height: 10px;\n background-color: #0a0a0a;\n border-radius: 10px;\n z-index: 2;\n}\n\n.light-button button.bt .light-holder .light {\n position: absolute;\n top: 0;\n width: 200px;\n height: 200px;\n clip-path: polygon(50% 0%, 25% 100%, 75% 100%);\n background: transparent;\n}\n\n.light-button button.bt:hover .button-holder svg {\n fill: rgba(233, 57, 26);\n}\n\n.light-button button.bt:hover .button-holder {\n color: rgba(233, 57, 26);\n outline: rgba(233, 57, 26) 2px solid;\n outline-offset: 2px;\n}\n\n.light-button button.bt:hover .light-holder .light {\n background: rgb(255, 255, 255);\n background: linear-gradient(\n 180deg,\n rgb(233, 57, 26) 0%,\n rgba(200, 20, 100, 0) 75%,\n rgba(200, 20, 100, 0) 100%\n );\n}\n"},{"created":"2024-01-22T17:00:31.000Z","isPrivate":0,"projectId":"b45087","snapshot":null,"tags":null,"title":"button by boryanakrasteva","updated":"2024-01-22T17:00:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":6958,"cssLen":725,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n width: 130px;\n height: 40px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n letter-spacing: 2.5px;\n text-transform: uppercase;\n border: 1px solid black;\n}\n\n.btn,\n.socials {\n border-radius: 20px;\n background-color: transparent;\n filter: drop-shadow(1px 1px 3px rgba(122, 122, 122, 0.808));\n}\n\n.socials {\n position: absolute;\n /* border-bottom: 0.2px solid black; */\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: space-around;\n list-style: none;\n top: 0;\n left: 0;\n transition: .2s linear;\n opacity: 0;\n visibility: hidden;\n}\n\n.btn:hover > .socials {\n opacity: 1;\n visibility: visible;\n top: -120%;\n}"},{"created":"2024-01-22T17:00:31.000Z","isPrivate":0,"projectId":"6f7d61","snapshot":null,"tags":null,"title":"button by itay1313","updated":"2024-01-22T17:00:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":111,"cssLen":1340,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n

","css":".body {\n --transition: all 0.55s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n --yellow-bg: transparent linear-gradient(114deg, #fdc100 0%, #dd7d00 100%) 0%\n 0% no-repeat padding-box;\n color: white;\n margin: 0;\n}\n\n.btn {\n border-radius: 23px;\n letter-spacing: 0.8px;\n font-size: 14px;\n font-weight: 300;\n color: white;\n white-space: nowrap;\n margin: 20px auto;\n width: 166px;\n height: 45px;\n cursor: pointer;\n position: relative;\n border: 1px solid #dd7d00;\n background: transparent;\n}\n\n.btn::before {\n -webkit-transition: var(--transition);\n transition: var(--transition);\n content: \"\";\n width: 50%;\n height: 100%;\n background: black;\n position: absolute;\n top: 0;\n right: 0;\n}\n\n.btn:hover::before {\n width: 100%;\n}\n\n.btn.btn-hover {\n border-radius: 50px;\n position: relative;\n}\n\n.btn.btn-hover .btn-text {\n color: white;\n -webkit-transition: var(--transition);\n transition: var(--transition);\n mix-blend-mode: lighten;\n}\n\n.btn.btn-hover::before {\n border-radius: 50px;\n width: 100%;\n background: conic-gradient(\n transparent 240deg, #ac633697 240deg,\n #fff2af6a 300deg, transparent 300deg\n )\n 100% / 64%\n no-repeat, var(--yellow-bg);\n}\n\n.btn.btn-hover:hover .btn-text {\n margin-right: 30px;\n}\n\n.btn.btn-hover:hover::before {\n background-position: right;\n border-radius: 23px;\n width: 25%;\n}\n"},{"created":"2024-01-22T17:00:31.000Z","isPrivate":0,"projectId":"547b1a","snapshot":null,"tags":null,"title":"button by Pradeepsaranbishnoi","updated":"2024-01-22T17:00:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":8448,"cssLen":1020,"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":".glowMe,\n.glowAll {\n opacity: 0;\n transition: opacity 300ms linear 0s;\n}\n\n.button-container svg {\n width: 100px;\n height: 100px;\n cursor: pointer;\n}\n\n.button-container svg:hover .glowMe {\n opacity: 0.5;\n}\n\n.button-container svg:hover .glowAll {\n opacity: 1;\n}\n\n.button-container .buttonTop {\n fill: #5f309b;\n transition: fill 300ms linear 0s;\n}\n\n.button-container svg:hover .buttonTop {\n fill: #a661ff;\n}\n\n.button-container .buttonSides {\n fill: #371b5b;\n transition: fill 300ms linear 0s;\n}\n\n.button-container svg:hover .buttonSides {\n fill: #763ac2;\n}\n\n.button-container svg:focus {\n outline: none;\n}\n\n.button-container svg:focus .buttonTop,\n.button-container svg:focus .playSides {\n stroke: white;\n stroke-width: 2px;\n}\n\n.button-container svg:focus .playSides {\n stroke-width: 1px;\n}\n\n.button-container svg:active .buttonTop {\n fill: #c79cff;\n}\n\n.button-container svg:nth-of-type(1) {\n transform: translate(37%, -35%);\n}\n\n.button-container svg:nth-of-type(3) {\n transform: translate(-37%, 35%);\n}\n"},{"created":"2024-01-22T17:00:30.000Z","isPrivate":0,"projectId":"9f4c30","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":768,"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: #e60023;\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(226, 226, 226, 0.466);\n backdrop-filter: blur(4px);\n}\n"},{"created":"2024-01-22T17:00:30.000Z","isPrivate":0,"projectId":"6dca99","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":409,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n color: white;\n text-decoration: none;\n font-size: 25px;\n border: none;\n background: none;\n font-weight: 600;\n font-family: 'Poppins', sans-serif;\n}\n\nbutton::before {\n margin-left: auto;\n}\n\nbutton::after, button::before {\n content: '';\n width: 0%;\n height: 2px;\n background: blueviolet;\n display: block;\n transition: 0.5s;\n}\n\nbutton:hover::after, button:hover::before {\n width: 100%;\n}"},{"created":"2024-01-22T17:00:30.000Z","isPrivate":0,"projectId":"27ee6f","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":707,"cssLen":836,"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 justify-content: center;\n align-items: center;\n padding: 6px 12px;\n gap: 8px;\n height: 32px;\n width: 124px;\n border: none;\n background: #056bfae0;\n border-radius: 20px;\n cursor: pointer;\n}\n\n.lable {\n line-height: 20px;\n font-size: 17px;\n color: #fff;\n font-family: sans-serif;\n letter-spacing: 1px;\n}\n\n.button:hover {\n background: #056DFA;\n}\n\n.button:hover .svg-icon {\n animation: msg 2s linear infinite;\n}\n\n@keyframes msg {\n 0% {\n transform: translate(0, 0) scale(1);\n }\n\n 15% {\n transform: translateX(1px);\n }\n\n 30% {\n transform: scale(1.1);\n }\n\n 45% {\n transform: translateY(1px);\n }\n\n 60% {\n transform: translateY(0px);\n }\n\n 75% {\n transform: scale(1);\n }\n\n 90% {\n transform: translateX(-px);\n }\n\n 100% {\n transform: translate(0, 0) scale(1);\n }\n}"}]}},"actionData":null,"errors":null}