{"loaderData":{"0":null,"0-2":{"total":7092,"projects":[{"created":"2024-01-22T16:59:52.000Z","isPrivate":0,"projectId":"147f4b","snapshot":null,"tags":null,"title":"button by Deri-Kurniawan","updated":"2024-01-22T16:59:52.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":46,"cssLen":775,"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: #fff;\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.4s ease-in-out;\n z-index: -1;\n border-radius: 50px;\n}\n\n.button:hover::before {\n right: 0;\n}"},{"created":"2024-01-22T16:59:52.000Z","isPrivate":0,"projectId":"a38f41","snapshot":null,"tags":null,"title":"button by mateusneves","updated":"2024-01-22T16:59:52.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":341,"cssLen":803,"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 font-size: 14px;\n letter-spacing: 3px;\n height: 3em;\n padding: 0 3em;\n border: none;\n background-color: #c41b54;\n color: #fff;\n text-transform: uppercase;\n overflow: hidden;\n border-radius: 5px\n}\n\nbutton::before {\n content: '';\n display: block;\n position: absolute;\n z-index: 0;\n bottom: 0;\n left: 0;\n height: 0px;\n width: 100%;\n background: rgb(196,27,84);\n background: linear-gradient(90deg, rgba(196,27,84,1) 20%, rgba(124,7,46,1) 100%);\n transition: 0.2s;\n}\n\nbutton .label {\n position: relative;\n}\n\nbutton .icon {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 3em;\n width: 3em;\n position: absolute;\n top: 3em;\n right: 0;\n opacity: 0;\n transition: 0.4s;\n}\n\nbutton:hover::before {\n height: 100%;\n}\n\nbutton:hover .icon {\n top: 0;\n opacity: 1;\n}"},{"created":"2024-01-22T16:59:52.000Z","isPrivate":0,"projectId":"5bab5a","snapshot":null,"tags":null,"title":"button by SteveBloX","updated":"2024-01-22T16:59:52.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":567,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n padding: 1.3em 3em;\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 2.5px;\n font-weight: 500;\n color: #000;\n background-color: rgba(255, 255, 255, 0.726);\n border: none;\n border-radius: 45px;\n box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);\n transition: all 0.3s ease 0s;\n cursor: pointer;\n outline: none;\n}\n\nbutton:hover {\n background-color: #3323c4;\n box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);\n color: #fff;\n transform: translateY(-7px);\n}\n\nbutton:active {\n transform: translateY(-1px);\n background-color: #584bd1;\n}"},{"created":"2024-01-22T16:59:52.000Z","isPrivate":0,"projectId":"032c17","snapshot":null,"tags":null,"title":"button by KhaledMatalkah","updated":"2024-01-22T16:59:52.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":52,"cssLen":1237,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".realistic-button {\n display: inline-block;\n position: relative;\n padding: 15px 30px;\n font-size: 18px;\n font-weight: bold;\n text-transform: uppercase;\n color: #fff;\n background: linear-gradient(to bottom, #3498db, #2980b9);\n border: 1px solid #2980b9;\n border-radius: 5px;\n box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1), inset 0px 2px 4px rgba(255, 255, 255, 0.2);\n text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);\n cursor: pointer;\n overflow: hidden;\n transition: background-color 0.3s, transform 0.3s;\n}\n\n.realistic-button::before,\n .realistic-button::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n background: inherit;\n z-index: -1;\n transition: transform 0.3s;\n}\n\n.realistic-button::before {\n top: 0;\n left: -100%;\n transform: skewX(-45deg);\n}\n\n.realistic-button::after {\n bottom: 0;\n right: -100%;\n transform: skewX(45deg);\n}\n\n.realistic-button:hover {\n background: linear-gradient(to bottom, #042b46, #0a525cd8);\n transform: translateY(-2px);\n box-shadow: 0px 6px 8px rgba(0, 195, 255, 0.2), inset 0px 2px 4px rgba(255, 255, 255, 0.1);\n}\n\n.realistic-button:hover::before {\n transform: translateX(100%);\n}\n\n.realistic-button:hover::after {\n transform: translateX(-100%);\n}"},{"created":"2024-01-22T16:59:52.000Z","isPrivate":0,"projectId":"9e1b89","snapshot":null,"tags":null,"title":"button by Saiyed-Tanvir","updated":"2024-01-22T16:59:52.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":89,"cssLen":967,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".Btn {\n position: relative;\n background-color: transparent;\n border: none;\n width: 100px;\n height: 40px;\n border-radius: 5px;\n cursor: pointer;\n transition: all .3s;\n}\n\n.text {\n width: 100%;\n height: 100%;\n background-color: rgba(230, 230, 230, 0.466);\n border: none;\n border-radius: 7px;\n backdrop-filter: blur(5px);\n color: rgb(26, 26, 26);\n display: flex;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n letter-spacing: 0.8px;\n}\n\n.BG {\n position: absolute;\n width: 100%;\n height: 100%;\n background-image: linear-gradient(147deg, #E5FFFF, #2525ff);\n z-index: -1;\n left: 6px;\n top: 6px;\n border-radius: 7px;\n pointer-events: none;\n transition: all .3s;\n}\n\n.Btn:hover {\n transform: translateY(-2px) translateX(-2px);\n}\n\n.Btn:hover .BG {\n transform: translateY(2px) translateX(2px);\n}\n\n.Btn:active {\n transform: translateY(7px) translateX(7px);\n}\n\n.Btn:active .BG {\n transform: translateY(-7px) translateX(-7px);\n}"},{"created":"2024-01-22T16:59:52.000Z","isPrivate":0,"projectId":"b11bde","snapshot":null,"tags":null,"title":"button by Yaya12085","updated":"2024-01-22T16:59:52.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":97,"cssLen":1090,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".Btn {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: 45px;\n height: 45px;\n border-radius: calc(45px/2);\n border: none;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n transition-duration: .3s;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);\n background: linear-gradient(144deg,#af40ff,#5b42f3 50%,#00ddeb);\n}\n\n/* plus sign */\n.sign {\n width: 100%;\n font-size: 2.2em;\n color: white;\n transition-duration: .3s;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n/* text */\n.text {\n position: absolute;\n right: 0%;\n width: 0%;\n opacity: 0;\n color: white;\n font-size: 1.4em;\n font-weight: 500;\n transition-duration: .3s;\n}\n/* hover effect on button width */\n.Btn:hover {\n width: 125px;\n transition-duration: .3s;\n}\n\n.Btn:hover .sign {\n width: 30%;\n transition-duration: .3s;\n padding-left: 15px;\n}\n/* hover effect button's text */\n.Btn:hover .text {\n opacity: 1;\n width: 70%;\n transition-duration: .3s;\n padding-right: 15px;\n}\n/* button click effect*/\n.Btn:active {\n transform: translate(2px ,2px);\n}"},{"created":"2024-01-22T16:59:52.000Z","isPrivate":0,"projectId":"0145e6","snapshot":null,"tags":null,"title":"button by HauNTH","updated":"2024-01-22T16:59:52.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2514,"cssLen":2446,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".social {\n margin: 0;\n list-style: none;\n padding-left: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n}\n\n.social .social-item {\n margin: 0 30px;\n width: 40px;\n height: 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.social .social-item .social-link {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n background: #fff;\n text-align: center;\n transform: perspective(1000px) rotate(-30deg) skew(25deg)\n translate(0, 0);\n transition: all 0.4s ease;\n}\n\n.social .social-item .social-link::before {\n content: \"\";\n position: absolute;\n top: 5px;\n left: -10px;\n height: 100%;\n width: 10px;\n background: #b1b1b1;\n transition: all 0.4s ease;\n transform: rotate(0deg) skewY(-45deg);\n}\n\n.social .social-item .social-link::after {\n content: \"\";\n position: absolute;\n top: 40px;\n left: -5px;\n height: 10px;\n width: 100%;\n background: #b1b1b1;\n transition: all 0.4s ease;\n transform: rotate(0deg) skewX(-45deg);\n}\n\n.social .social-item .social-link:hover {\n transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(5px, -5px);\n box-shadow: -20px 20px 10px rgba(0, 0, 0, 0.5);\n}\n\n.social .social-item:nth-child(1) a {\n color: #3b5999;\n}\n\n.social .social-item:nth-child(1):hover a {\n background: #3b5999;\n}\n\n.social .social-item:nth-child(1):hover a::before {\n background: #3b5999;\n}\n\n.social .social-item:nth-child(1):hover a::after {\n background: #3b5999;\n}\n\n.social .social-item:nth-child(2) a {\n color: #55acee;\n}\n\n.social .social-item:nth-child(2):hover a {\n background: #55acee;\n}\n\n.social .social-item:nth-child(2):hover a::before {\n background: #55acee;\n}\n\n.social .social-item:nth-child(2):hover a::after {\n background: #55acee;\n}\n\n.social .social-item:nth-child(3) a {\n color: #dd4b39;\n}\n\n.social .social-item:nth-child(3):hover a {\n background: #dd4b39;\n}\n\n.social .social-item:nth-child(3):hover a::before {\n background: #dd4b39;\n}\n\n.social .social-item:nth-child(3):hover a::after {\n background: #dd4b39;\n}\n\n.social .social-item:nth-child(4) a {\n color: #e4405f;\n}\n\n.social .social-item:nth-child(4):hover a {\n background: #e4405f;\n}\n\n.social .social-item:nth-child(4):hover a::before {\n background: #e4405f;\n}\n\n.social .social-item:nth-child(4):hover a::after {\n background: #e4405f;\n}\n\n.social .social-item .social-link:hover {\n color: #ffffff;\n}\n\n"},{"created":"2024-01-22T16:59:52.000Z","isPrivate":0,"projectId":"3a2be2","snapshot":null,"tags":null,"title":"button by mrhyddenn","updated":"2024-01-22T16:59:52.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":31,"cssLen":280,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n width: 150px;\n padding: 4px 12px;\n border: none;\n border-radius: 7px;\n background: linear-gradient(#4faefc,#006bff);\n color: #fff;\n font-size: 17px;\n font-family: sans-serif;\n}\n\nbutton:focus {\n background: linear-gradient(#44aefc,#026bff);\n outline: 3px solid #4faefc;\n}"},{"created":"2024-01-22T16:59:52.000Z","isPrivate":0,"projectId":"e25c96","snapshot":null,"tags":null,"title":"button by Javierrocadev","updated":"2024-01-22T16:59:52.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":892,"cssLen":2032,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".absolute {\n position: absolute\n}\n\n.relative {\n position: relative\n}\n\n.-top-6 {\n top: -1.5rem\n}\n\n.bottom-2 {\n bottom: 0.5rem\n}\n\n.left-2 {\n left: 0.5rem\n}\n\n.right-12 {\n right: 3rem\n}\n\n.right-2 {\n right: 0.5rem\n}\n\n.right-20 {\n right: 5rem\n}\n\n.right-32 {\n right: 8rem\n}\n\n.top-12 {\n top: 3rem\n}\n\n.top-6 {\n top: 1.5rem\n}\n\n.z-10 {\n z-index: 10\n}\n\n.h-12 {\n height: 3rem\n}\n\n.h-16 {\n height: 4rem\n}\n\n.h-4 {\n height: 1rem\n}\n\n.h-8 {\n height: 2rem\n}\n\n.w-12 {\n width: 3rem\n}\n\n.w-16 {\n width: 4rem\n}\n\n.w-4 {\n width: 1rem\n}\n\n.w-48 {\n width: 12rem\n}\n\n.w-8 {\n width: 2rem\n}\n\n.cursor-pointer {\n cursor: pointer\n}\n\n.overflow-hidden {\n overflow: hidden\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.rounded-md {\n border-radius: 0.375rem\n}\n\n.border {\n border-width: 1px\n}\n\n.bg-neutral-800 {\n --tw-bg-opacity: 1;\n background-color: rgb(38 38 38 / var(--tw-bg-opacity))\n}\n\n.bg-orange-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(249 115 22 / var(--tw-bg-opacity))\n}\n\n.bg-pink-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(236 72 153 / var(--tw-bg-opacity))\n}\n\n.bg-red-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(220 38 38 / var(--tw-bg-opacity))\n}\n\n.bg-yellow-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(234 179 8 / var(--tw-bg-opacity))\n}\n\n.p-2 {\n padding: 0.5rem\n}\n\n.font-extrabold {\n font-weight: 800\n}\n\n.text-gray-50 {\n --tw-text-opacity: 1;\n color: rgb(249 250 251 / var(--tw-text-opacity))\n}\n\n.duration-300 {\n transition-duration: 300ms\n}\n\n.duration-700 {\n transition-duration: 700ms\n}\n\n.hover\\:bg-sky-700:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(3 105 161 / var(--tw-bg-opacity))\n}\n\n.group:hover .group-hover\\:-right-2 {\n right: -0.5rem\n}\n\n.group:hover .group-hover\\:-top-1 {\n top: -0.25rem\n}\n\n.group:hover .group-hover\\:scale-150 {\n --tw-scale-x: 1.5;\n --tw-scale-y: 1.5;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}"},{"created":"2024-01-22T16:59:52.000Z","isPrivate":0,"projectId":"d7e746","snapshot":null,"tags":null,"title":"button by ArturCodeCraft","updated":"2024-01-22T16:59:52.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":44,"cssLen":469,"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 right: 0;\n transition: right .4s, width .4s, left .4s;\n}\n\n.menu__link:hover::before {\n width: 100%;\n left: 0;\n}"},{"created":"2024-01-22T16:59:52.000Z","isPrivate":0,"projectId":"29f5c6","snapshot":null,"tags":null,"title":"button by abbos97","updated":"2024-01-22T16:59:52.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":47,"cssLen":896,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".moves-button {\n padding: 10px 20px;\n color: #000;\n font-weight: 900;\n border-radius: 4px;\n font-size: 16px;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n background-color: #fff;\n border: 3px solid transparent;\n border-image: linear-gradient(90deg, #f3f 20%, rgb(49, 18, 187) 60%);\n border-image-slice: 1;\n}\n\n.moves-button::after {\n content: 'Button';\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n top: 0;\n left: 100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, rgb(245, 108, 245) 20%, rgb(119, 91, 245) 60%);\n transition: transform 0.3s ease-out;\n pointer-events: none;\n color: #fff;\n}\n\n.moves-button:hover::after {\n transform: translateX(-100%);\n}\n\n.moves-button:focus {\n outline: none;\n}\n\n/* Optional styling for the button on click */\n.moves-button:active {\n transform: translateY(2px);\n}\n"},{"created":"2024-01-22T16:59:51.000Z","isPrivate":0,"projectId":"001213","snapshot":null,"tags":null,"title":"button by Cornerstone-04","updated":"2024-01-22T16:59:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":68,"cssLen":1248,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".box {\n width: 140px;\n height: auto;\n float: left;\n transition: .5s linear;\n position: relative;\n display: block;\n overflow: hidden;\n padding: 15px;\n text-align: center;\n margin: 0 5px;\n background: transparent;\n text-transform: uppercase;\n font-weight: 900;\n}\n\n.box:before {\n position: absolute;\n content: '';\n left: 0;\n bottom: 0;\n height: 4px;\n width: 100%;\n border-bottom: 4px solid transparent;\n border-left: 4px solid transparent;\n box-sizing: border-box;\n transform: translateX(100%);\n}\n\n.box:after {\n position: absolute;\n content: '';\n top: 0;\n left: 0;\n width: 100%;\n height: 4px;\n border-top: 4px solid transparent;\n border-right: 4px solid transparent;\n box-sizing: border-box;\n transform: translateX(-100%);\n}\n\n.box:hover {\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);\n}\n\n.box:hover:before {\n border-color: #262626;\n height: 100%;\n transform: translateX(0);\n transition: .3s transform linear, .3s height linear .3s;\n}\n\n.box:hover:after {\n border-color: #262626;\n height: 100%;\n transform: translateX(0);\n transition: .3s transform linear, .3s height linear .5s;\n}\n\nbutton {\n color: black;\n text-decoration: none;\n cursor: pointer;\n outline: none;\n border: none;\n background: transparent;\n}"}]}},"actionData":null,"errors":null}