{"loaderData":{"0":null,"0-2":{"total":7077,"projects":[{"created":"2024-01-22T17:00:13.000Z","isPrivate":0,"projectId":"71e35e","snapshot":null,"tags":null,"title":"button by JamesAchiver","updated":"2024-01-22T17:00:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":55,"cssLen":633,"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: 0.5em 1.2em;\n font-size: 1.8em;\n font-family: Calibri;\n background-color: #5b04bf;\n border: none;\n color: #FFF;\n cursor: pointer;\n align-items: center;\n box-shadow: inset 0px 38px 25px 0 #5b04bf, inset 0 0px 0px 0px #084748a8, inset 0 69px 0px 0px #d74589af;\n border-radius: 0.6em;\n}\n\n.button:hover {\n padding: 0.7em 1.4em;\n transition: 0.4s ease-in-out;\n box-shadow: inset 0px 38px 25px 5px #5b04bf, inset 10px 40px 10px 0px #084748a8, inset 0 69px 0px 0px #31b0d7de;\n}\n\n.button:active {\n box-shadow: 0.2em 0.2em 0.3em rgba(0,0,0,0.3);\n transform: translate(0.1em , 0.1em);\n}"},{"created":"2024-01-22T17:00:13.000Z","isPrivate":0,"projectId":"7c255f","snapshot":null,"tags":null,"title":"button by devestter","updated":"2024-01-22T17:00:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":532,"cssLen":503,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n padding: 12px 19px;\n border: none;\n color: rgb(16, 52, 170);\n cursor: pointer;\n background-color: rgb(190, 219, 253);\n border-radius: 7px;\n font-weight: bold;\n transition: 0.5s;\n display: flex;\n gap: 4px;\n align-items: center;\n font-size: 13px;\n box-shadow: rgba(150, 143, 143, 0.2) 0px 2px 8px 0px;\n}\n\n.button:hover {\n background-color: rgb(164, 206, 253);\n box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;\n}\n\n.saveicon {\n width: 17px;\n}"},{"created":"2024-01-22T17:00:13.000Z","isPrivate":0,"projectId":"583b58","snapshot":null,"tags":null,"title":"button by prashantj510","updated":"2024-01-22T17:00:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":298,"cssLen":833,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background: none;\n border: none;\n padding: 15px 15px;\n border-radius: 10px;\n}\n\nbutton:hover {\n background: rgba(170, 170, 170, 0.062);\n transition: 0.5s;\n}\n\nbutton svg {\n color: #fff;\n}\n\nbutton:active {\n animation-name: shake;\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n}\n\n@keyframes shake {\n 0% {\n transform: translateX(0);\n }\n\n 10% {\n transform: translateX(-10px);\n }\n\n 20% {\n transform: translateX(10px);\n }\n\n 30% {\n transform: translateX(-10px);\n }\n\n 40% {\n transform: translateX(10px);\n }\n\n 50% {\n transform: translateX(-10px);\n }\n\n 60% {\n transform: translateX(10px);\n }\n\n 70% {\n transform: translateX(-10px);\n }\n\n 80% {\n transform: translateX(10px);\n }\n\n 90% {\n transform: translateX(-10px);\n }\n\n 100% {\n transform: translateX(0);\n }\n}\n"},{"created":"2024-01-22T17:00:13.000Z","isPrivate":0,"projectId":"6704fc","snapshot":null,"tags":null,"title":"button by isfandiyor132","updated":"2024-01-22T17:00:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":50,"cssLen":550,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n display: flex;\n justify-content: center;\n align-items: center;\n color: #ffffff;\n outline: none;\n height: 50px;\n width: 150px;\n border: none;\n text-decoration: none;\n background-image: linear-gradient(115deg,#4fcf70,#fad648,#a767e5,#12bcfe,#44ce7b);\n}\n\n.btn:hover {\n animation: rotate 0.4s linear infinite;\n}\n\n@keyframes rotate {\n 100% {\n filter: hue-rotate(-360deg)\n }\n}\n\n.btn span {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 42px;\n width: 142px;\n background: #222222;\n font-size: 18px;\n}"},{"created":"2024-01-22T17:00:13.000Z","isPrivate":0,"projectId":"c0ef21","snapshot":null,"tags":null,"title":"button by SujitAdroja","updated":"2024-01-22T17:00:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":38,"cssLen":526,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn {\n position: relative;\n background: none;\n border: 2px solid black;\n font-size: 1.2rem;\n padding: 1rem 2rem;\n border-radius: 0.5rem;\n transition: all 0.3s;\n}\n.btn::before {\n content: \"\";\n height: 0%;\n width: 0%;\n border-radius: 50%;\n top: 50%;\n left: 50%;\n z-index: -1;\n position: absolute;\n background-color: #494958;\n transition: all 0.3s;\n}\n.btn:hover {\n border: 2px solid #32323c;\n color: white;\n}\n.btn:hover::before {\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n border-radius: 0.3rem;\n}\n"},{"created":"2024-01-22T17:00:13.000Z","isPrivate":0,"projectId":"1289d9","snapshot":null,"tags":null,"title":"button by Saiyed-Tanvir","updated":"2024-01-22T17:00:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":147,"cssLen":629,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n BUTTON\n

","css":".btn {\n transform-style: preserve-3d;\n perspective: 1000px;\n}\n\n.sides {\n transition: all 0.07s;\n cursor: pointer;\n}\n\n.top {\n background: linear-gradient(259.35deg, #FF6B00 0%, #BD00FF 100%);\n height: 2cm;\n width: 4cm;\n transform: rotateX(60deg);\n font-weight: bolder;\n padding: 0.5cm 1cm;\n color: white;\n}\n\n.front {\n background: linear-gradient(280.65deg, #BD5000 0%, #8C00BD 100%);\n height: 2cm;\n width: 4cm;\n transform: translateY(-38px) rotateX(-60deg);\n}\n\n.btn:active .top {\n transform: rotateX(60deg) translateZ(0px);\n}\n\n.btn:active .front {\n height: 0.1cm;\n transform: rotateX(-60deg) translateZ(-26px);\n}"},{"created":"2024-01-22T17:00:13.000Z","isPrivate":0,"projectId":"11b29b","snapshot":null,"tags":null,"title":"button by PriyanshuGupta28","updated":"2024-01-22T17:00:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":47,"cssLen":1015,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn {\n display: inline-block;\n padding: 10px 20px;\n border: none;\n background-color: #f44336;\n color: #fff;\n font-size: 20px;\n font-weight: bold;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n transition: all 0.3s ease-in-out;\n}\n\n.btn::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0.2;\n z-index: -1;\n}\n\n.btn:hover {\n background-color: #fff;\n color: #f44336;\n text-shadow: 0 0 5px #f44336;\n box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;\n}\n\n.btn span {\n display: inline-block;\n position: relative;\n transition: all 0.3s ease-in-out;\n}\n\n.btn:hover span {\n transform: rotate(-10deg) scale(1.1);\n}\n"},{"created":"2024-01-22T17:00:13.000Z","isPrivate":0,"projectId":"2a12fc","snapshot":null,"tags":null,"title":"button by ArturCodeCraft","updated":"2024-01-22T17:00:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":64,"cssLen":627,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"/* ============================ */\nbutton {\n border: none;\n background: none;\n padding: 0;\n margin: 0;\n cursor: pointer;\n font-family: inherit;\n}\n/* ============================ */\n.menu__button {\n min-width: 62px;\n height: 36px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 8px 16px;\n border: 1px solid #fff;\n background-color: transparent;\n transition: background-color .4s;\n}\n\n.menu__button:hover {\n background-color: #fff;\n}\n\n.menu__button span {\n color: #fff;\n line-height: 1;\n transition: color .4s;\n}\n\n.menu__button:hover span {\n color: #000;\n}"},{"created":"2024-01-22T17:00:13.000Z","isPrivate":0,"projectId":"d382b3","snapshot":null,"tags":null,"title":"button by kamehame-ha","updated":"2024-01-22T17:00:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":206,"cssLen":1535,"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":"/*\n\nThis is actually the most neutral button desing of all time,\nfits everywhere no matter if it is dark or light mode,\njust change colors. \nI created original using tailwindCSS, here's classes:\n\ntext-blue-500 bg-blue-500/10 border border-blue-500 rounded-md px-2 py-[2px] text-sm cursor-pointer flex shrink-0\ntext-yellow-500 bg-yellow-500/10 border border-yellow-500 rounded-md px-2 py-[2px] text-sm cursor-pointer flex shrink-0\ntext-green-500 bg-green-500/10 border border-green-500 rounded-md px-2 py-[2px] text-sm cursor-pointer flex shrink-0\ntext-indigo-500 bg-indigo-500/10 border border-indigo-500 rounded-md px-2 py-[2px] text-sm cursor-pointer flex shrink-0\n\n*/\n\n.badges {\n display: flex;\n flex-direction: column;\n gap: 1rem; /* 16px */\n align-items: center;\n flex-wrap: wrap;\n justify-content: center;\n}\n\n.badges > button {\n font-size: 0.875rem; /* 14px */\n line-height: 1.25rem; /* 20px */\n padding: 2px .5rem; /* 8px*/\n cursor: pointer;\n border: none;\n border-radius: 0.375rem; /* 6px */\n outline: none;\n}\n\n.badges .blue {\n background-color: rgba(59, 130, 246, 0.10);\n color: rgb(59 130 246);\n border: 1px rgb(59 130 246) solid;\n}\n\n.badges .yellow {\n background-color: rgba(234, 179, 8, 0.10);\n color: rgb(234 179 8);\n border: 1px rgb(234 179 8) solid;\n}\n\n.badges .green {\n background-color: rgba(34, 197, 94, 0.10);\n color: rgb(34 197 94);\n border: 1px rgb(34 197 94) solid;\n}\n\n.badges .red {\n background-color: rgba(239, 68, 68, 0.10);\n color: rgb(239 68 68);\n border: 1px rgb(239 68 68) solid;\n}"},{"created":"2024-01-22T17:00:13.000Z","isPrivate":0,"projectId":"bcbc04","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":62,"cssLen":934,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n /* Variables */\n --button_radius: 0.75em;\n --button_color: #e8e8e8;\n --button_outline_color: #000000;\n font-size: 17px;\n font-weight: bold;\n border: none;\n border-radius: var(--button_radius);\n background: var(--button_outline_color);\n}\n\n.button_top {\n /* New variables */\n --gradient-color-1: #8360c3;\n --gradient-color-2: #2ebf91;\n display: block;\n box-sizing: border-box;\n border: 2px solid var(--button_outline_color);\n border-radius: var(--button_radius);\n padding: 0.75em 1.5em;\n background: linear-gradient(to bottom, var(--gradient-color-1), var(--gradient-color-2));\n color: var(--button_outline_color);\n transform: translateY(-0.2em);\n transition: transform 0.1s ease;\n}\n\nbutton:hover .button_top {\n /* Pull the button upwards when hovered */\n transform: translateY(-0.33em);\n}\n\nbutton:active .button_top {\n /* Push the button downwards when pressed */\n transform: translateY(0);\n}"},{"created":"2024-01-22T17:00:13.000Z","isPrivate":0,"projectId":"b5d465","snapshot":null,"tags":null,"title":"button by Adir-SL","updated":"2024-01-22T17:00:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":1877,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n --fontSize: 2rem;\n --button: 356, 80%;\n --buttonColor: hsl(var(--button), 70%);\n --sideColor: hsl(var(--button), 40%);\n --text: hsl(var(--button), 30%);\n --bgColor: #e8e8e8;\n position: relative;\n font-size: 0;\n font-family: sans-serif;\n transition: all 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8);\n border-radius: 999px;\n padding: calc(var(--fontSize) / 2);\n height: calc(var(--fontSize) * 2);\n min-width: calc(var(--fontSize) * 2);\n line-height: calc(var(--fontSize) * 0.75);\n border: none;\n outline: none;\n background-color: var(--buttonColor);\n transform: rotate(-25deg);\n color: var(--text);\n white-space: nowrap;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n box-shadow: calc(var(--fontSize) / -25) calc(var(--fontSize) / 25) calc(var(--fontSize) / 25) #ffffffbb inset, calc(var(--fontSize) / -25) calc(var(--fontSize) / -50) calc(var(--fontSize) / 25) #ffffff88 inset,\n 0 0 calc(var(--fontSize) / 5) #0f004a77 inset, 0 0 0 calc(var(--fontSize) / 3.6) var(--buttonColor) inset,\n 0 0 calc(var(--fontSize) / 6.25) calc(var(--fontSize) / 3.125) #0f004a44 inset, calc(var(--fontSize) / -25) calc(var(--fontSize) / 12.5) 0 var(--sideColor),\n calc(var(--fontSize) / -8.33) calc(var(--fontSize) / 12.5) calc(var(--fontSize) / 6.25) #0f004a44, calc(var(--fontSize) / -16.666) calc(var(--fontSize) / 12.5) calc(var(--fontSize) / 25) #0f004a66;\n}\n\nbutton:hover {\n transform: rotate(0);\n overflow: visible;\n font-size: var(--fontSize);\n}\n\nbutton::before,\nbutton::after {\n content: \": \";\n font-family: serif;\n font-weight: bold;\n text-shadow: calc(var(--fontSize) / 25) 0 0 var(--sideColor), 0 0 calc(var(--fontSize) / 12.5) #0f004a55,\n calc(var(--fontSize) / 50) 0 0 var(--sideColor), calc(var(--fontSize) / 50) calc(var(--fontSize) / -50) 0 var(--sideColor);\n color: var(--bgColor);\n font-size: var(--fontSize);\n}"},{"created":"2024-01-22T17:00:13.000Z","isPrivate":0,"projectId":"a5cc48","snapshot":null,"tags":null,"title":"button by Rodrypaladin","updated":"2024-01-22T17:00:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":761,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n padding: 10px 20px;\n font-size: 1.1rem;\n background-color: rgb(243, 119, 69);\n border: none;\n color: white;\n position: relative;\n width: 120px;\n height: 45px;\n transition: background-color 0.2s ease-in, all 0.15s ease-in;\n}\n\nbutton::after {\n display: flex;\n align-items: center;\n justify-content: center;\n content: \"Button\";\n width: 120px;\n height: 45px;\n position: absolute;\n top: 0;\n left: 0;\n transform: translate(5px, 5px);\n background-color: white;\n border: 2px solid rgb(224, 64, 0);\n color: rgb(224, 64, 0);\n transition: all 0.15s ease-in;\n}\n\nbutton:hover::after {\n transform: translate(-8px, -9px);\n}\n\nbutton:hover {\n transform: translate(5px, 5px);\n}\n\nbutton:active::after {\n background-color: rgb(255, 218, 203);\n}"}]}},"actionData":null,"errors":null}