{"loaderData":{"0":null,"0-3":{"total":7311,"projects":[{"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}"},{"created":"2024-01-22T16:59:44.000Z","isPrivate":0,"projectId":"ec50ec","snapshot":null,"tags":null,"title":"button by felipesntr","updated":"2024-01-22T16:59:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":35,"cssLen":316,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n font-size: 1rem;\n padding: 0.8em 2em;\n background-color: #000;\n border: 3px solid yellow;\n border-radius: 1em;\n color: #fff;\n font-weight: bolder;\n transition: cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.4s;\n box-shadow: -5px 5px 0px 0px yellow;\n}\n\nbutton:hover {\n transform: translate(5px, -5px);\n}"},{"created":"2024-01-22T16:59:44.000Z","isPrivate":0,"projectId":"b989e4","snapshot":null,"tags":null,"title":"button by zjssun","updated":"2024-01-22T16:59:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":2756,"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 padding: 10px 22px;\n border-radius: 6px;\n border: none;\n color: #fff;\n cursor: pointer;\n background-color: #7d2ae8;\n transition: all 0.2s ease;\n}\n\n.button:active {\n transform: scale(0.96);\n}\n\n.button:before,\n.button:after {\n position: absolute;\n content: \"\";\n width: 150%;\n left: 50%;\n height: 100%;\n transform: translateX(-50%);\n z-index: -1000;\n background-repeat: no-repeat;\n}\n\n.button:hover:before {\n top: -70%;\n background-image: radial-gradient(circle, #7d2ae8 20%, transparent 20%),\n radial-gradient(circle, transparent 20%, #7d2ae8 20%, transparent 30%),\n radial-gradient(circle, #7d2ae8 20%, transparent 20%),\n radial-gradient(circle, #7d2ae8 20%, transparent 20%),\n radial-gradient(circle, transparent 10%, #7d2ae8 15%, transparent 20%),\n radial-gradient(circle, #7d2ae8 20%, transparent 20%),\n radial-gradient(circle, #7d2ae8 20%, transparent 20%),\n radial-gradient(circle, #7d2ae8 20%, transparent 20%),\n radial-gradient(circle, #7d2ae8 20%, transparent 20%);\n background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,\n 10% 10%, 18% 18%;\n background-position: 50% 120%;\n animation: greentopBubbles 0.6s ease;\n}\n\n@keyframes greentopBubbles {\n 0% {\n background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,\n 40% 90%, 55% 90%, 70% 90%;\n }\n\n 50% {\n background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,\n 50% 50%, 65% 20%, 90% 30%;\n }\n\n 100% {\n background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,\n 50% 40%, 65% 10%, 90% 20%;\n background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;\n }\n}\n\n.button:hover::after {\n bottom: -70%;\n background-image: radial-gradient(circle, #7d2ae8 20%, transparent 20%),\n radial-gradient(circle, #7d2ae8 20%, transparent 20%),\n radial-gradient(circle, transparent 10%, #7d2ae8 15%, transparent 20%),\n radial-gradient(circle, #7d2ae8 20%, transparent 20%),\n radial-gradient(circle, #7d2ae8 20%, transparent 20%),\n radial-gradient(circle, #7d2ae8 20%, transparent 20%),\n radial-gradient(circle, #7d2ae8 20%, transparent 20%);\n background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;\n background-position: 50% 0%;\n animation: greenbottomBubbles 0.6s ease;\n}\n\n@keyframes greenbottomBubbles {\n 0% {\n background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,\n 70% -10%, 70% 0%;\n }\n\n 50% {\n background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,\n 105% 0%;\n }\n\n 100% {\n background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,\n 110% 10%;\n background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;\n }\n}"},{"created":"2024-01-22T16:59:44.000Z","isPrivate":0,"projectId":"8e1435","snapshot":null,"tags":null,"title":"button by AqFox","updated":"2024-01-22T16:59:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":23,"cssLen":750,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n --c: #fff;\n /* text color */\n background: linear-gradient(90deg, #0000 33%, #fff5, #0000 67%) var(--_p,100%)/300% no-repeat,\n #004dff;\n /* background color */\n color: #0000;\n border: none;\n transform: perspective(500px) rotateY(calc(20deg*var(--_i,-1)));\n text-shadow: calc(var(--_i,-1)* 0.08em) -.01em 0 var(--c),\n calc(var(--_i,-1)*-0.08em) .01em 2px #0004;\n outline-offset: .1em;\n transition: 0.3s;\n}\n\nbutton:hover,\nbutton:focus-visible {\n --_p: 0%;\n --_i: 1;\n}\n\nbutton:active {\n text-shadow: none;\n color: var(--c);\n box-shadow: inset 0 0 9e9q #0005;\n transition: 0s;\n}\n\nbutton {\n font-family: system-ui, sans-serif;\n font-weight: bold;\n font-size: 2rem;\n margin: 0;\n cursor: pointer;\n padding: .1em .3em;\n}"},{"created":"2024-01-22T16:59:44.000Z","isPrivate":0,"projectId":"346722","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T16:59:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":420,"cssLen":1041,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".cssbuttons-io-button {\n background: #a370f0;\n color: white;\n font-family: inherit;\n padding: 0.35em;\n padding-left: 1.2em;\n font-size: 17px;\n font-weight: 500;\n border-radius: 0.9em;\n border: none;\n letter-spacing: 0.05em;\n display: flex;\n align-items: center;\n box-shadow: inset 0 0 1.6em -0.6em #714da6;\n overflow: hidden;\n position: relative;\n height: 2.8em;\n padding-right: 3.3em;\n cursor: pointer;\n}\n\n.cssbuttons-io-button .icon {\n background: white;\n margin-left: 1em;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 2.2em;\n width: 2.2em;\n border-radius: 0.7em;\n box-shadow: 0.1em 0.1em 0.6em 0.2em #7b52b9;\n right: 0.3em;\n transition: all 0.3s;\n}\n\n.cssbuttons-io-button:hover .icon {\n width: calc(100% - 0.6em);\n}\n\n.cssbuttons-io-button .icon svg {\n width: 1.1em;\n transition: transform 0.3s;\n color: #7b52b9;\n}\n\n.cssbuttons-io-button:hover .icon svg {\n transform: translateX(0.1em);\n}\n\n.cssbuttons-io-button:active .icon {\n transform: scale(0.95);\n}\n"},{"created":"2024-01-22T16:59:44.000Z","isPrivate":0,"projectId":"87436d","snapshot":null,"tags":null,"title":"button by alshahwan","updated":"2024-01-22T16:59:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":771,"cssLen":689,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"/* From uiverse.io by @alshahwan */\n/* From uiverse.io by @alshahwan */\nbutton {\n background-color: #fff;\n border: 1px solid #0077b5;\n padding: 5px;\n position: relative;\n width: 7.2em;\n height: 2em;\n transition: 0.5s;\n font-size: 17px;\n border-radius: 0.4em;\n}\n\nbutton p {\n position: absolute;\n top: 0.4em;\n left: 1.2em;\n margin: 0;\n padding: 0;\n transition: .5s;\n color: #0077b5;\n}\n\nbutton svg {\n position: absolute;\n top: 0.45em;\n right: 0.5em;\n margin: 0;\n padding: 0;\n opacity: 0;\n transition: 0.5s;\n height: 1em;\n fill: #fff\n}\n\nbutton:hover p {\n left: 0.6em;\n color: #fff\n}\n\nbutton:hover svg {\n opacity: 1;\n}\n\nbutton:hover {\n background-color: #0077b5;\n}\n"},{"created":"2024-01-22T16:59:44.000Z","isPrivate":0,"projectId":"6b21c7","snapshot":null,"tags":null,"title":"button by satyamchaudharydev","updated":"2024-01-22T16:59:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":409,"cssLen":1092,"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 transition: all 0.3s ease-in-out;\n box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);\n padding-block: 0.5rem;\n padding-inline: 1.25rem;\n background-color: rgb(0 107 179);\n border-radius: 9999px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #ffff;\n gap: 10px;\n font-weight: bold;\n border: 3px solid #ffffff4d;\n outline: none;\n overflow: hidden;\n font-size: 15px;\n}\n\n.icon {\n width: 24px;\n height: 24px;\n transition: all 0.3s ease-in-out;\n}\n\n.button:hover {\n transform: scale(1.05);\n border-color: #fff9;\n}\n\n.button:hover .icon {\n transform: translate(4px);\n}\n\n.button:hover::before {\n animation: shine 1.5s ease-out infinite;\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n width: 100px;\n height: 100%;\n background-image: linear-gradient(\n 120deg,\n rgba(255, 255, 255, 0) 30%,\n rgba(255, 255, 255, 0.8),\n rgba(255, 255, 255, 0) 70%\n );\n top: 0;\n left: -100px;\n opacity: 0.6;\n}\n\n@keyframes shine {\n 0% {\n left: -100px;\n }\n\n 60% {\n left: 100%;\n }\n\n to {\n left: 100%;\n }\n}\n"},{"created":"2024-01-22T16:59:44.000Z","isPrivate":0,"projectId":"839409","snapshot":null,"tags":null,"title":"button by Ali-Tahmazi99","updated":"2024-01-22T16:59:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":44,"cssLen":738,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"/* From uiverse.io by @Ali-Tahmazi99 */\nbutton {\n display: inline-block;\n width: 150px;\n height: 50px;\n border-radius: 10px;\n border: 1px solid #03045e;\n position: relative;\n overflow: hidden;\n transition: all 0.5s ease-in;\n z-index: 1;\n}\n\nbutton::before,\nbutton::after {\n content: '';\n position: absolute;\n top: 0;\n width: 0;\n height: 100%;\n transform: skew(15deg);\n transition: all 0.5s;\n overflow: hidden;\n z-index: -1;\n}\n\nbutton::before {\n left: -10px;\n background: #240046;\n}\n\nbutton::after {\n right: -10px;\n background: #5a189a;\n}\n\nbutton:hover::before,\nbutton:hover::after {\n width: 58%;\n}\n\nbutton:hover span {\n color: #e0aaff;\n transition: 0.3s;\n}\n\nbutton span {\n color: #03045e;\n font-size: 18px;\n transition: all 0.3s ease-in;\n}"},{"created":"2024-01-22T16:59:44.000Z","isPrivate":0,"projectId":"d190dd","snapshot":null,"tags":null,"title":"button by adeladel522","updated":"2024-01-22T16:59:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":433,"cssLen":1111,"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 transition: all 0.3s ease-in-out;\n box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);\n padding-block: 0.5rem;\n padding-inline: 1.25rem;\n background-color: rgb(0 107 179);\n border-radius: 9999px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n color: #ffff;\n gap: 10px;\n font-weight: bold;\n border: 3px solid #ffffff4d;\n outline: none;\n overflow: hidden;\n font-size: 15px;\n}\n\n.icon {\n width: 24px;\n height: 24px;\n transition: all 0.3s ease-in-out;\n}\n\n.button:hover {\n transform: scale(1.05);\n border-color: #fff9;\n}\n\n.button:hover .icon {\n transform: translate(4px);\n}\n\n.button:hover::before {\n animation: shine 1.5s ease-out infinite;\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n width: 100px;\n height: 100%;\n background-image: linear-gradient(\n 120deg,\n rgba(255, 255, 255, 0) 30%,\n rgba(255, 255, 255, 0.8),\n rgba(255, 255, 255, 0) 70%\n );\n top: 0;\n left: -100px;\n opacity: 0.6;\n}\n\n@keyframes shine {\n 0% {\n left: -100px;\n }\n\n 60% {\n left: 100%;\n }\n\n to {\n left: 100%;\n }\n}\n"},{"created":"2024-01-22T16:59:44.000Z","isPrivate":0,"projectId":"283927","snapshot":null,"tags":null,"title":"button by pipic1","updated":"2024-01-22T16:59:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":37,"cssLen":635,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n --key-text-color: #969faf;\n --docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff,\n 0 1px 2px 1px rgba(30, 35, 90, 0.4);\n --docsearch-key-gradient: linear-gradient(-225deg, #d5dbe4, #f8f8f8);\n border: none;\n background: var(--docsearch-key-gradient);\n border-radius: 3px;\n box-shadow: var(--docsearch-key-shadow);\n color: var(--key-text-color);\n cursor: pointer;\n height: 2.5em;\n text-align: center;\n padding: 0.6em;\n margin: 0 0.6em;\n display: inline-block;\n text-transform: uppercase;\n font-weight: bold;\n font-size: 1em;\n min-width: 1em;\n line-height: 1em;\n user-select: none;\n}\n"},{"created":"2024-01-22T16:59:44.000Z","isPrivate":0,"projectId":"519431","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T16:59:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":104,"cssLen":1699,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n transform: rotate(-25deg) skew(25deg);\n transform-style: preserve-3d;\n position: relative;\n list-style: none;\n width: 100px;\n height: 32px;\n border: none;\n background: transparent;\n font-family: inherit;\n cursor: pointer;\n}\n\nbutton:before {\n content: '';\n position: absolute;\n bottom: -10px;\n left: -5px;\n width: 100%;\n height: 10px;\n background: #2a2a2a;\n transform: skewX(-41deg);\n}\n\nbutton:after {\n content: '';\n position: absolute;\n top: 5px;\n left: -9px;\n width: 9px;\n height: 100%;\n background: #2a2a2a;\n transform: skewY(-49deg);\n}\n\nbutton span {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: #2a2a2a;\n color: #fff;\n font-size: 25px;\n transition: 1.1s ease-out;\n}\n\nbutton:hover span {\n z-index: 1000;\n transition: .3s;\n color: #fff;\n}\n\nbutton:hover span:nth-child(5) {\n transform: translate(40px, -40px);\n opacity: 1;\n}\n\nbutton:hover span:nth-child(4) {\n transform: translate(30px, -30px);\n opacity: .8;\n}\n\nbutton:hover span:nth-child(3) {\n transform: translate(20px, -20px);\n opacity: .6;\n}\n\nbutton:hover span:nth-child(2) {\n transform: translate(10px, -10px);\n opacity: .4;\n}\n\nbutton:hover span:nth-child(1) {\n transform: translate(0px, 0px);\n opacity: .2;\n}\n\nbutton:active span:nth-child(5) {\n transform: translate(20px, -20px);\n opacity: 1;\n}\n\nbutton:active span:nth-child(4) {\n transform: translate(15px, -15px);\n}\n\nbutton:active span:nth-child(3) {\n transform: translate(10px, -10px);\n}\n\nbutton:active span:nth-child(2) {\n transform: translate(5px, -5px);\n}\n\nbutton:active span:nth-child(1) {\n transform: translate(0px, 0px);\n}\n\nbutton:nth-child(1):hover span {\n background: #52E19F;\n}"}]}},"actionData":null,"errors":null}