{"loaderData":{"0":null,"0-3":{"total":7405,"projects":[{"created":"2024-01-22T16:59:46.000Z","isPrivate":0,"projectId":"669ae5","snapshot":null,"tags":null,"title":"button by reshades","updated":"2024-01-22T16:59:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":339,"cssLen":472,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n background-color: #ffffff00;\n color: #fff;\n width: 8.5em;\n height: 2.9em;\n border: #3654ff 0.2em solid;\n border-radius: 11px;\n text-align: right;\n transition: all 0.6s ease;\n}\n\n.button:hover {\n background-color: #3654ff;\n cursor: pointer;\n}\n\n.button svg {\n width: 1.6em;\n margin: -0.2em 0.8em 1em;\n position: absolute;\n display: flex;\n transition: all 0.6s ease;\n}\n\n.button:hover svg {\n transform: translateX(5px);\n}\n\n.text {\n margin: 0 1.5em\n}"},{"created":"2024-01-22T16:59:46.000Z","isPrivate":0,"projectId":"4f354f","snapshot":null,"tags":null,"title":"button by ke1221","updated":"2024-01-22T16:59:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":357,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n color: #090909;\n padding: 0.7em 1.7em;\n font-size: 18px;\n border-radius: 0.5em;\n background: #e8e8e8;\n cursor: pointer;\n border: 1px solid #e8e8e8;\n transition: all 0.3s;\n box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;\n}\n\nbutton:active {\n color: #666;\n box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;\n}\n"},{"created":"2024-01-22T16:59:46.000Z","isPrivate":0,"projectId":"e7ab73","snapshot":null,"tags":null,"title":"button by Kabak","updated":"2024-01-22T16:59:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":24,"cssLen":1191,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n height: 50px;\n margin: 5px;\n width: 120px;\n background: #333;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n cursor: pointer;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n font-family: Consolas, Courier New, monospace;\n border: solid #404c5d 1px;\n font-size: 16px;\n color: rgb(161, 161, 161);\n -webkit-transition: 500ms;\n transition: 500ms;\n border-radius: 5px;\n background: linear-gradient(145deg, #2e2d2d, #212121);\n -webkit-box-shadow: -1px -5px 15px #41465b, 5px 5px 15px #41465b,\n inset 5px 5px 10px #212121, inset -5px -5px 10px #212121;\n box-shadow: -1px -5px 15px #41465b, 5px 5px 15px #41465b,\n inset 5px 5px 10px #212121, inset -5px -5px 10px #212121;\n}\n\nbutton:hover {\n -webkit-box-shadow: 1px 1px 13px #20232e, -1px -1px 13px #545b78;\n box-shadow: 1px 1px 13px #20232e, -1px -1px 13px #545b78;\n color: #d6d6d6;\n -webkit-transition: 500ms;\n transition: 500ms;\n}\n\nbutton:active {\n -webkit-box-shadow: 1px 1px 13px #20232e, -1px -1px 33px #545b78;\n box-shadow: 1px 1px 13px #20232e, -1px -1px 33px #545b78;\n color: #d6d6d6;\n -webkit-transition: 100ms;\n transition: 100ms;\n}\n"},{"created":"2024-01-22T16:59:46.000Z","isPrivate":0,"projectId":"bf62ed","snapshot":null,"tags":null,"title":"button by MuhammadHasann","updated":"2024-01-22T16:59:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":255,"cssLen":2728,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".container-button {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n grid-template-rows: 1fr 1fr;\n grid-template-areas: \"bt-1 bt-2 bt-3\"\n \"bt-4 bt-5 bt-6\";\n position: relative;\n perspective: 800;\n padding: 0;\n width: 135px;\n height: 47px;\n transition: all 0.3s ease-in-out;\n}\n\n.container-button:active {\n transform: scale(0.95);\n}\n\n.hover {\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 200;\n}\n\n.bt-1 {\n grid-area: bt-1;\n}\n\n.bt-2 {\n grid-area: bt-2;\n}\n\n.bt-3 {\n grid-area: bt-3;\n}\n\n.bt-4 {\n grid-area: bt-4;\n}\n\n.bt-5 {\n grid-area: bt-5;\n}\n\n.bt-6 {\n grid-area: bt-6;\n}\n\n.bt-1:hover ~ button {\n transform: rotateX(15deg) rotateY(-15deg) rotateZ(0deg);\n box-shadow: -2px -2px #18181888;\n}\n\n.bt-1:hover ~ button::after {\n animation: shake 0.5s ease-in-out 0.3s;\n text-shadow: -2px -2px #18181888;\n}\n\n.bt-3:hover ~ button {\n transform: rotateX(15deg) rotateY(15deg) rotateZ(0deg);\n box-shadow: 2px -2px #18181888;\n}\n\n.bt-3:hover ~ button::after {\n animation: shake 0.5s ease-in-out 0.3s;\n text-shadow: 2px -2px #18181888;\n}\n\n.bt-4:hover ~ button {\n transform: rotateX(-15deg) rotateY(-15deg) rotateZ(0deg);\n box-shadow: -2px 2px #18181888;\n}\n\n.bt-4:hover ~ button::after {\n animation: shake 0.5s ease-in-out 0.3s;\n text-shadow: -2px 2px #18181888;\n}\n\n.bt-6:hover ~ button {\n transform: rotateX(-15deg) rotateY(15deg) rotateZ(0deg);\n box-shadow: 2px 2px #18181888;\n}\n\n.bt-6:hover ~ button::after {\n animation: shake 0.5s ease-in-out 0.3s;\n text-shadow: 2px 2px #18181888;\n}\n\n.hover:hover ~ button::before {\n background: transparent;\n}\n\n.hover:hover ~ button::after {\n content: \"Click\";\n top: -150%;\n transform: translate(-50%, 0);\n font-size: 34px;\n color: #f19c2b;\n}\n\nbutton {\n position: absolute;\n padding: 0;\n width: 135px;\n height: 47px;\n background: transparent;\n font-size: 17px;\n font-weight: 900;\n border: 3px solid #f39923;\n border-radius: 12px;\n transition: all 0.3s ease-in-out;\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: 47px;\n background-color: #f5ae51;\n border-radius: 12px;\n transition: all 0.3s ease-in-out;\n z-index: -1;\n}\n\nbutton::after {\n content: \"Hover\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 135px;\n height: 47px;\n background-color: transparent;\n font-size: 17px;\n font-weight: 900;\n line-height: 47px;\n color: #ffffff;\n border: none;\n border-radius: 12px;\n transition: all 0.3s ease-in-out;\n z-index: 2;\n}\n\n@keyframes shake {\n 0% {\n left: 45%;\n }\n\n 25% {\n left: 54%;\n }\n\n 50% {\n left: 48%;\n }\n\n 75% {\n left: 52%;\n }\n\n 100% {\n left: 50%;\n }\n}"},{"created":"2024-01-22T16:59:46.000Z","isPrivate":0,"projectId":"89fe17","snapshot":null,"tags":null,"title":"button by felipesntr","updated":"2024-01-22T16:59:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":32,"cssLen":278,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n padding: 0.6em 1em;\n border: 4px solid #fa725a;\n transition: ease-in-out 0.3s;\n background-color: transparent;\n color: #fa725a;\n font-weight: bolder;\n font-size: 16px;\n}\n\nbutton:hover {\n transform: scale(1.2) rotate(10deg);\n background-color: #fa725a;\n color: white;\n}"},{"created":"2024-01-22T16:59:46.000Z","isPrivate":0,"projectId":"ea1271","snapshot":null,"tags":null,"title":"button by hannahyockel","updated":"2024-01-22T16:59:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1519,"cssLen":1060,"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 flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 1em;\n border: 0px solid transparent;\n background-color: rgba(100,77,237,0.08);\n border-radius: 1.25em;\n transition: all 0.2s linear;\n}\n\nbutton:hover {\n box-shadow: 3.4px 2.5px 4.9px rgba(0, 0, 0, 0.025),\n 8.6px 6.3px 12.4px rgba(0, 0, 0, 0.035),\n 17.5px 12.8px 25.3px rgba(0, 0, 0, 0.045),\n 36.1px 26.3px 52.2px rgba(0, 0, 0, 0.055),\n 99px 72px 143px rgba(0, 0, 0, 0.08);\n}\n\n.tooltip {\n position: relative;\n display: inline-block;\n}\n\n.tooltip .tooltiptext {\n visibility: hidden;\n width: 4em;\n background-color: rgba(0, 0, 0, 0.253);\n color: #fff;\n text-align: center;\n border-radius: 6px;\n padding: 5px 0;\n position: absolute;\n z-index: 1;\n top: 25%;\n left: 110%;\n}\n\n.tooltip .tooltiptext::after {\n content: \"\";\n position: absolute;\n top: 50%;\n right: 100%;\n margin-top: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: transparent rgba(0, 0, 0, 0.253) transparent transparent;\n}\n\n.tooltip:hover .tooltiptext {\n visibility: visible;\n}"},{"created":"2024-01-22T16:59:46.000Z","isPrivate":0,"projectId":"275457","snapshot":null,"tags":null,"title":"button by barisdogansutcu","updated":"2024-01-22T16:59:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":742,"cssLen":895,"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 overflow: hidden;\n outline: none;\n cursor: pointer;\n border-radius: 50px;\n background-color: hsl(255deg 50% 40%);\n border: solid 4px hsl(50deg 100% 50%);\n font-family: inherit;\n}\n\n.default-btn,.hover-btn {\n background-color: hsl(255deg 50% 40%);\n display: -webkit-box;\n display: -moz-box;\n display: -ms-flexbox;\n display: -webkit-flex;\n display: flex;\n align-items: center;\n gap: 15px;\n padding: 15px 20px;\n border-radius: 50px;\n font-size: 17px;\n font-weight: 500;\n text-transform: uppercase;\n transition: all .3s ease;\n}\n\n.hover-btn {\n position: absolute;\n inset: 0;\n background-color: hsl(255deg 50% 49%);\n transform: translate(0%,100%);\n}\n\n.default-btn span {\n color: hsl(0, 0%, 100%);\n}\n\n.hover-btn span {\n color: hsl(50deg 100% 50%);\n}\n\nbutton:hover .default-btn {\n transform: translate(0%,-100%);\n}\n\nbutton:hover .hover-btn {\n transform: translate(0%,0%);\n}"},{"created":"2024-01-22T16:59:46.000Z","isPrivate":0,"projectId":"34db56","snapshot":null,"tags":null,"title":"button by SelfMadeSystem","updated":"2024-01-22T16:59:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":198,"cssLen":1185,"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","css":".button-container {\n --background: #fefbff;\n --inner-shadow: #9faef9;\n --inner-outline: #34217d;\n --inner-outline-bottom: #fafcfe;\n --inner-outline-middle: #8880d5;\n --inner-outline-outer-top: #fefcff;\n --inner-outline-outer-bottom-1: #29107b;\n --line-1: #8676c9;\n --line-2: #5c69ca;\n position: relative;\n background: var(--background);\n cursor: pointer;\n transition: all 0.2s;\n font-size: 17px;\n padding: 0.7em 1.8em;\n border-radius: 5px;\n box-shadow: inset 0px 1px 8px 1px var(--inner-shadow),\n 0px 2px 0px 0px var(--inner-outline-bottom),\n 0px -2px 0px 0px var(--inner-outline),\n -2px -2px 0px 0px var(--inner-outline),\n 2px -2px 0px 0px var(--inner-outline),\n 0px 0px 0px 6px var(--inner-outline-middle),\n 0px -2px 0px 7px var(--inner-outline-outer-top),\n 0px 4px 0px 7px var(--inner-outline-outer-bottom-1);\n}\n\n.button-lines {\n display: flex;\n flex-direction: column;\n gap: 0.4em;\n}\n\n.button-line-1 {\n height: 0.2em;\n width: 4em;\n border-radius: 10em;\n display: inline-block;\n background: var(--line-1);\n}\n\n.button-line-2 {\n height: 0.2em;\n width: 3em;\n border-radius: 10em;\n display: inline-block;\n background: var(--line-2);\n}\n"},{"created":"2024-01-22T16:59:46.000Z","isPrivate":0,"projectId":"3b1a0c","snapshot":null,"tags":null,"title":"button by satyamchaudharydev","updated":"2024-01-22T16:59:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":31,"cssLen":471,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n --bg: #e74c3c;\n --text-color: #fff;\n position: relative;\n width: 150px;\n border: none;\n background: var(--bg);\n color: var(--text-color);\n padding: 1em;\n font-weight: bold;\n text-transform: uppercase;\n transition: 0.2s;\n border-radius: 5px;\n opacity: 0.8;\n letter-spacing: 1px;\n box-shadow: #c0392b 0px 7px 2px, #000 0px 8px 5px;\n}\n\nbutton:hover {\n opacity: 1;\n}\n\nbutton:active {\n top: 4px;\n box-shadow: #c0392b 0px 3px 2px,#000 0px 3px 5px;\n}"},{"created":"2024-01-22T16:59:46.000Z","isPrivate":0,"projectId":"6cc807","snapshot":null,"tags":null,"title":"button by kleenpulse","updated":"2024-01-22T16:59:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":41,"cssLen":3037,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n --border-color: linear-gradient(-45deg, #ffae00, #7e03aa, #00fffb);\n --border-width: .125em;\n --curve-size: .5em;\n --blur: 30px;\n --bg: #080312;\n --color: #afffff;\n color: var(--color);\n /* use position: relative; so that BG is only for .btn */\n position: relative;\n isolation: isolate;\n display: inline-grid;\n place-content: center;\n padding: .5em 1.5em;\n font-size: 17px;\n border: 0;\n text-transform: uppercase;\n box-shadow: 10px 10px 20px rgba(0, 0, 0, .6);\n clip-path: polygon(\n /* Top-left */\n 0% var(--curve-size),\n\n var(--curve-size) 0,\n /* top-right */\n 100% 0,\n 100% calc(100% - var(--curve-size)),\n\n /* bottom-right 1 */\n calc(100% - var(--curve-size)) 100%,\n /* bottom-right 2 */\n 0 100%);\n transition: color 250ms;\n}\n\n.btn::after,\n.btn::before {\n content: '';\n position: absolute;\n inset: 0;\n}\n\n.btn::before {\n background: var(--border-color);\n background-size: 300% 300%;\n animation: move-bg7234 5s ease infinite;\n z-index: -2;\n}\n\n@keyframes move-bg7234 {\n 0% {\n background-position: 31% 0%\n }\n\n 50% {\n background-position: 70% 100%\n }\n\n 100% {\n background-position: 31% 0%\n }\n}\n\n.btn::after {\n background: var(--bg);\n z-index: -1;\n clip-path: polygon(\n /* Top-left */\n var(--border-width) \n calc(var(--curve-size) + var(--border-width) * .5),\n\n calc(var(--curve-size) + var(--border-width) * .5) var(--border-width),\n\n /* top-right */\n calc(100% - var(--border-width)) \n var(--border-width),\n\n calc(100% - var(--border-width)) \n calc(100% - calc(var(--curve-size) + var(--border-width) * .5)),\n\n /* bottom-right 1 */\n calc(100% - calc(var(--curve-size) + var(--border-width) * .5)) calc(100% - var(--border-width)),\n /* bottom-right 2 */\n var(--border-width) calc(100% - var(--border-width)));\n transition: clip-path 500ms;\n}\n\n.btn:where(:hover, :focus)::after {\n clip-path: polygon(\n /* Top-left */\n calc(100% - var(--border-width)) \n\n calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)),\n \n calc(100% - var(--border-width))\n\n var(--border-width),\n \n /* top-right */\n calc(100% - var(--border-width))\n\n var(--border-width),\n \n calc(100% - var(--border-width)) \n\n calc(100% - calc(var(--curve-size) + var(--border-width) * .5)),\n \n /* bottom-right 1 */\n calc(100% - calc(var(--curve-size) + var(--border-width) * .5)) \n calc(100% - var(--border-width)),\n\n /* bottom-right 2 */\n calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5))\n calc(100% - var(--border-width)));\n transition: 200ms;\n}\n\n.btn:where(:hover, :focus) {\n color: #fff;\n}"},{"created":"2024-01-22T16:59:46.000Z","isPrivate":0,"projectId":"ea22ff","snapshot":null,"tags":null,"title":"button by Randdose","updated":"2024-01-22T16:59:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":49,"cssLen":986,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n all: unset;\n display: flex;\n align-items: center;\n position: relative;\n padding: 0.6em 2em;\n border: mediumspringgreen solid 0.15em;\n border-radius: 0.25em;\n color: mediumspringgreen;\n font-size: 1.5em;\n font-weight: 600;\n cursor: pointer;\n overflow: hidden;\n transition: border 300ms, color 300ms;\n user-select: none;\n}\n\n.button p {\n z-index: 1;\n}\n\n.button:hover {\n color: #212121;\n}\n\n.button:active {\n border-color: teal;\n}\n\n.button::after, .button::before {\n content: \"\";\n position: absolute;\n width: 9em;\n aspect-ratio: 1;\n background: mediumspringgreen;\n opacity: 50%;\n border-radius: 50%;\n transition: transform 500ms, background 300ms;\n}\n\n.button::before {\n left: 0;\n transform: translateX(-8em);\n}\n\n.button::after {\n right: 0;\n transform: translateX(8em);\n}\n\n.button:hover:before {\n transform: translateX(-1em);\n}\n\n.button:hover:after {\n transform: translateX(1em);\n}\n\n.button:active:before,\n.button:active:after {\n background: teal;\n}"},{"created":"2024-01-22T16:59:46.000Z","isPrivate":0,"projectId":"9373ff","snapshot":null,"tags":null,"title":"button by PriyanshuGupta28","updated":"2024-01-22T16:59:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":167,"cssLen":1799,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" ","css":".pushable {\n position: relative;\n background: transparent;\n padding: 0px;\n border: none;\n cursor: pointer;\n outline-offset: 4px;\n outline-color: deeppink;\n transition: filter 250ms;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.shadow {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n background: hsl(226, 25%, 69%);\n border-radius: 8px;\n filter: blur(2px);\n will-change: transform;\n transform: translateY(2px);\n transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);\n}\n\n.edge {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n border-radius: 8px;\n background: linear-gradient(\n to right,\n hsl(248, 39%, 39%) 0%,\n hsl(248, 39%, 49%) 8%,\n hsl(248, 39%, 39%) 92%,\n hsl(248, 39%, 29%) 100%\n );\n}\n\n.front {\n display: block;\n position: relative;\n border-radius: 8px;\n background: hsl(248, 53%, 58%);\n padding: 16px 32px;\n color: white;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen,\n Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n font-size: 1rem;\n transform: translateY(-4px);\n transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);\n}\n\n.pushable:hover {\n filter: brightness(110%);\n}\n\n.pushable:hover .front {\n transform: translateY(-6px);\n transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);\n}\n\n.pushable:active .front {\n transform: translateY(-2px);\n transition: transform 34ms;\n}\n\n.pushable:hover .shadow {\n transform: translateY(4px);\n transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);\n}\n\n.pushable:active .shadow {\n transform: translateY(1px);\n transition: transform 34ms;\n}\n\n.pushable:focus:not(:focus-visible) {\n outline: none;\n}\n"}]}},"actionData":null,"errors":null}