{"loaderData":{"0":null,"0-2":{"total":7070,"projects":[{"created":"2024-01-22T17:00:29.000Z","isPrivate":0,"projectId":"4b68ae","snapshot":null,"tags":null,"title":"button by Cornerstone-04","updated":"2024-01-22T17:00:29.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":767,"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 color: #000;\n background: none;\n border: none;\n padding: 12px 18px;\n position: relative;\n font-size: 1rem;\n text-transform: uppercase;\n font-weight: 700;\n font-family: monospace;\n transition: linear .3s;\n}\n\nbutton:hover {\n color: #fff;\n}\n\nbutton::before {\n content: \"\";\n position: absolute;\n top: 50%;\n transform: translateY(-50%) translateX(calc(100% + 4px));\n width: 45px;\n height: 45px;\n background-color: #dc143c;\n border-radius: 50px;\n transition: transform .25s .25s cubic-bezier(0, 0, .5, 2), width .25s cubic-bezier(0, 0, .5, 2);\n z-index: -1;\n}\n\nbutton:hover::before {\n width: 100%;\n transform: translateY(-50%) translateX(-18px);\n transition: transform .25s cubic-bezier(0,0,.5,2);\n}"},{"created":"2024-01-22T17:00:29.000Z","isPrivate":0,"projectId":"5b1318","snapshot":null,"tags":null,"title":"button by vikas7754","updated":"2024-01-22T17:00:29.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":1010,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".box {\n background: linear-gradient(to right, gold, darkorange);\n color: white;\n --width: 200px;\n --height: calc(var(--width) / 3);\n width: var(--width);\n height: var(--height);\n text-align: center;\n line-height: var(--height);\n font-size: calc(var(--height) / 2.5);\n font-family: sans-serif;\n letter-spacing: 0.2em;\n border: 1px solid darkgoldenrod;\n border-radius: 2em;\n transform: perspective(500px) rotateY(-15deg);\n text-shadow: 6px 3px 2px rgba(0, 0, 0, 0.2);\n box-shadow: 2px 0 0 5px rgba(76, 255, 97, 0.8);\n transition: 0.5s;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n}\n\n.box:hover {\n transform: perspective(500px) rotateY(15deg);\n text-shadow: -6px 3px 2px rgba(0, 0, 0, 0.2);\n box-shadow: -2px 0 0 5px rgba(35, 255, 218, 0.8);\n}\n\n.box::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(to right, transparent, white, transparent);\n left: -100%;\n transition: 0.5s;\n}\n\n.box:hover::before {\n left: 100%;\n}"},{"created":"2024-01-22T17:00:29.000Z","isPrivate":0,"projectId":"948c5d","snapshot":null,"tags":null,"title":"button by SteveBloX","updated":"2024-01-22T17:00:29.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":387,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button, button:focus {\n font-size: 20px;\n padding: 12px 30px;\n border-radius: 5px;\n background-color: #ff9800;\n border: 2px solid #f57c00;\n color: #fff;\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);\n transition: 0.3s;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #f57c00;\n}\n\nbutton:active {\n transform: translateY(2px);\n box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);\n}"},{"created":"2024-01-22T17:00:29.000Z","isPrivate":0,"projectId":"fddbf6","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:29.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":366,"cssLen":602,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n width: 122px;\n height: 60px;\n padding: 18px 22px 18px 20px;\n gap: 1px;\n display: flex;\n justify-content: center;\n align-items: center;\n background: #ff284818;\n border-radius: 16px;\n border: none;\n cursor: pointer;\n}\n\n.label {\n font-family: sans-serif;\n height: 23px;\n font-size: 19px;\n line-height: 24px;\n color: #FF2849;\n}\n\n.button:hover {\n background: #ff284839;\n}\n\n.button:hover .svg-icon {\n animation: pulse 0.7s linear infinite;\n}\n\n@keyframes pulse {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(1.13);\n }\n\n 100% {\n transform: scale(1);\n }\n}"},{"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/*