{"loaderData":{"0":null,"0-3":{"total":7405,"projects":[{"created":"2024-01-22T17:00:29.000Z","isPrivate":0,"projectId":"07e29c","snapshot":null,"tags":null,"title":"button by deepak16375","updated":"2024-01-22T17:00:29.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":334,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n padding: .9rem 1.5rem;\n border: .2rem solid #443;\n border-radius: 95% 4% 97% 5% / 4% 94% 3% 95%;\n color: #443;\n background: none;\n cursor: pointer;\n margin-top: 1rem;\n font-size: 1.7rem;\n transition: all .2s linear;\n}\n\n.button:hover {\n border-radius: 4% 95% 6% 95% / 95% 4% 92% 5%;\n border: .2rem dashed #443;\n}\n"},{"created":"2024-01-22T17:00:29.000Z","isPrivate":0,"projectId":"fb8770","snapshot":null,"tags":null,"title":"button by Yaya12085","updated":"2024-01-22T17:00:29.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1375,"cssLen":831,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 7px;\n border: none;\n background: #0ba360;\n background: linear-gradient(\n to right,\n #0ba360,#3cba92\n );\n color: white;\n font-family: inherit;\n text-align: center;\n font-size: 13px;\n box-shadow: 0px 14px 56px -11px #0ba360;\n width: 11em;\n padding: 0.7em;\n transition: all 0.4s;\n cursor: pointer;\n}\n\n.button svg {\n width: 25px;\n height: 25px;\n}\n\n.button svg path {\n fill: white\n}\n\n.button span {\n cursor: pointer;\n display: inline-block;\n position: relative;\n transition: 0.4s;\n}\n\n.button span:after {\n content: 'for free';\n position: absolute;\n opacity: 0;\n top: 0;\n right: -20px;\n transition: 0.7s;\n}\n\n.button:hover span {\n padding-right: 3.80em;\n}\n\n.button:hover span:after {\n opacity: 4;\n right: 0;\n}"},{"created":"2024-01-22T17:00:29.000Z","isPrivate":0,"projectId":"3a78cd","snapshot":null,"tags":null,"title":"button by KhaledMatalkah","updated":"2024-01-22T17:00:29.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":1099,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n display: inline-block;\n padding: 15px 32px;\n font-size: 17px;\n font-weight: bold;\n color: #fff;\n background: linear-gradient(130deg, #ff6b6b, #c94d4d, #8e3636);\n border-radius: 50px;\n text-align: center;\n text-decoration: none;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n z-index: 1;\n border: none;\n border-style: solid;\n border-width: 2px;\n}\n\n.button:before,\n.button:after {\n content: \"\";\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n opacity: 0.3;\n pointer-events: none;\n transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;\n}\n\n.button:before {\n left: 100%;\n background: linear-gradient(130deg, #ff6b6b, #c94d4d, #8e3636);\n z-index: -1;\n}\n\n.button:hover:before {\n transform: translateX(-50%);\n opacity: 1;\n}\n\n.button:after {\n right: 100%;\n background: linear-gradient(130deg, #ff6b6b, #c94d4d, #8e3636);\n z-index: -1;\n}\n\n.button:hover:after {\n transform: translateX(50%);\n opacity: 1;\n}\n\n.button:hover .button-text {\n transform: translateY(-3px);\n}\n\n.button-text {\n transition: transform 0.3s ease-in-out;\n}\n"},{"created":"2024-01-22T17:00:29.000Z","isPrivate":0,"projectId":"936ee4","snapshot":null,"tags":null,"title":"button by roufkp","updated":"2024-01-22T17:00:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":360,"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 padding: 12px 24px;\n border-radius: 100px;\n border: none;\n box-shadow: inset 0px 22px 20px 10px rgb(0, 0, 0);\n font-weight: 800;\n color: antiquewhite;\n letter-spacing: .1rem;\n transition: all 0.51s ease-in-out;\n}\n\n.button:hover {\n transform: translateY(5px);\n box-shadow: inset 1px -11px 25px 10px rgb(91, 88, 240);\n}"},{"created":"2024-01-22T17:00:28.000Z","isPrivate":0,"projectId":"3fc981","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":872,"cssLen":1105,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".bookmarkBtn {\n width: 130px;\n height: 40px;\n border-radius: 40px;\n border: none;\n background-color: rgb(255, 255, 255);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition-duration: .3s;\n overflow: hidden;\n box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.062);\n}\n\n.IconContainer {\n width: 30px;\n height: 30px;\n background-color: rgb(103, 74, 228);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n z-index: 2;\n transition-duration: .3s;\n}\n\n.icon {\n border-radius: 1px;\n}\n\n.text {\n height: 100%;\n width: 90px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: rgb(26, 26, 26);\n z-index: 1;\n transition-duration: .3s;\n font-size: 1.04em;\n font-weight: 600;\n}\n\n.bookmarkBtn:hover .IconContainer {\n width: 120px;\n border-radius: 40px;\n transition-duration: .3s;\n}\n\n.bookmarkBtn:hover .text {\n transform: translate(10px);\n width: 0;\n font-size: 0;\n transition-duration: .3s;\n}\n\n.bookmarkBtn:active {\n transform: scale(0.95);\n transition-duration: .3s;\n}"},{"created":"2024-01-22T17:00:28.000Z","isPrivate":0,"projectId":"d6e3ca","snapshot":null,"tags":null,"title":"button by ArturCodeCraft","updated":"2024-01-22T17:00:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":44,"cssLen":436,"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: 0;\n transition: width .4s;\n}\n\n.menu__link:hover::before {\n width: 100%;\n}"},{"created":"2024-01-22T17:00:28.000Z","isPrivate":0,"projectId":"85cf25","snapshot":null,"tags":null,"title":"button by EcheverriaJesus","updated":"2024-01-22T17:00:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":250,"cssLen":1922,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n Button\n\n","css":".h-12 {\n height: 3rem;\n}\n.w-28 {\n width: 7rem;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.bg-gradient-to-r {\n background-image: linear-gradient(to right, var(--tw-gradient-stops));\n}\n.from-indigo-500 {\n --tw-gradient-from: #6366f1 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.via-purple-500 {\n --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from),\n #a855f7 var(--tw-gradient-via-position), var(--tw-gradient-to);\n}\n.to-pink-500 {\n --tw-gradient-to: #ec4899 var(--tw-gradient-to-position);\n}\n.font-semibold {\n font-weight: 600;\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),\n 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),\n 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.duration-200 {\n transition-duration: 200ms;\n}\n.hover\\:scale-105:hover {\n --tw-scale-x: 1.05;\n --tw-scale-y: 1.05;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.hover\\:cursor-pointer:hover {\n cursor: pointer;\n}\n.hover\\:shadow-\\[\\#7dd3fc\\]:hover {\n --tw-shadow-color: #7dd3fc;\n --tw-shadow: var(--tw-shadow-colored);\n}\n.hover\\:drop-shadow-2xl:hover {\n --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)\n var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)\n var(--tw-sepia) var(--tw-drop-shadow);\n}\n"},{"created":"2024-01-22T17:00:28.000Z","isPrivate":0,"projectId":"52c4e7","snapshot":null,"tags":null,"title":"button by ArturCodeCraft","updated":"2024-01-22T17:00:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":127,"cssLen":1262,"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/*