{"loaderData":{"0":null,"0-3":{"total":7405,"projects":[{"created":"2024-01-22T16:59:45.000Z","isPrivate":0,"projectId":"c10f8f","snapshot":null,"tags":null,"title":"button by Mike11jr","updated":"2024-01-22T16:59:45.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":715,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n padding: 1.1em 2em;\n background: none;\n border: 2px solid #fff;\n font-size: 15px;\n color: #131313;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n transition: all 0.3s;\n border-radius: 12px;\n background-color: #ecd448;\n font-weight: bolder;\n box-shadow: 0 2px 0 2px #000;\n}\n\n.btn:before {\n content: \"\";\n position: absolute;\n width: 100px;\n height: 120%;\n background-color: #ff6700;\n top: 50%;\n transform: skewX(30deg) translate(-150%, -50%);\n transition: all 0.5s;\n}\n\n.btn:hover {\n background-color: #4cc9f0;\n color: #fff;\n box-shadow: 0 2px 0 2px #0d3b66;\n}\n\n.btn:hover::before {\n transform: skewX(30deg) translate(150%, -50%);\n transition-delay: 0.1s;\n}\n\n.btn:active {\n transform: scale(0.9);\n}"},{"created":"2024-01-22T16:59:45.000Z","isPrivate":0,"projectId":"abda1e","snapshot":null,"tags":null,"title":"button by satyamchaudharydev","updated":"2024-01-22T16:59:45.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":44,"cssLen":491,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"/* inspired form gumroad website */\n.button {\n --bg: #000;\n --hover-bg: #ff90e8;\n --hover-text: #000;\n color: #fff;\n cursor: pointer;\n border: 1px solid var(--bg);\n border-radius: 4px;\n padding: 0.8em 2em;\n background: var(--bg);\n transition: 0.2s;\n}\n\n.button:hover {\n color: var(--hover-text);\n transform: translate(-0.25rem, -0.25rem);\n background: var(--hover-bg);\n box-shadow: 0.25rem 0.25rem var(--bg);\n}\n\n.button:active {\n transform: translate(0);\n box-shadow: none;\n}\n"},{"created":"2024-01-22T16:59:44.000Z","isPrivate":0,"projectId":"923711","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T16:59:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":337,"cssLen":1003,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background-color: rgb(20, 20, 20);\n border: none;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0px 0px 0px 4px rgba(180, 160, 255, 0.253);\n cursor: pointer;\n transition-duration: 0.3s;\n overflow: hidden;\n position: relative;\n}\n\n.svgIcon {\n width: 12px;\n transition-duration: 0.3s;\n}\n\n.svgIcon path {\n fill: white;\n}\n\n.button:hover {\n width: 140px;\n border-radius: 50px;\n transition-duration: 0.3s;\n background-color: rgb(181, 160, 255);\n align-items: center;\n}\n\n.button:hover .svgIcon {\n /* width: 20px; */\n transition-duration: 0.3s;\n transform: translateY(-200%);\n}\n\n.button::before {\n position: absolute;\n bottom: -20px;\n content: \"Back to Top\";\n color: white;\n /* transition-duration: .3s; */\n font-size: 0px;\n}\n\n.button:hover::before {\n font-size: 13px;\n opacity: 1;\n bottom: unset;\n /* transform: translateY(-30px); */\n transition-duration: 0.3s;\n}\n"},{"created":"2024-01-22T16:59:44.000Z","isPrivate":0,"projectId":"6ad594","snapshot":null,"tags":null,"title":"button by Mike11jr","updated":"2024-01-22T16:59:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":139,"cssLen":790,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Easter\n Happy\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(.17,.67,.14,.93);\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);\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}"},{"created":"2024-01-22T16:59:44.000Z","isPrivate":0,"projectId":"b350c4","snapshot":null,"tags":null,"title":"button by barisdogansutcu","updated":"2024-01-22T16:59:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":857,"cssLen":1259,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".download-button {\n position: relative;\n border-width: 0;\n color: white;\n font-size: 15px;\n font-weight: 600;\n border-radius: 4px;\n z-index: 1;\n}\n\n.download-button .docs {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 10px;\n min-height: 40px;\n padding: 0 10px;\n border-radius: 4px;\n z-index: 1;\n background-color: #242a35;\n border: solid 1px #e8e8e82d;\n transition: all .5s cubic-bezier(0.77, 0, 0.175, 1);\n}\n\n.download-button:hover {\n box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;\n}\n\n.download {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n max-width: 90%;\n margin: 0 auto;\n z-index: -1;\n border-radius: 4px;\n transform: translateY(0%);\n background-color: #01e056;\n border: solid 1px #01e0572d;\n transition: all .5s cubic-bezier(0.77, 0, 0.175, 1);\n}\n\n.download-button:hover .download {\n transform: translateY(100%)\n}\n\n.download svg polyline,.download svg line {\n animation: docs 1s infinite;\n}\n\n@keyframes docs {\n 0% {\n transform: translateY(0%);\n }\n\n 50% {\n transform: translateY(-15%);\n }\n\n 100% {\n transform: translateY(0%);\n }\n}"},{"created":"2024-01-22T16:59:44.000Z","isPrivate":0,"projectId":"dde2bc","snapshot":null,"tags":null,"title":"button by Yaya12085","updated":"2024-01-22T16:59:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":674,"cssLen":899,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n max-width: 320px;\n display: flex;\n overflow: hidden;\n position: relative;\n padding: 0.875rem 72px 0.875rem 1.75rem;\n background-color: #039be5;\n background-image: linear-gradient(to top right, #039be5,#29b6f6);\n color: #ffffff;\n font-size: 15px;\n line-height: 1.25rem;\n font-weight: 700;\n text-align: center;\n text-transform: uppercase;\n vertical-align: middle;\n align-items: center;\n border-radius: 0.5rem;\n gap: 0.75rem;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n border: none;\n transition: all .6s ease;\n}\n\nbutton span {\n background-color: rgb(3 155 229);\n display: grid;\n position: absolute;\n right: 0;\n place-items: center;\n width: 3rem;\n height: 100%;\n}\n\nbutton span svg {\n width: 1.5rem;\n height: 1.5rem;\n}\n\nbutton:hover {\n box-shadow: 0 4px 30px rgba(4, 175, 255, .1), 0 2px 30px rgba(11, 158, 255, 0.06);\n}"},{"created":"2024-01-22T16:59:44.000Z","isPrivate":0,"projectId":"1ecc03","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T16:59:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":357,"cssLen":940,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background-color: rgb(20, 20, 20);\n border: none;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.164);\n cursor: pointer;\n transition-duration: .3s;\n overflow: hidden;\n position: relative;\n}\n\n.svgIcon {\n width: 12px;\n transition-duration: .3s;\n}\n\n.svgIcon path {\n fill: white;\n}\n\n.button:hover {\n width: 140px;\n border-radius: 50px;\n transition-duration: .3s;\n background-color: rgb(255, 69, 69);\n align-items: center;\n}\n\n.button:hover .svgIcon {\n width: 50px;\n transition-duration: .3s;\n transform: translateY(60%);\n}\n\n.button::before {\n position: absolute;\n top: -20px;\n content: \"Delete\";\n color: white;\n transition-duration: .3s;\n font-size: 2px;\n}\n\n.button:hover::before {\n font-size: 13px;\n opacity: 1;\n transform: translateY(30px);\n transition-duration: .3s;\n}"},{"created":"2024-01-22T16:59:44.000Z","isPrivate":0,"projectId":"07f73f","snapshot":null,"tags":null,"title":"button by CristianMontoya98","updated":"2024-01-22T16:59:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":37,"cssLen":586,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n width: 6.5em;\n height: 2.3em;\n margin: 0.5em;\n background: black;\n color: white;\n border: none;\n border-radius: 0.625em;\n font-size: 20px;\n font-weight: bold;\n cursor: pointer;\n position: relative;\n z-index: 1;\n overflow: hidden;\n}\n\nbutton:hover {\n color: black;\n}\n\nbutton:after {\n content: \"\";\n background: white;\n position: absolute;\n z-index: -1;\n left: -20%;\n right: -20%;\n top: 0;\n bottom: 0;\n transform: skewX(-45deg) scale(0, 1);\n transition: all 0.5s;\n}\n\nbutton:hover:after {\n transform: skewX(-45deg) scale(1, 1);\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}"},{"created":"2024-01-22T16:59:44.000Z","isPrivate":0,"projectId":"38cf96","snapshot":null,"tags":null,"title":"button by doniaskima","updated":"2024-01-22T16:59:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":113,"cssLen":2225,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn-31,\n.btn-31 *,\n.btn-31 :after,\n.btn-31 :before,\n.btn-31:after,\n.btn-31:before {\n border: 0 solid;\n box-sizing: border-box;\n}\n\n.btn-31 {\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}\n\n.btn-31:disabled {\n cursor: default;\n}\n\n.btn-31:-moz-focusring {\n outline: auto;\n}\n\n.btn-31 svg {\n display: block;\n vertical-align: middle;\n}\n\n.btn-31 [hidden] {\n display: none;\n}\n\n.btn-31 {\n border-width: 1px;\n padding: 1rem 2rem;\n position: relative;\n text-transform: uppercase;\n}\n\n.btn-31:before {\n --progress: 100%;\n background: #fff;\n -webkit-clip-path: polygon(\n 100% 0,\n var(--progress) var(--progress),\n 0 100%,\n 100% 100%\n );\n clip-path: polygon(\n 100% 0,\n var(--progress) var(--progress),\n 0 100%,\n 100% 100%\n );\n content: \"\";\n inset: 0;\n position: absolute;\n transition: -webkit-clip-path 0.2s ease;\n transition: clip-path 0.2s ease;\n transition: clip-path 0.2s ease, -webkit-clip-path 0.2s ease;\n}\n\n.btn-31:hover:before {\n --progress: 0%;\n}\n\n.btn-31 .text-container {\n display: block;\n overflow: hidden;\n position: relative;\n}\n\n.btn-31 .text {\n display: block;\n font-weight: 900;\n mix-blend-mode: difference;\n position: relative;\n}\n\n.btn-31:hover .text {\n -webkit-animation: move-up-alternate 0.3s ease forwards;\n animation: move-up-alternate 0.3s ease forwards;\n}\n\n@-webkit-keyframes move-up-alternate {\n 0% {\n transform: translateY(0);\n }\n\n 50% {\n transform: translateY(80%);\n }\n\n 51% {\n transform: translateY(-80%);\n }\n\n to {\n transform: translateY(0);\n }\n}\n\n@keyframes move-up-alternate {\n 0% {\n transform: translateY(0);\n }\n\n 50% {\n transform: translateY(80%);\n }\n\n 51% {\n transform: translateY(-80%);\n }\n\n to {\n transform: translateY(0);\n }\n}\n"},{"created":"2024-01-22T16:59:44.000Z","isPrivate":0,"projectId":"fd0287","snapshot":null,"tags":null,"title":"button by gharsh11032000","updated":"2024-01-22T16:59:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":913,"cssLen":1078,"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 align-items: center;\n justify-content: center;\n gap: 5px;\n padding: 15px 20px;\n background-color: #212121;\n border: none;\n font: inherit;\n color: #e8e8e8;\n font-size: 20px;\n font-weight: 600;\n border-radius: 50px;\n cursor: not-allowed;\n overflow: hidden;\n transition: all 0.3s ease cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.button span {\n position: relative;\n z-index: 2;\n display: flex;\n align-items: center;\n}\n\n.button::before {\n position: absolute;\n content: '';\n width: 100%;\n height: 100%;\n translate: 0 105%;\n background-color: #F53844;\n transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.button svg {\n width: 32px;\n height: 32px;\n fill: #F53844;\n transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.button:hover {\n animation: shake 0.2s linear 1;\n}\n\n.button:hover::before {\n translate: 0 0;\n}\n\n.button:hover svg {\n fill: #e8e8e8;\n}\n\n@keyframes shake {\n 0% {\n rotate: 0deg;\n }\n\n 33% {\n rotate: 10deg;\n }\n\n 66% {\n rotate: -10deg;\n }\n\n 100% {\n rotate: 10deg;\n }\n}\n"},{"created":"2024-01-22T16:59:44.000Z","isPrivate":0,"projectId":"19a5b1","snapshot":null,"tags":null,"title":"button by Navarog21","updated":"2024-01-22T16:59:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":31,"cssLen":764,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n width: 10em;\n position: relative;\n height: 3.5em;\n border: 3px ridge #149CEA;\n outline: none;\n background-color: transparent;\n color: white;\n transition: 1s;\n border-radius: 0.3em;\n font-size: 16px;\n font-weight: bold;\n cursor: pointer;\n}\n\nbutton::after {\n content: \"\";\n position: absolute;\n top: -10px;\n left: 3%;\n width: 95%;\n height: 40%;\n background-color: #212121;\n transition: 0.5s;\n transform-origin: center;\n}\n\nbutton::before {\n content: \"\";\n transform-origin: center;\n position: absolute;\n top: 80%;\n left: 3%;\n width: 95%;\n height: 40%;\n background-color: #212121;\n transition: 0.5s;\n}\n\nbutton:hover::before, button:hover::after {\n transform: scale(0)\n}\n\nbutton:hover {\n box-shadow: inset 0px 0px 25px #1479EA;\n}"},{"created":"2024-01-22T16:59:44.000Z","isPrivate":0,"projectId":"cbd5f5","snapshot":null,"tags":null,"title":"button by arieshiphop","updated":"2024-01-22T16:59:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":356,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n font-size: 17px;\n padding: 0.5em 2em;\n border: transparent;\n box-shadow: 2px 2px 4px rgba(0,0,0,0.4);\n background: dodgerblue;\n color: white;\n border-radius: 4px;\n}\n\nbutton:hover {\n background: rgb(2,0,36);\n background: linear-gradient(90deg, rgba(30,144,255,1) 0%, rgba(0,212,255,1) 100%);\n}\n\nbutton:active {\n transform: translate(0em, 0.2em);\n}"}]}},"actionData":null,"errors":null}