{"loaderData":{"0":null,"0-3":{"total":7296,"projects":[{"created":"2024-01-22T17:00:48.000Z","isPrivate":0,"projectId":"8b9272","snapshot":null,"tags":null,"title":"button by glisovic01","updated":"2024-01-22T17:00:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":728,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n display: inline-block;\n font-family: sans-serif;\n font-weight: 600;\n font-size: 16px;\n color: #fff;\n margin: 1rem auto;\n padding: 0.7rem 2rem;\n border-radius: 30em;\n border-style: none;\n position: relative;\n z-index: 1;\n overflow: hidden;\n text-decoration: none;\n text-transform: uppercase;\n letter-spacing: 2px;\n background-color: transparent;\n box-shadow: 1px 1px 12px #000000;\n}\n\n.btn::before {\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n background-color: #fff;\n transform: translateX(-101%);\n transition: all .3s ease;\n z-index: -1;\n}\n\n.btn:hover {\n color: #272727;\n transition: all .3s ease;\n}\n\n.btn:hover::before {\n transform: translateX(0);\n}"},{"created":"2024-01-22T17:00:48.000Z","isPrivate":0,"projectId":"aa25ec","snapshot":null,"tags":null,"title":"button by Yaya12085","updated":"2024-01-22T17:00:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":807,"cssLen":496,"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 background-color: #0A66C2;\n color: #ffffff;\n padding: 0.5rem 1.4rem;\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 700;\n text-align: center;\n vertical-align: middle;\n align-items: center;\n border-radius: 0.5rem;\n gap: 0.75rem;\n border: none;\n cursor: pointer;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n transition: .6s ease;\n}\n\n.button svg {\n height: 30px;\n}\n\n.button:hover {\n box-shadow: none;\n}"},{"created":"2024-01-22T17:00:48.000Z","isPrivate":0,"projectId":"b8d33f","snapshot":null,"tags":null,"title":"button by doniaskima","updated":"2024-01-22T17:00:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":52,"cssLen":1970,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn-11,\n.btn-11 *,\n.btn-11 :after,\n.btn-11 :before,\n.btn-11:after,\n.btn-11:before {\n border: 0 solid;\n box-sizing: border-box;\n}\n\n.btn-11 {\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-11:disabled {\n cursor: default;\n}\n\n.btn-11:-moz-focusring {\n outline: auto;\n}\n\n.btn-11 svg {\n display: block;\n vertical-align: middle;\n}\n\n.btn-11 [hidden] {\n display: none;\n}\n\n.btn-11 {\n border-radius: 99rem;\n border-width: 2px;\n overflow: hidden;\n padding: 0.8rem 3rem;\n position: relative;\n}\n\n.btn-11 span {\n mix-blend-mode: difference;\n}\n\n.btn-11:before {\n -webkit-animation: bg-scroll 3s linear infinite;\n animation: bg-scroll 3s linear infinite;\n -webkit-animation-play-state: paused;\n animation-play-state: paused;\n background: repeating-linear-gradient(\n 45deg,\n hsla(0, 0%, 100%, 0.2),\n hsla(0, 0%, 100%, 0.2) 0.7%,\n transparent 0,\n transparent 4%\n );\n content: \"\";\n display: block;\n height: 300%;\n left: -100%;\n opacity: 0;\n position: absolute;\n top: 0;\n transition: opacity 0.3s, background-color 0.2s;\n width: 300%;\n}\n\n.btn-11:hover:before {\n -webkit-animation-play-state: running;\n animation-play-state: running;\n opacity: 1;\n}\n\n.btn-11:active:before {\n background-color: #fff;\n}\n\n@-webkit-keyframes bg-scroll {\n 0% {\n transform: translateX(0);\n }\n\n to {\n transform: translateX(33%);\n }\n}\n\n@keyframes bg-scroll {\n 0% {\n transform: translateX(0);\n }\n\n to {\n transform: translateX(33%);\n }\n}\n"},{"created":"2024-01-22T17:00:48.000Z","isPrivate":0,"projectId":"9e0478","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":45,"cssLen":658,"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 align-items: center;\n justify-content: center;\n line-height: 1;\n text-decoration: none;\n color: #0000FF;\n font-size: 17px;\n border-radius: 5px;\n width: 160px;\n height: 40px;\n border: 1px solid #0000FF;\n position: relative;\n transition: 0.3s;\n background-color: #ffffff;\n font-weight: 600;\n}\n\n.button::before {\n content: \"FREE\";\n display: block;\n font-size: 13px;\n background-color: #0000FF;\n color: #fff;\n border-radius: 3px;\n padding: 3px 5px;\n position: absolute;\n top: 0;\n left: 0;\n transform: translate(-5px, -30%);\n transition: .3s;\n}\n\n.button:hover::before {\n transform: translate(-5px, -50%);\n}\n\n"},{"created":"2024-01-22T17:00:48.000Z","isPrivate":0,"projectId":"ac089d","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1950,"cssLen":832,"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 width: 130px;\n height: 35px;\n border-radius: 30px;\n background-color: white;\n border: 1px #2867b2 solid;\n overflow: hidden;\n}\n\n.text1 {\n font-size: 15px;\n font-weight: 600;\n margin-left: 22%;\n}\n\n.text2 {\n position: absolute;\n top: 25%;\n left: -50px;\n font-weight: 700;\n font-size: 14px;\n color: white;\n}\n\n.icon {\n position: absolute;\n top: 0;\n left: 0;\n transition: transform 0.5s;\n}\n\n.icon::before {\n position: absolute;\n left: -100px;\n top: 0;\n z-index: -1;\n content: '';\n width: 130px;\n height: 33px;\n border-radius: 30px;\n background-color: #2867b2;\n}\n\nbutton:hover .icon {\n transform: translateX(96px);\n transition: transform 0.5s;\n}\n\nbutton:hover .text2 {\n transform: translateX(100px);\n transition: transform 0.6s;\n}\n\nbutton:active {\n transform: scale(1.03);\n}"},{"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/*