{"loaderData":{"0":null,"0-2":{"total":6508,"projects":[{"created":"2024-01-22T17:00:48.000Z","isPrivate":0,"projectId":"6b675e","snapshot":null,"tags":null,"title":"button by boryanakrasteva","updated":"2024-01-22T17:00:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":389,"cssLen":710,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n background-color: transparent;\n position: relative;\n border: none;\n}\n\n.btn::after {\n content: 'delete';\n position: absolute;\n top: -130%;\n left: 50%;\n transform: translateX(-50%);\n width: fit-content;\n height: fit-content;\n background-color: rgb(168, 7, 7);\n padding: 4px 8px;\n border-radius: 5px;\n transition: .2s linear;\n transition-delay: .2s;\n color: white;\n text-transform: uppercase;\n font-size: 12px;\n opacity: 0;\n visibility: hidden;\n}\n\n.icon {\n transform: scale(1.2);\n transition: .2s linear;\n}\n\n.btn:hover > .icon {\n transform: scale(1.5);\n}\n\n.btn:hover > .icon path {\n fill: rgb(168, 7, 7);\n}\n\n.btn:hover::after {\n visibility: visible;\n opacity: 1;\n top: -160%;\n}\n"},{"created":"2024-01-22T17:00:48.000Z","isPrivate":0,"projectId":"48177b","snapshot":"https://s1.qingting.work/runjs/f890594c7f56.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by benjimich","updated":"2024-01-24T03:03:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":867,"cssLen":713,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n \n \n \n \n \n \n \n

","css":".container {\n display: inline-flex;\n position: relative;\n}\n\n.button {\n cursor: pointer;\n background: none;\n border: none;\n border-radius: 8px;\n padding: .5em 1.5em;\n font-size: 20px;\n font-weight: 600;\n color: #7f5af0;\n transition: all .3s ease;\n}\n\n.arrow {\n fill: #94a1b2;\n position: absolute;\n pointer-events: none;\n width: 24px;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n\n.button:hover {\n letter-spacing: 2px;\n}\n\n.button:hover ~.second {\n opacity: .66;\n right: -20px;\n transition-delay: 50ms;\n}\n\n.button:hover ~.third {\n opacity: .33;\n right: -40px;\n transition-delay: 100ms;\n}\n\n.second, \n.third {\n opacity: 0;\n}"},{"created":"2024-01-22T17:00:47.000Z","isPrivate":0,"projectId":"eb6841","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":404,"cssLen":853,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".container {\n width: 400px;\n height: 400px;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.center {\n width: 180px;\n height: 60px;\n position: absolute;\n}\n\n.btn {\n width: 180px;\n height: 60px;\n cursor: pointer;\n background: transparent;\n border: 2px solid #222;\n outline: none;\n transition: 1s ease-in-out;\n}\n\n.btn svg {\n position: absolute;\n left: 0;\n top: 0;\n fill: none;\n stroke: #91C9FF;\n stroke-dasharray: 150 480;\n stroke-dashoffset: 150;\n transition: 1s ease-in-out;\n}\n\n.btn:hover {\n transition: 1s ease-in-out;\n background: #4F95DA;\n}\n\n.btn:hover span {\n transition: 1s ease-in-out;\n color: #fff;\n}\n\n.btn:hover svg {\n stroke-dashoffset: -480;\n}\n\n.btn span {\n color: black;\n font-size: 18px;\n font-weight: 600;\n}\n"},{"created":"2024-01-22T17:00:47.000Z","isPrivate":0,"projectId":"7ef6c6","snapshot":null,"tags":null,"title":"button by ArturCodeCraft","updated":"2024-01-22T17:00:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":127,"cssLen":1360,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":"/* ============================ */\nbutton {\n border: none;\n background: none;\n padding: 0;\n margin: 0;\n cursor: pointer;\n font-family: inherit;\n}\n/* ============================ */\n/*