{"loaderData":{"0":null,"0-3":{"total":7308,"projects":[{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"bd350d","snapshot":null,"tags":null,"title":"button by DevVaradPatil","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":1023,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%,-50%);\n width: 130px;\n height: 45px;\n text-align: center;\n line-height: 45px;\n color: #fff;\n font-size: 15px;\n text-transform: uppercase;\n text-decoration: none;\n font-family: sans-serif;\n box-sizing: border-box;\n background: linear-gradient(90deg,#03a9f4,#ffeb3b,#f441af,#03a9f4);\n background-size: 400%;\n border-radius: 30px;\n z-index: 1;\n border: none;\n outline: none;\n}\n\nbutton:hover {\n animation: animate 6s linear infinite;\n}\n\n@keyframes animate {\n 0% {\n background-position: 0%;\n }\n\n 100% {\n background-position: 400%;\n }\n}\n\nbutton::before {\n content: '';\n position: absolute;\n top: -5px;\n left: -5px;\n right: -5px;\n bottom: -5px;\n z-index: -1;\n background: linear-gradient(90deg,#03a9f4,#ffeb3b,#f441af,#03a9f4);\n border-radius: 40px;\n filter: blur(20px);\n opacity: 0;\n transition: 0.5s;\n}\n\nbutton:hover::before {\n filter: blur(20px);\n opacity: 1;\n animation: animate 6s linear infinite;\n}"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"ec39bc","snapshot":null,"tags":null,"title":"button by Gautammsharma","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":48,"cssLen":874,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".comic-button {\n background-color: #ffed4b;\n border: none;\n color: #000;\n font-size: 1.2rem;\n font-weight: bold;\n padding: 0.5rem 1rem;\n text-transform: uppercase;\n text-shadow: 1px 1px 0 #fff;\n box-shadow: 4px 4px 0 #000;\n position: relative;\n overflow: hidden;\n transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\n}\n\n.comic-button:before {\n content: \"\";\n position: absolute;\n top: -20%;\n left: -20%;\n width: 150%;\n height: 150%;\n background-color: rgba(0,0,0,0.2);\n transform: rotate(45deg);\n z-index: -1;\n opacity: 0;\n transition: opacity 0.2s ease-in-out;\n}\n\n.comic-button:hover {\n transform: translate(2px, 2px);\n box-shadow: 6px 6px 0 #000;\n}\n\n.comic-button:hover:before {\n opacity: 1;\n}\n\n.comic-button:active {\n transform: translate(0px, 0px);\n box-shadow: 4px 4px 0 #000;\n}\n\n.comic-button:active:before {\n opacity: 0;\n}\n"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"55b35c","snapshot":null,"tags":null,"title":"button by VashonG","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":249,"cssLen":1878,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n <\n /\n html\n >\n","css":".code-button {\n display: inline-block;\n font-family: \"Menlo\", \"Bitstream Vera Sans Mono\", \"DejaVu Sans Mono\", \"Monaco\", \"Consolas\", monospace;\n margin: 1em;\n border-radius: 3px;\n background: #434d5a;\n border: none;\n padding: 1em 0;\n color: white;\n text-align: center;\n text-decoration: none;\n width: 9em;\n transition: all 0.2s ease, background-color 0.2s ease-in 0.15s, box-shadow 0.2s ease-in 0.15s, color 0s ease;\n}\n\n.code-button__bracket, .code-button__text, .code-button__code {\n display: inline-block;\n margin-right: -3px;\n text-align: center;\n width: 0.5em;\n transition: all 0.2s ease, color 0s ease;\n}\n\n.code-button__bracket {\n font-weight: normal;\n}\n\n.code-button__text {\n opacity: 0;\n position: absolute;\n transition: all 0s ease;\n}\n\n.code-button:hover {\n padding: 1em 0;\n transition: all 0.2s ease, background-color 0.2s ease-in 0.05s, box-shadow 0.2s ease-in 0.05s, color 0s ease;\n}\n\n.code-button:hover .code-button__code, .code-button:hover .code-button__text {\n width: 2em;\n}\n\n.code-button:hover .code-button__code, .code-button:hover .code-button__text, .code-button:hover .code-button__bracket {\n transition: all 0.2s ease, color 0s ease;\n}\n\n.code-button:hover .code-button__code {\n opacity: 0;\n position: absolute;\n}\n\n.code-button:hover .code-button__text {\n opacity: 1;\n position: static;\n}\n\n.code-button--color:hover {\n color: #434d5a;\n}\n\n.code-button--color:hover.code-button--css {\n background-color: #aaffa9;\n box-shadow: inset 15px 5px 70px -10px #aaffa9, inset -15px -5px 70px -10px #11ffbd;\n}\n\n.code-button--color:hover.code-button--html {\n background-color: #fc8f71;\n box-shadow: inset 15px 15px 90px -20px #fc8f71, inset -15px -5px 80px -10px #fcdcab;\n}\n\n.code-button--color:hover.code-button--js {\n background-color: #87e1ed;\n box-shadow: inset 15px 15px 90px -20px #7996d1, inset -15px -5px 80px -10px #87e1ed;\n}\n "},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"6ccbc5","snapshot":null,"tags":null,"title":"button by Remon125","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":133,"cssLen":1068,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" ","css":"/* Start Button 1 */\nbutton {\n padding: 15px 60px;\n background: transparent;\n border: 2px solid #edff00;\n font-size: 15px;\n font-weight: bold;\n color: #ffffff;\n border-radius: 6px;\n cursor: pointer;\n position: relative;\n display: flex;\n overflow: hidden;\n transition: all 0.5s;\n text-transform: uppercase;\n}\n\nbutton:hover {\n color: #0c071e;\n}\n\nbutton span {\n transition: all 0.5s;\n z-index: -1;\n}\n\nbutton span:nth-child(1), \nbutton span:nth-child(2), \nbutton span:nth-child(3), \nbutton span:nth-child(4) {\n position: absolute;\n width: 100%;\n height: 15px;\n background-color: #edff00\n}\n\nbutton span:nth-child(1) {\n top: -100%;\n left: 0%;\n right: 0;\n}\n\nbutton:hover span:nth-child(1) {\n top: 0%;\n}\n\nbutton span:nth-child(2) {\n top: 10px;\n right: 100%;\n}\n\nbutton:hover span:nth-child(2) {\n right: 0;\n}\n\nbutton span:nth-child(3) {\n top: 20px;\n left: 100%;\n right: 0;\n}\n\nbutton:hover span:nth-child(3) {\n left: 0;\n}\n\nbutton span:nth-child(4) {\n bottom: -100%;\n left: 0;\n}\n\nbutton:hover span:nth-child(4) {\n bottom: 0;\n}\n\n/* End Button 1 */"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"b56b07","snapshot":null,"tags":null,"title":"button by eslam-hany","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":592,"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 padding: 10px 50px;\n font-size: 20px;\n border: 1px solid #002B5B;\n text-transform: uppercase;\n cursor: pointer;\n border-radius: 15px;\n transition: all 0.5s;\n z-index: 1;\n}\n\n.btn:hover {\n transform: scale(1.1);\n color: #fff;\n transition: all 0.5s;\n}\n\n.btn::after {\n position: absolute;\n content: \"\";\n top: 50%;\n left: 50%;\n width: 0%;\n height: 100%;\n border-radius: 15px;\n background: linear-gradient(#002B5b,#EA5455);\n transition: all 0.5s;\n z-index: -1;\n}\n\n.btn:hover::after {\n top: 0%;\n left: 0%;\n width: 100%;\n transition: all 0.5s;\n}"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"1e55d9","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":45,"cssLen":861,"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 height: 50px;\n padding: 0 30px;\n border: 2px solid red;\n background: #e8e8e8;\n user-select: none;\n white-space: nowrap;\n transition: all .05s linear;\n color: red;\n font-family: inherit;\n}\n\nbutton:before, button:after {\n content: \"\";\n position: absolute;\n background: #e8e8e8;\n transition: all .2s linear;\n}\n\nbutton:before {\n width: calc(100% + 6px);\n height: calc(100% - 16px);\n top: 8px;\n left: -3px;\n}\n\nbutton:after {\n width: calc(100% - 16px);\n height: calc(100% + 6px);\n top: -3px;\n left: 8px;\n}\n\nbutton:hover {\n cursor: crosshair;\n}\n\nbutton:active {\n transform: scale(0.95);\n}\n\nbutton:hover:before {\n height: calc(100% - 32px);\n top: 16px;\n}\n\nbutton:hover:after {\n width: calc(100% - 32px);\n left: 16px;\n}\n\nbutton span {\n font-size: 15px;\n z-index: 3;\n position: relative;\n font-weight: 600;\n}"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"765dc7","snapshot":null,"tags":null,"title":"button by pritamjoardar","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":16897,"cssLen":2063,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n position: relative;\n padding: 15px 45px;\n background: #f0e644;\n font-size: 17px;\n font-weight: 500;\n color: #181818;\n cursor: pointer;\n border: 1px solid #fec195;\n border-radius: 50px;\n filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.2));\n}\n\nbutton:hover {\n border: 1px solid #f3b182;\n background: linear-gradient(\n 85deg,\n #fec195,\n #fcc196,\n #fabd92,\n #fac097,\n #fac39c\n );\n animation: wind 2s ease-in-out infinite;\n}\n\n@keyframes wind {\n 0% {\n background-position: 0% 50%;\n }\n\n 0% {\n background-position: 50% 100%;\n }\n\n 0% {\n background-position: 0% 50%;\n }\n}\n\n.icon-1 {\n position: absolute;\n top: 0;\n right: 0;\n width: 25px;\n transform-origin: 0 0;\n transform: rotate(10deg);\n transition: all 0.5s ease-in-out;\n filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));\n}\n\nbutton:hover .icon-1 {\n animation: slay-1 3s cubic-bezier(0.52, 0, 0.58, 1) infinite;\n transform: rotate(10deg);\n}\n\n@keyframes slay-1 {\n 0% {\n transform: rotate(10deg);\n }\n\n 50% {\n transform: rotate(-5deg);\n }\n\n 100% {\n transform: rotate(10deg);\n }\n}\n\n.icon-2 {\n position: absolute;\n top: 0;\n left: 25px;\n width: 12px;\n transform-origin: 50% 0;\n transform: rotate(10deg);\n transition: all 1s ease-in-out;\n filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.5));\n}\n\nbutton:hover .icon-2 {\n animation: slay-2 3s cubic-bezier(0.52, 0, 0.58, 1) 1s infinite;\n transform: rotate(0);\n}\n\n@keyframes slay-2 {\n 0% {\n transform: rotate(0deg);\n }\n\n 50% {\n transform: rotate(15deg);\n }\n\n 100% {\n transform: rotate(0);\n }\n}\n\n.icon-3 {\n position: absolute;\n top: 0;\n left: 0;\n width: 18px;\n transform-origin: 50% 0;\n transform: rotate(-5deg);\n transition: all 1s ease-in-out;\n filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.5));\n}\n\nbutton:hover .icon-3 {\n animation: slay-3 2s cubic-bezier(0.52, 0, 0.58, 1) 1s infinite;\n transform: rotate(0);\n}\n\n@keyframes slay-3 {\n 0% {\n transform: rotate(0deg);\n }\n\n 50% {\n transform: rotate(-5deg);\n }\n\n 100% {\n transform: rotate(0);\n }\n}\n"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"95386b","snapshot":null,"tags":null,"title":"button by barisdogansutcu","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":896,"cssLen":2824,"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 width: 180px;\n height: 55px;\n border-radius: 50px;\n border: solid 4px rgba(255, 255, 255, 0);\n background-clip: padding-box;\n box-shadow: 0 4px 20px -2px rgba(39, 94, 254, 0.5);\n background-color: hsl(241deg 44% 49%);\n font-size: 20px;\n letter-spacing: 1px;\n font-weight: 100;\n position: relative;\n cursor: pointer;\n color: white;\n}\n\n.loading {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%,-50%);\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 7px;\n z-index: 0;\n}\n\n.loading i {\n width: 5px;\n height: 5px;\n background-color: white;\n display: inline-flex;\n border-radius: 100%;\n animation-name: loading5234;\n animation-iteration-count: infinite;\n animation-duration: 1s;\n}\n\n@keyframes loading5234 {\n 100% {\n opacity: 0;\n }\n}\n\ninput:checked + button {\n transition-delay: 4s;\n background-color: #31cb20;\n box-shadow: 0 4px 20px -2px rgb(49 203 32);\n}\n\n.title, .approved {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n width: 100%;\n display: block;\n font-size: 15px;\n}\n\nbutton .title {\n background-color: hsl(241deg 44% 49%);\n width: 90%;\n}\n\ninput:checked + button .approved {\n transition-delay: 4s;\n visibility: visible;\n opacity: 1;\n background-color: #31cb20;\n width: 90%;\n}\n\ninput:checked + button .title {\n visibility: hidden;\n opacity: 0;\n transition: all .5s ease;\n}\n\ninput:not(:checked) + button .approved {\n visibility: hidden;\n opacity: 1;\n}\n\ninput {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n z-index: 999;\n outline: none;\n width: 210px;\n height: 60px;\n border-radius: 50px;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n\n.plane {\n width: 55px;\n height: 55px;\n border-radius: 100%;\n position: absolute;\n left: 0;\n z-index: 9;\n top: 0;\n transition: none;\n background-color: transparent;\n opacity: 0;\n}\n\n.plane svg {\n width: 45px;\n height: 45px;\n position: absolute;\n left: 0px;\n top: 0px;\n transform: rotate(90deg) translate(-50%,-40%) scale(1);\n transition: all 0s ease;\n fill: #3c4a57;\n}\n\ninput:checked + button .plane {\n animation: airplane-route 4s forwards;\n animation-timing-function: cubic-bezier(0, 0, 0, 0);\n}\n\n@keyframes airplane-route {\n 0% {\n left: -300px;\n opacity: 1;\n transform: scale(2);\n }\n\n 20% {\n left: 0px;\n transform: scale(1);\n opacity: 1;\n }\n\n 40% {\n left: 100%;\n opacity: 1;\n transform: translateX(-100%);\n }\n\n 60% {\n left: 100%;\n opacity: 1;\n transform: translateX(-100%) translateY(-6%) rotate(180deg);\n }\n\n 80% {\n left: 0%;\n opacity: 1;\n top: -6px;\n transform: translateX(0%) rotate(180deg);\n }\n\n 100% {\n left: 0%;\n opacity: 1;\n transform: translateX(0%) rotate(360deg);\n }\n}\n"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"3b5d4e","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":162,"cssLen":596,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".game-button {\n background-color: #ff7979;\n color: #fff;\n border: none;\n border-radius: 20px;\n padding: 10px 20px;\n font-size: 18px;\n text-transform: uppercase;\n letter-spacing: 2px;\n font-weight: bold;\n box-shadow: 2px 2px 10px #ff7979;\n transition: all 0.2s ease-in-out;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n}\n\n.play-icon {\n width: 24px;\n height: 24px;\n fill: #fff;\n margin-right: 10px;\n}\n\n.game-button:hover {\n background-color: #2f3640;\n color: #ff7979;\n box-shadow: 2px 2px 20px #2f3640;\n transform: translateY(-2px);\n}\n"},{"created":"2024-01-22T16:59:56.000Z","isPrivate":0,"projectId":"d05999","snapshot":null,"tags":null,"title":"button by gauravsharmadriveit","updated":"2024-01-22T16:59:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":694,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n font-weight: 600;\n display: inline-block;\n position: relative;\n border: 3px solid #fff;\n padding: 15px 60px;\n font-size: 16px;\n}\n\n.button::after, .button::before {\n position: absolute;\n content: \"\";\n width: 0;\n height: 0;\n transition: .5s;\n}\n\nbutton::after {\n top: -3px;\n left: -3px;\n border-top: 3px solid transparent;\n border-left: 3px solid transparent;\n}\n\nbutton::before {\n bottom: -3px;\n right: -3px;\n border-bottom: 3px solid transparent;\n border-right: 3px solid transparent;\n}\n\nbutton:hover {\n color: #0668C9;\n cursor: pointer;\n}\n\nbutton:hover::after,\nbutton:hover::before {\n width: calc(50% + 3px);\n height: calc(50% + 3px);\n border-color: #0668C9;\n}"},{"created":"2024-01-22T16:59:56.000Z","isPrivate":0,"projectId":"a36353","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T16:59:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":626,"cssLen":633,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".cssbuttons-io-button {\n display: flex;\n align-items: center;\n font-family: inherit;\n font-weight: 500;\n font-size: 17px;\n padding: 0.8em 1.5em 0.8em 1.2em;\n color: white;\n background: #ad5389;\n background: linear-gradient(0deg, rgb(120, 47, 255) 0%, rgb(185, 132, 255) 100%);\n border: none;\n box-shadow: 0 0.7em 1.5em -0.5em rgb(184, 146, 255);\n letter-spacing: 0.05em;\n border-radius: 20em;\n}\n\n.cssbuttons-io-button svg {\n margin-right: 8px;\n}\n\n.cssbuttons-io-button:hover {\n box-shadow: 0 0.5em 1.5em -0.5em rgb(149, 91, 255);\n}\n\n.cssbuttons-io-button:active {\n box-shadow: 0 0.3em 1em -0.5em rgb(160, 109, 255);\n}"},{"created":"2024-01-22T16:59:56.000Z","isPrivate":0,"projectId":"e1a9b1","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T16:59:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":417,"cssLen":1138,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n --main-focus: #2d8cf0;\n --font-color: #dedede;\n --bg-color-sub: #222;\n --bg-color: #323232;\n --main-color: #dedede;\n position: relative;\n width: 150px;\n height: 40px;\n cursor: pointer;\n display: flex;\n align-items: center;\n border: 2px solid var(--main-color);\n box-shadow: 4px 4px var(--main-color);\n background-color: var(--bg-color);\n border-radius: 10px;\n overflow: hidden;\n}\n\n.button, .button__icon, .button__text {\n transition: all 0.3s;\n}\n\n.button .button__text {\n transform: translateX(25px);\n color: var(--font-color);\n font-weight: 600;\n}\n\n.button .button__icon {\n position: absolute;\n transform: translateX(109px);\n height: 100%;\n width: 39px;\n background-color: var(--bg-color-sub);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.button .svg {\n width: 20px;\n stroke: var(--main-color);\n}\n\n.button:hover {\n background: var(--bg-color);\n}\n\n.button:hover .button__text {\n color: transparent;\n}\n\n.button:hover .button__icon {\n width: 148px;\n transform: translateX(0);\n}\n\n.button:active {\n transform: translate(3px, 3px);\n box-shadow: 0px 0px var(--main-color);\n}"}]}},"actionData":null,"errors":null}