{"loaderData":{"0":null,"0-2":{"total":7072,"projects":[{"created":"2024-01-22T17:00:48.000Z","isPrivate":0,"projectId":"a077aa","snapshot":null,"tags":null,"title":"button by Rodrypaladin","updated":"2024-01-22T17:00:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":709,"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(151, 151, 151);\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(109, 109, 109);\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(85, 85, 85);\n}"},{"created":"2024-01-22T17:00:48.000Z","isPrivate":0,"projectId":"d8536d","snapshot":null,"tags":null,"title":"button by Deri-Kurniawan","updated":"2024-01-22T17:00:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":46,"cssLen":779,"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 padding: 12px 32px;\n font-size: 16px;\n font-weight: 700;\n text-transform: uppercase;\n color: #000;\n background-color: #fff;\n border: none;\n border-radius: 50px;\n overflow: hidden;\n z-index: 1;\n transition: all 0.3s ease-in-out;\n box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);\n cursor: pointer;\n}\n\n.button:hover {\n transform: scale(1.05);\n color: #000;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);\n}\n\n.button:active {\n transform: scale(0.9);\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n top: 0;\n right: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(to right, #007bff, #00bfff);\n transition: all 0.85s ease-in-out;\n z-index: -1;\n border-radius: 50px;\n}\n\n.button:hover::before {\n right: 100%;\n}"},{"created":"2024-01-22T17:00:48.000Z","isPrivate":0,"projectId":"9fd887","snapshot":null,"tags":null,"title":"button by Cevorob","updated":"2024-01-22T17:00:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3022,"cssLen":585,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n border: 0;\n background: ghostwhite;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1em 1em 1em 3em;\n position: relative;\n overflow: hidden;\n font-size: 17px;\n font-family: inherit;\n border-radius: 12px;\n box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;\n}\n\nbutton svg {\n position: absolute;\n left: .4em;\n width: 40px;\n height: 40px;\n transform: rotateY(-180deg);\n transition: transform .4s cubic-bezier(0.68, -0.6, 0.32, 1.6);\n}\n\nbutton:hover svg {\n transform: rotateY(-180deg) translateX(-.25em);\n}\n\nbutton:active {\n transform: scale(0.98);\n}"},{"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/*