{"loaderData":{"0":null,"0-2":{"total":7100,"projects":[{"created":"2024-01-22T16:59:51.000Z","isPrivate":0,"projectId":"cca482","snapshot":null,"tags":null,"title":"button by satyamchaudharydev","updated":"2024-01-22T16:59:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":506,"cssLen":1535,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n width: 140px;\n height: 56px;\n overflow: hidden;\n border: none;\n color: #fff;\n background: none;\n position: relative;\n padding-bottom: 2em;\n cursor: pointer;\n}\n\nbutton > div,\nbutton > svg {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n}\n\nbutton:before {\n content: \"\";\n position: absolute;\n height: 2px;\n bottom: 0;\n left: 0;\n width: 100%;\n transform: scaleX(0);\n transform-origin: bottom right;\n background: currentColor;\n transition: transform 0.25s ease-out;\n}\n\nbutton:hover:before {\n transform: scaleX(1);\n transform-origin: bottom left;\n}\n\nbutton .clone > *,\nbutton .text > * {\n opacity: 1;\n font-size: 1.3rem;\n transition: 0.2s;\n margin-left: 4px;\n}\n\nbutton .clone > * {\n transform: translateY(60px);\n}\n\nbutton:hover .clone > * {\n opacity: 1;\n transform: translateY(0px);\n transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;\n}\n\nbutton:hover .text > * {\n opacity: 1;\n transform: translateY(-60px);\n transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;\n}\n\nbutton:hover .clone > :nth-child(1) {\n transition-delay: 0.15s;\n}\n\nbutton:hover .clone > :nth-child(2) {\n transition-delay: 0.2s;\n}\n\nbutton:hover .clone > :nth-child(3) {\n transition-delay: 0.25s;\n}\n\nbutton:hover .clone > :nth-child(4) {\n transition-delay: 0.3s;\n}\n/* icon style and hover */\nbutton svg {\n width: 20px;\n right: 0;\n top: 50%;\n transform: translateY(-50%) rotate(-50deg);\n transition: 0.2s ease-out;\n}\n\nbutton:hover svg {\n transform: translateY(-50%) rotate(-90deg);\n}\n"},{"created":"2024-01-22T16:59:51.000Z","isPrivate":0,"projectId":"c671b7","snapshot":null,"tags":null,"title":"button by WhiteNervosa","updated":"2024-01-22T16:59:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":33,"cssLen":731,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n font-size: 18px;\n color: #e1e1e1;\n font-family: inherit;\n font-weight: 800;\n cursor: pointer;\n position: relative;\n border: none;\n background: none;\n text-transform: uppercase;\n transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);\n transition-duration: 400ms;\n transition-property: color;\n}\n\nbutton:focus,\nbutton:hover {\n color: #fff;\n}\n\nbutton:focus:after,\nbutton:hover:after {\n width: 100%;\n left: 0%;\n}\n\nbutton:after {\n content: \"\";\n pointer-events: none;\n bottom: -2px;\n left: 50%;\n position: absolute;\n width: 0%;\n height: 2px;\n background-color: #fff;\n transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);\n transition-duration: 400ms;\n transition-property: width, left;\n}"},{"created":"2024-01-22T16:59:51.000Z","isPrivate":0,"projectId":"418a4d","snapshot":null,"tags":null,"title":"button by Yaya12085","updated":"2024-01-22T16:59:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":424,"cssLen":666,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n border: none;\n display: flex;\n padding: 0.75rem 1.5rem;\n background-color: #488aec;\n color: #ffffff;\n font-size: 0.75rem;\n line-height: 1rem;\n font-weight: 700;\n cursor: pointer;\n text-align: center;\n text-transform: uppercase;\n vertical-align: middle;\n align-items: center;\n border-radius: 0.5rem;\n user-select: none;\n gap: 0.75rem;\n box-shadow: 0 4px 6px -1px #488aec31, 0 2px 4px -1px #488aec17;\n transition: all 0.6s ease;\n}\n\nbutton:hover {\n box-shadow: 0 10px 15px -3px #488aec4f, 0 4px 6px -2px #488aec17;\n}\n\nbutton:focus,\nbutton:active {\n opacity: 0.85;\n box-shadow: none;\n}\n\nbutton svg {\n width: 1.25rem;\n height: 1.25rem;\n}\n"},{"created":"2024-01-22T16:59:51.000Z","isPrivate":0,"projectId":"71c90e","snapshot":null,"tags":null,"title":"button by kamehame-ha","updated":"2024-01-22T16:59:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1395,"cssLen":551,"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 justify-content: center;\n align-items: center;\n padding: 10px 15px;\n gap: 15px;\n background-color: #007ACC;\n outline: 3px #007ACC solid;\n outline-offset: -3px;\n border-radius: 5px;\n border: none;\n cursor: pointer;\n transition: 400ms;\n}\n\n.button .text {\n color: white;\n font-weight: 700;\n font-size: 1em;\n transition: 400ms;\n}\n\n.button svg path {\n transition: 400ms;\n}\n\n.button:hover {\n background-color: transparent;\n}\n\n.button:hover .text {\n color: #007ACC;\n}\n\n.button:hover svg path {\n fill: #007ACC;\n}"},{"created":"2024-01-22T16:59:51.000Z","isPrivate":0,"projectId":"d8ef7b","snapshot":null,"tags":null,"title":"button by flxderdev","updated":"2024-01-22T16:59:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":45,"cssLen":1368,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n height: 55px;\n width: 175px;\n margin: auto;\n align-items: center;\n border-radius: 50px;\n border: none;\n text-align: center;\n color: transparent;\n text-shadow: 0 0 0 rgb(255, 255, 255);\n font-size: 17px;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n box-sizing: border-box;\n cursor: pointer;\n transition: transform 50ms ease;\n background: linear-gradient(90deg, #5f03f4, #f441a5, #b81fff, #5f03f4);\n color: #ffffff;\n text-shadow: rgba(140, 0, 255, 0.9) 0px 0px 20px;\n background-size: 400%;\n display: block;\n margin-right: auto;\n margin-left: auto;\n font-family: \"Montserrat\", sans-serif;\n}\n\n.button:hover {\n -webkit-box-shadow: 0px 0px 15px 0px rgba(155, 0, 194, 0.9);\n -moz-box-shadow: 0px 0px 15px 0px rgba(155, 0, 194, 0.9);\n box-shadow: 0px 0px 15px 0px rgba(155, 0, 194, 0.9);\n animation: animate 8s ease infinite;\n transition: box-shadow, 0.4s;\n border: none;\n font-size: 19px;\n transform: scale(1.05, 1.05);\n background: linear-gradient(90deg, #5f03f4, #f441a5, #b81fff, #5f03f4);\n background-size: 400%;\n animation: animate 7s cubic-bezier(0.75, 0.75, 0.75, 0.75) infinite,\n}\n\n.button:hover:before {\n filter: blur(20px);\n opacity: 1;\n animation: animate 8s linear infinite;\n}\n\n@keyframes animate {\n 0% {\n background-position: 0%;\n }\n\n 100% {\n background-position: 400%;\n }\n}\n"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"c5268d","snapshot":null,"tags":null,"title":"button by doniaskima","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":122,"cssLen":1927,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn-23,\n.btn-23 *,\n.btn-23 :after,\n.btn-23 :before,\n.btn-23:after,\n.btn-23:before {\n border: 0 solid;\n box-sizing: border-box;\n}\n\n.btn-23 {\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 text-transform: uppercase;\n}\n\n.btn-23:disabled {\n cursor: default;\n}\n\n.btn-23:-moz-focusring {\n outline: auto;\n}\n\n.btn-23 svg {\n display: block;\n vertical-align: middle;\n}\n\n.btn-23 [hidden] {\n display: none;\n}\n\n.btn-23 {\n border-radius: 99rem;\n border-width: 2px;\n overflow: hidden;\n padding: 0.8rem 3rem;\n position: relative;\n}\n\n.btn-23 span {\n display: grid;\n inset: 0;\n place-items: center;\n position: absolute;\n transition: opacity 0.2s ease;\n}\n\n.btn-23 .marquee {\n --spacing: 5em;\n --start: 0em;\n --end: 5em;\n -webkit-animation: marquee 1s linear infinite;\n animation: marquee 1s linear infinite;\n -webkit-animation-play-state: paused;\n animation-play-state: paused;\n opacity: 0;\n position: relative;\n text-shadow: #fff var(--spacing) 0, #fff calc(var(--spacing) * -1) 0,\n #fff calc(var(--spacing) * -2) 0;\n}\n\n.btn-23:hover .marquee {\n -webkit-animation-play-state: running;\n animation-play-state: running;\n opacity: 1;\n}\n\n.btn-23:hover .text {\n opacity: 0;\n}\n\n@-webkit-keyframes marquee {\n 0% {\n transform: translateX(var(--start));\n }\n\n to {\n transform: translateX(var(--end));\n }\n}\n\n@keyframes marquee {\n 0% {\n transform: translateX(var(--start));\n }\n\n to {\n transform: translateX(var(--end));\n }\n}\n"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"554798","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":575,"cssLen":675,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".Btn {\n width: 100px;\n height: 35px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n border: none;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.164);\n cursor: pointer;\n}\n\n.text {\n width: 65%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n background-color: rgb(2, 153, 153);\n}\n\n.svgIcon {\n width: 35%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n background-color: teal;\n}\n\n.Btn:hover .text {\n background-color: rgb(0, 133, 133);\n}\n\n.Btn:hover .svgIcon {\n background-color: rgb(0, 105, 105);\n}"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"52209b","snapshot":null,"tags":null,"title":"button by cssbuttons-io","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":45,"cssLen":1196,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n display: inline-block;\n padding: 12px 24px;\n border: 1px solid #4f4f4f;\n border-radius: 4px;\n transition: all 0.2s ease-in;\n position: relative;\n overflow: hidden;\n font-size: 19px;\n cursor: pointer;\n color: black;\n z-index: 1;\n}\n\n.button:before {\n content: \"\";\n position: absolute;\n left: 50%;\n transform: translateX(-50%) scaleY(1) scaleX(1.25);\n top: 100%;\n width: 140%;\n height: 180%;\n background-color: rgba(0, 0, 0, 0.05);\n border-radius: 50%;\n display: block;\n transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);\n z-index: -1;\n}\n\n.button:after {\n content: \"\";\n position: absolute;\n left: 55%;\n transform: translateX(-50%) scaleY(1) scaleX(1.45);\n top: 180%;\n width: 160%;\n height: 190%;\n background-color: #39bda7;\n border-radius: 50%;\n display: block;\n transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);\n z-index: -1;\n}\n\n.button:hover {\n color: #ffffff;\n border: 1px solid #39bda7;\n}\n\n.button:hover:before {\n top: -35%;\n background-color: #39bda7;\n transform: translateX(-50%) scaleY(1.3) scaleX(0.8);\n}\n\n.button:hover:after {\n top: -45%;\n background-color: #39bda7;\n transform: translateX(-50%) scaleY(1.3) scaleX(0.8);\n}\n"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"b83d71","snapshot":null,"tags":null,"title":"button by dylanharriscameron","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":44,"cssLen":2675,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".delete-button {\n background-color: #000;\n color: #fff;\n font-size: 44px;\n border: 0.5px solid rgba(0, 0, 0, 0.1);\n padding-bottom: 8px;\n width: 60px;\n height: 65px;\n border-radius: 15px 15px 12px 12px;\n cursor: pointer;\n position: relative;\n will-change: transform;\n transition: all .1s ease-in-out 0s;\n user-select: none;\n /* Add gradient shading to each side */\n background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)),\n linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n background-position: bottom right, bottom right;\n background-size: 100% 100%, 100% 100%;\n background-repeat: no-repeat;\n box-shadow: inset -4px -10px 0px rgba(255, 255, 255, 0.4),\n inset -4px -8px 0px rgba(0, 0, 0, 0.3),\n 0px 2px 1px rgba(0, 0, 0, 0.3),\n 0px 2px 1px rgba(255, 255, 255, 0.1);\n transform: perspective(70px) rotateX(5deg) rotateY(0deg);\n}\n\n.delete-button::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.5));\n z-index: -1;\n border-radius: 15px;\n box-shadow: inset 4px 0px 0px rgba(255, 255, 255, 0.1),\n inset 4px -8px 0px rgba(0, 0, 0, 0.3);\n transition: all .1s ease-in-out 0s;\n}\n\n.delete-button::before {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)),\n linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n background-position: bottom right, bottom right;\n background-size: 100% 100%, 100% 100%;\n background-repeat: no-repeat;\n z-index: -1;\n border-radius: 15px;\n transition: all .1s ease-in-out 0s;\n}\n\n.delete-button:active {\n will-change: transform;\n transform: perspective(80px) rotateX(5deg) rotateY(1deg) translateY(3px) scale(0.96);\n height: 64px;\n border: 0.25px solid rgba(0, 0, 0, 0.2);\n box-shadow: inset -4px -8px 0px rgba(255, 255, 255, 0.2),\n inset -4px -6px 0px rgba(0, 0, 0, 0.8),\n 0px 1px 0px rgba(0, 0, 0, 0.9),\n 0px 1px 0px rgba(255, 255, 255, 0.2);\n transition: all .1s ease-in-out 0s;\n}\n\n.delete-button::after:active {\n background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.2));\n}\n\n.delete-button:active::before {\n content: \"\";\n display: block;\n position: absolute;\n top: 5%;\n left: 20%;\n width: 50%;\n height: 80%;\n background-color: rgba(255, 255, 255, 0.1);\n animation: overlay 0.1s ease-in-out 0s;\n pointer-events: none;\n}\n\n@keyframes overlay {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.delete-button:focus {\n outline: none;\n}"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"d35cdb","snapshot":null,"tags":null,"title":"button by niat786","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":34,"cssLen":708,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n border-radius: .25rem;\n text-transform: uppercase;\n font-style: normal;\n font-weight: 400;\n padding-left: 25px;\n padding-right: 25px;\n color: #fff;\n -webkit-clip-path: polygon(0 0,0 0,100% 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 100%);\n clip-path: polygon(0 0,0 0,100% 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 100%);\n height: 40px;\n font-size: 0.7rem;\n line-height: 14px;\n letter-spacing: 1.2px;\n transition: .2s .1s;\n background-image: linear-gradient(90deg,#1c1c1c,#6220fb);\n border: 0 solid;\n overflow: hidden;\n}\n\nbutton:hover {\n cursor: pointer;\n transition: all .3s ease-in;\n padding-right: 30px;\n padding-left: 30px;\n}"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"8a3d04","snapshot":null,"tags":null,"title":"button by e-coders","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":32,"cssLen":1216,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n appearance: none;\n background-color: #FAFBFC;\n border: 1px solid rgba(27, 31, 35, 0.15);\n border-radius: 6px;\n box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;\n box-sizing: border-box;\n color: #24292E;\n cursor: pointer;\n display: inline-block;\n font-family: -apple-system, system-ui, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n list-style: none;\n padding: 6px 16px;\n position: relative;\n transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n user-select: none;\n -webkit-user-select: none;\n touch-action: manipulation;\n vertical-align: middle;\n white-space: nowrap;\n word-wrap: break-word;\n}\n\nbutton:hover {\n background-color: #F3F4F6;\n text-decoration: none;\n transition-duration: 0.1s;\n}\n\nbutton:disabled {\n background-color: #FAFBFC;\n border-color: rgba(27, 31, 35, 0.15);\n color: #959DA5;\n cursor: default;\n}\n\nbutton:active {\n background-color: #EDEFF2;\n box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;\n transition: none 0s;\n}\n\nbutton:focus {\n outline: 1px transparent;\n}\n\nbutton:before {\n display: none;\n}\n\nbutton:-webkit-details-marker {\n display: none;\n}"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"724eea","snapshot":null,"tags":null,"title":"button by vikiWayne","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":41,"cssLen":679,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n padding: 1em 2em;\n border: none;\n border-radius: 5px;\n font-weight: bold;\n letter-spacing: 5px;\n text-transform: uppercase;\n cursor: pointer;\n color: #2c9caf;\n transition: all 1000ms;\n font-size: 15px;\n position: relative;\n overflow: hidden;\n outline: 2px solid #2c9caf;\n}\n\nbutton:hover {\n color: #ffffff;\n transform: scale(1.1);\n outline: 2px solid #70bdca;\n box-shadow: 4px 5px 17px -4px #268391;\n}\n\nbutton::before {\n content: \"\";\n position: absolute;\n left: -50px;\n top: 0;\n width: 0;\n height: 100%;\n background-color: #2c9caf;\n transform: skewX(45deg);\n z-index: -1;\n transition: width 1000ms;\n}\n\nbutton:hover::before {\n width: 250%;\n}\n"}]}},"actionData":null,"errors":null}