{"loaderData":{"0":null,"0-2":{"total":7067,"projects":[{"created":"2024-01-22T17:00:39.000Z","isPrivate":0,"projectId":"29658c","snapshot":null,"tags":null,"title":"button by Shashvhat","updated":"2024-01-22T17:00:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":1057,"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 0.9em;\n font-size: 1em;\n background-color: transparent;\n border: 0.2em solid;\n border-color: #00ffff #04ff00 #0051ff #d400ff;\n border-radius: 1.5em;\n color: #fff;\n cursor: pointer;\n transition: transform 0.2s ease, border-radius 0.2s ease, color 0.2s ease,\n border-shadow 0.2s ease, border-style 0.2s ease;\n}\n\n.button:active {\n}\n\n.button:hover {\n transform: scale(1.3);\n border-radius: 1.5em;\n animation: btn-animation 0.4s 0.2s linear infinite;\n color: #00ddff;\n}\n\n@keyframes btn-animation {\n 0% {\n border-color: #00ffff #04ff00 #0051ff #d400ff;\n transform: rotate(5deg) scale(1.3);\n }\n\n 25% {\n border-color: #d400ff #00ffff #04ff00 #0051ff;\n transform: rotate(-5deg) scale(1.3);\n }\n\n 50% {\n border-color: #0051ff #d400ff #00ffff #04ff00;\n transform: rotate(5deg) scale(1.3);\n }\n\n 75% {\n border-color: #04ff00 #0051ff #d400ff #00ffff;\n transform: rotate(-5deg) scale(1.3);\n }\n\n 100% {\n border-color: #00ffff #04ff00 #0051ff #d400ff;\n transform: rotate(5deg) scale(1.3);\n }\n}"},{"created":"2024-01-22T17:00:39.000Z","isPrivate":0,"projectId":"46f591","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2011,"cssLen":1160,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background-color: rgb(20, 20, 20);\n border: none;\n font-weight: 600;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.164);\n cursor: pointer;\n transition-duration: 0.3s;\n overflow: hidden;\n position: relative;\n gap: 1px;\n}\n\n.svgIcon {\n width: 12px;\n transition-duration: 0.3s;\n}\n\n.svgIcon path {\n fill: white;\n}\n\n.button:hover {\n width: 140px;\n border-radius: 50px;\n transition-duration: 0.3s;\n background-color: rgb(255, 69, 69);\n align-items: center;\n gap: 0;\n}\n\n.button:hover .bin-bottom {\n width: 50px;\n transition-duration: 0.3s;\n transform: translateY(60%);\n}\n.bin-top {\n transform-origin: bottom right;\n}\n.button:hover .bin-top {\n width: 50px;\n transition-duration: 0.3s;\n transform: translateY(60%) rotate(160deg);\n}\n.button::before {\n position: absolute;\n top: -20px;\n content: \"Delete\";\n color: white;\n transition-duration: 0.3s;\n font-size: 2px;\n}\n\n.button:hover::before {\n font-size: 13px;\n opacity: 1;\n transform: translateY(35px);\n transition-duration: 0.3s;\n}\n"},{"created":"2024-01-22T17:00:39.000Z","isPrivate":0,"projectId":"dcbd83","snapshot":null,"tags":null,"title":"button by iamriishav","updated":"2024-01-22T17:00:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":48,"cssLen":1063,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n padding: 15px 30px;\n border: none;\n outline: none;\n border-radius: 30px;\n font-size: 1.5rem;\n z-index: 1;\n position: relative;\n -webkit-box-shadow: 0 5px 15px rgba(33, 33, 33, .2);\n box-shadow: 0 5px 15px rgba(33, 33, 33, .2);\n overflow: hidden;\n cursor: pointer;\n}\n\nbutton > span {\n z-index: 2;\n}\n\nbutton::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 30px;\n background-color: #212121;\n z-index: -1;\n overflow: hidden;\n -webkit-transform: scaleX(0);\n -ms-transform: scaleX(0);\n transform: scaleX(0);\n -webkit-transform-origin: left;\n -ms-transform-origin: left;\n transform-origin: left;\n -webkit-transition: -webkit-transform 0.2s ease-in;\n transition: -webkit-transform 0.2s ease-in;\n transition: transform 0.2s ease-in;\n}\n\nbutton:hover {\n color: #e8e8e8;\n}\n\nbutton:hover::before {\n -webkit-transform: scaleX(1);\n -ms-transform: scaleX(1);\n transform: scaleX(1);\n -webkit-transform-origin: left;\n -ms-transform-origin: left;\n transform-origin: left;\n}"},{"created":"2024-01-22T17:00:39.000Z","isPrivate":0,"projectId":"c32d9e","snapshot":null,"tags":null,"title":"button by ozgeozkaraa01","updated":"2024-01-22T17:00:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":22,"cssLen":470,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n font-size: 20px;\n background-color: white;\n color: black;\n width: 45px;\n height: 45px;\n opacity: 0.75;\n border: 1px solid #e7eae8;\n border-radius: 8px;\n cursor: pointer;\n animation: bounce_513 1s infinite;\n}\n\n@keyframes bounce_513 {\n 0%,\n 100% {\n transform: translateY(-25%);\n animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n }\n\n 50% {\n transform: translateY(0);\n animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n }\n}\n"},{"created":"2024-01-22T17:00:39.000Z","isPrivate":0,"projectId":"0560f7","snapshot":null,"tags":null,"title":"button by NabeelAhmadK","updated":"2024-01-22T17:00:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":859,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n width: fit-content;\n height: 45px;\n background: #ffffff0d;\n border-radius: 8px;\n border: 2px solid #334b79;\n font-size: 15px;\n font-weight: bold;\n color: #334b79;\n -webkit-transition: 0.5s all ease;\n transition: 0.5s all ease;\n position: relative;\n overflow: hidden;\n padding: 10px 25px;\n z-index: 1;\n}\n\nbutton:before {\n width: 50%;\n height: 100%;\n content: \"\";\n margin: auto;\n position: absolute;\n top: 0%;\n left: -50%;\n background: #334b79;\n transition: all 0.5s ease;\n z-index: -1;\n}\n\nbutton:after {\n width: 50%;\n height: 100%;\n content: \"\";\n margin: auto;\n position: absolute;\n top: 0%;\n left: 100%;\n background: #334b79;\n transition: all 0.5s ease;\n z-index: -1;\n}\n\nbutton:hover {\n color: white;\n cursor: pointer;\n}\n\nbutton:hover:before {\n top: 0;\n left: 0;\n}\n\nbutton:hover:after {\n top: 0;\n left: 50%;\n}"},{"created":"2024-01-22T17:00:39.000Z","isPrivate":0,"projectId":"5d16cb","snapshot":null,"tags":null,"title":"button by Rodrypaladin","updated":"2024-01-22T17:00:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":708,"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(121, 235, 250);\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: rgb(0, 208, 236);\n transition: all 0.15s ease-in;\n}\n\nbutton:hover::after {\n transform: translate(-5px, -5px);\n}\n\nbutton:hover {\n transform: translate(5px, 5px);\n}\n\nbutton:active::after {\n background-color: rgb(0, 174, 197);\n}"},{"created":"2024-01-22T17:00:39.000Z","isPrivate":0,"projectId":"3db115","snapshot":null,"tags":null,"title":"button by watchakorn-18k","updated":"2024-01-22T17:00:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":51,"cssLen":844,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn-space {\n padding: 15px 45px;\n text-align: center;\n text-transform: uppercase;\n -webkit-transition: 0.5s;\n transition: 0.5s;\n background-size: 500% auto;\n font-weight: bold;\n font-size: 1rem;\n color: rgba(255, 255, 255, 0.103);\n border-radius: 10px;\n}\n\n.btn-space:hover {\n background-position: right center;\n border-image-source: linear-gradient(90deg, #d53a9d,#743ad5 );\n -webkit-box-shadow: 0 0 20px #743ad5;\n box-shadow: 0 0 20px #743ad5;\n color: rgb(255, 255, 255);\n text-shadow: 1px 1px 10px #d53a9d;\n}\n\n.space {\n background-image: -webkit-gradient(linear, left top, right top, from(#743ad5), color-stop(51%, #d53a9d), to(#743ad5));\n background-image: linear-gradient(to right, #743ad5 0%, #d53a9d 51%, #743ad5 100%);\n border-image-source: linear-gradient(45deg, #743ad5, #d53a9d );\n border-image-outset: 1em;\n}\n\n\n\n"},{"created":"2024-01-22T17:00:39.000Z","isPrivate":0,"projectId":"807602","snapshot":null,"tags":null,"title":"button by Rodrypaladin","updated":"2024-01-22T17:00:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":705,"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: rgb(224, 64, 0);\n transition: all 0.15s ease-in;\n}\n\nbutton:hover::after {\n transform: translate(-5px, -5px);\n}\n\nbutton:hover {\n transform: translate(5px, 5px);\n}\n\nbutton:active::after {\n background-color: rgb(183, 52, 0);\n}"},{"created":"2024-01-22T17:00:39.000Z","isPrivate":0,"projectId":"bc8f2f","snapshot":null,"tags":null,"title":"button by Rodrypaladin","updated":"2024-01-22T17:00:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":707,"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(255, 209, 81);\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: rgb(255, 187, 0);\n transition: all 0.15s ease-in;\n}\n\nbutton:hover::after {\n transform: translate(-5px, -5px);\n}\n\nbutton:hover {\n transform: translate(5px, 5px);\n}\n\nbutton:active::after {\n background-color: rgb(207, 152, 0);\n}"},{"created":"2024-01-22T17:00:39.000Z","isPrivate":0,"projectId":"ee676b","snapshot":null,"tags":null,"title":"button by ArturCodeCraft","updated":"2024-01-22T17:00:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":44,"cssLen":459,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"Hover me!","css":"/* ============================ */\na {\n text-decoration: none;\n}\n/* ============================ */\n.menu__link {\n color: #fff;\n line-height: 2;\n position: relative;\n}\n\n.menu__link::before {\n content: '';\n width: 0;\n height: 2px;\n border-radius: 2px;\n background-color: #fff;\n position: absolute;\n bottom: -.25rem;\n left: 50%;\n transition: width .4s, left .4s;\n}\n\n.menu__link:hover::before {\n width: 100%;\n left: 0;\n}"},{"created":"2024-01-22T17:00:39.000Z","isPrivate":0,"projectId":"1000c3","snapshot":null,"tags":null,"title":"button by devdariill","updated":"2024-01-22T17:00:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":329,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n color: #fff;\n padding: 0.7em 1.7em;\n font-size: 18px;\n border-radius: 0.5em;\n background: #212121;\n border: 1px solid #212121;\n transition: all 0.3s;\n box-shadow: 6px 6px 12px #000, -6px -6px 12px #2f2f2f;\n}\n\nbutton:active {\n color: #666;\n box-shadow: inset 4px 4px 12px #000, inset -4px -4px 12px #1f1f1f;\n}\n"},{"created":"2024-01-22T17:00:38.000Z","isPrivate":0,"projectId":"2df4cf","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":444,"cssLen":855,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n","css":".button {\n backface-visibility: hidden;\n position: relative;\n cursor: pointer;\n display: flex;\n align-items: center;\n text-align: center;\n justify-content: center;\n white-space: nowrap;\n background: linear-gradient(180deg,#ce8 0%,#592 100%);\n border-radius: 20px;\n border: 0.5px solid #8c4;\n border-width: 0.5px 0.5px 0.5px 0.5px;\n padding: 12px 50px 12px 15px;\n box-shadow: inset 0px 1px 0px rgba(255,255,255,0.6),0px 1px 2px rgba(0,0,0,0.5);\n color: #372;\n font-size: 16px;\n font-family: Helvetica Neue;\n font-weight: 900;\n font-style: normal;\n text-shadow: 0px 1px 0px rgba(255,255,255,0.5)\n}\n\n.button span {\n color: #372;\n background: #fff;\n border-radius: 20px;\n border: 3px solid #371;\n border-width: 3px 3px 3px 3px;\n padding: 8px 8px 7px 8px;\n margin: 0px 0px 0px 0px;\n position: absolute;\n top: 0px;\n right: 0px;\n}\n\n"}]}},"actionData":null,"errors":null}