{"loaderData":{"0":null,"0-2":{"total":7067,"projects":[{"created":"2024-01-22T17:00:36.000Z","isPrivate":0,"projectId":"8a0905","snapshot":null,"tags":null,"title":"button by SteveBloX","updated":"2024-01-22T17:00:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":279,"cssLen":586,"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 align-items: center;\n justify-content: center;\n gap: 10px;\n font-family: inherit;\n font-size: 16px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.8px;\n color: #ffffff;\n background-color: #ff5f5f;\n border-style: none;\n border-radius: 8px;\n padding: 16px 24px;\n transform: scale(1);\n transition: 0.2s;\n box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #ff3b3b;\n box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2);\n}\n\nbutton:active {\n transform: scale(0.95);\n box-shadow: none;\n}"},{"created":"2024-01-22T17:00:36.000Z","isPrivate":0,"projectId":"60c335","snapshot":null,"tags":null,"title":"button by AKAspidey01","updated":"2024-01-22T17:00:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":160,"cssLen":641,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n cursor: pointer;\n position: relative;\n width: 5em;\n height: 4em;\n border: none;\n background: rgb(248, 66, 42);\n padding: 0.5em;\n display: flex;\n justify-content: center;\n gap: 0.7em;\n flex-direction: column;\n transition-duration: 0.5s;\n}\n.button:hover {\n background: rgb(7, 142, 253);\n}\n.similar-line {\n height: 0.2em;\n background: #fff;\n border-radius: 1em;\n transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);\n}\n.line-1 {\n width: 40%;\n}\n.line-2 {\n width: 70%;\n}\n.line-3 {\n width: 90%;\n}\n.button:hover .line-1 {\n width: 90%;\n}\n.button:hover .line-2 {\n width: 70%;\n}\n.button:hover .line-3 {\n width: 40%;\n}\n"},{"created":"2024-01-22T17:00:36.000Z","isPrivate":0,"projectId":"41e3c7","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":62,"cssLen":822,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n /* Variables */\n --button_radius: 0.75em;\n --button_color: #e8e8e8;\n --button_outline_color: #000000;\n font-size: 17px;\n font-weight: bold;\n border: none;\n border-radius: var(--button_radius);\n background: var(--button_outline_color);\n}\n\n.button_top {\n display: block;\n box-sizing: border-box;\n border: 2px solid var(--button_outline_color);\n border-radius: var(--button_radius);\n padding: 0.75em 1.5em;\n background: linear-gradient(to bottom right, #FFCC99, #FF9966);\n color: var(--button_outline_color);\n transform: translateY(-0.2em);\n transition: transform 0.1s ease;\n}\n\nbutton:hover .button_top {\n /* Pull the button upwards when hovered */\n transform: translateY(-0.33em);\n}\n\nbutton:active .button_top {\n /* Push the button downwards when pressed */\n transform: translateY(0);\n}"},{"created":"2024-01-22T17:00:36.000Z","isPrivate":0,"projectId":"bdac3a","snapshot":null,"tags":null,"title":"button by garerim","updated":"2024-01-22T17:00:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":75,"cssLen":566,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 25px;\n font-weight: 600;\n height: 40px;\n line-height: 40px;\n cursor: pointer;\n background-color: inherit;\n border: none;\n outline: none;\n color: #f1f1f1;\n}\n\n.btn:hover .background {\n height: inherit;\n width: 120%;\n top: 50%;\n}\n\n.btn .background {\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translate(-50%, -50%);\n height: 3px;\n width: 100%;\n background-color: #006b92;\n z-index: -1;\n border-radius: 5px;\n transition: all 0.3s;\n}"},{"created":"2024-01-22T17:00:36.000Z","isPrivate":0,"projectId":"7c4948","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":103,"cssLen":1122,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n font-size: 19px;\n border-radius: 12px;\n background: linear-gradient(180deg, rgb(56, 56, 56) 0%, rgb(36, 36, 36) 66%, rgb(41, 41, 41) 100%);\n color: rgb(218, 218, 218);\n border: none;\n padding: 2px;\n font-weight: 800;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n}\n\n.button span {\n border-radius: 10px;\n padding: 0.8em 1.3em;\n padding-right: 1.2em;\n text-shadow: 0px 0px 20px #4b4b4b;\n width: 100%;\n display: flex;\n align-items: center;\n gap: 12px;\n transition: all 0.3s;\n background-image: linear-gradient(to right, #00F260, #f79dee, #0575E6, #64f38c,#e9e93e);\n -webkit-background-clip: text;\n color: transparent;\n background-size: 300%;\n background-position: -100%;\n animation: animatedText 3s infinite alternate-reverse;\n}\n\n.button-overlay {\n position: absolute;\n inset: 0;\n pointer-events: none;\n background: repeating-conic-gradient(rgb(48, 47, 47) 0.0000001%, rgb(51, 51, 51) 0.000104%) 60% 60%/600% 600%;\n filter: opacity(10%) contrast(105%);\n -webkit-filter: opacity(10%) contrast(105%);\n}\n\n@keyframes animatedText {\n to {\n background-position: 100%;\n }\n}"},{"created":"2024-01-22T17:00:36.000Z","isPrivate":0,"projectId":"8d7931","snapshot":null,"tags":null,"title":"button by e-coders","updated":"2024-01-22T17:00:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":57,"cssLen":377,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button.button-3d {\n margin: 10px;\n border-right: 0;\n border-left: 0;\n border-top: 0;\n font-family: inherit;\n font-size: 24px;\n padding: 8px;\n color: rgba(255, 255, 255, 0.788);\n}\n\nbutton.button-3d:active {\n border-bottom: 0;\n}\n\nbutton.button-3d {\n cursor: pointer;\n}\n\n/* RED */\n.button-3d-red {\n border-bottom: 3px solid rgb(117, 28, 28);\n background-color: rgb(248, 91, 91);\n}"},{"created":"2024-01-22T17:00:36.000Z","isPrivate":0,"projectId":"03bbf0","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1176,"cssLen":1136,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n --main-focus: #2d8cf0;\n --font-color: #323232;\n --bg-color-sub: #dedede;\n --bg-color: #eee;\n --main-color: #323232;\n position: relative;\n width: 150px;\n height: 40px;\n cursor: pointer;\n display: flex;\n align-items: center;\n border: 2px solid var(--main-color);\n box-shadow: 4px 4px var(--main-color);\n background-color: var(--bg-color);\n border-radius: 10px;\n overflow: hidden;\n}\n\n.button, .button__icon, .button__text {\n transition: all 0.3s;\n}\n\n.button .button__text {\n transform: translateX(33px);\n color: var(--font-color);\n font-weight: 600;\n}\n\n.button .button__icon {\n position: absolute;\n transform: translateX(109px);\n height: 100%;\n width: 39px;\n background-color: var(--bg-color-sub);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.button .svg {\n width: 20px;\n fill: var(--main-color);\n}\n\n.button:hover {\n background: var(--bg-color);\n}\n\n.button:hover .button__text {\n color: transparent;\n}\n\n.button:hover .button__icon {\n width: 148px;\n transform: translateX(0);\n}\n\n.button:active {\n transform: translate(3px, 3px);\n box-shadow: 0px 0px var(--main-color);\n}"},{"created":"2024-01-22T17:00:36.000Z","isPrivate":0,"projectId":"ea9244","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1454,"cssLen":520,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n --bg-color: #fff;\n --main-color: #323232;\n width: 40px;\n height: 40px;\n border-radius: 100%;\n border: 2px solid var(--main-color);\n background-color: var(--bg-color);\n box-shadow: 4px 4px var(--main-color);\n font-size: 25px;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.2s;\n cursor: pointer;\n}\n\n.button:active {\n box-shadow: 0px 0px var(--main-color);\n transform: translate(3px, 3px);\n}\n\n.icon {\n width: 24px;\n height: 24px;\n fill: var(--main-color);\n}"},{"created":"2024-01-22T17:00:36.000Z","isPrivate":0,"projectId":"1023d3","snapshot":null,"tags":null,"title":"button by louloudev59","updated":"2024-01-22T17:00:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":283,"cssLen":2412,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".transform {\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}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.bg-red-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(252 165 165 / var(--tw-bg-opacity))\n}\n\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem\n}\n\n.py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem\n}\n\n.font-bold {\n font-weight: 700\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}\n\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n.shadow-white {\n --tw-shadow-color: #fff;\n --tw-shadow: var(--tw-shadow-colored)\n}\n\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms\n}\n\n.duration-500 {\n transition-duration: 500ms\n}\n\n.ease-in-out {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)\n}\n\n.hover\\:scale-110:hover {\n --tw-scale-x: 1.1;\n --tw-scale-y: 1.1;\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}\n\n@keyframes pulse {\n 50% {\n opacity: .5\n }\n}\n\n.hover\\:animate-pulse:hover {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite\n}\n\n.hover\\:bg-red-500:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / var(--tw-bg-opacity))\n}\n\n.hover\\:text-white:hover {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}\n\n.hover\\:brightness-110:hover {\n --tw-brightness: brightness(1.1);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)\n}\n\n@keyframes bounce {\n 0%, 100% {\n transform: translateY(-25%);\n animation-timing-function: cubic-bezier(0.8,0,1,1)\n }\n\n 50% {\n transform: none;\n animation-timing-function: cubic-bezier(0,0,0.2,1)\n }\n}\n\n.active\\:animate-bounce:active {\n animation: bounce 1s infinite\n}"},{"created":"2024-01-22T17:00:36.000Z","isPrivate":0,"projectId":"85fe47","snapshot":null,"tags":null,"title":"button by elijahwgummer-poc","updated":"2024-01-22T17:00:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":142,"cssLen":1196,"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 display: inline-block;\n padding: 12px 24px;\n border: none;\n outline: none;\n border-radius: 50px;\n background-color: #F06C9B;\n color: #fff;\n font-size: 16px;\n font-weight: bold;\n cursor: pointer;\n overflow: hidden;\n transition: background-color 0.3s ease;\n}\n\n.button:hover {\n background-color: #F26D5F;\n}\n\n.button .text {\n position: relative;\n z-index: 2;\n}\n\n.circle-container {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n.circle {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0;\n height: 0;\n background-color: #FAD779;\n border-radius: 50%;\n opacity: 0.5;\n transition: all 0.5s ease;\n}\n\n.button:hover .circle {\n width: 200%;\n height: 200%;\n transform: translate(-50%, -50%) scale(1);\n opacity: 0;\n}\n\n.button:focus {\n box-shadow: 0 0 0 2px #FF8D55;\n outline: none;\n}\n\n.button.animated .circle {\n animation: pulse 1s infinite;\n}\n\n@keyframes pulse {\n 0% {\n box-shadow: 0 0 0 0 rgba(250, 215, 121, 0.4);\n }\n\n 70% {\n box-shadow: 0 0 0 10px rgba(250, 215, 121, 0);\n }\n\n 100% {\n box-shadow: 0 0 0 0 rgba(250, 215, 121, 0);\n }\n}\n"},{"created":"2024-01-22T17:00:36.000Z","isPrivate":0,"projectId":"6b1592","snapshot":null,"tags":null,"title":"button by KhaledMatalkah","updated":"2024-01-22T17:00:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":43,"cssLen":1463,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n display: inline-block;\n padding: 12px 24px;\n font-size: 16px;\n font-weight: bold;\n text-transform: uppercase;\n color: #fff;\n background-color: #00ccff;\n border: none;\n border-radius: 50px;\n transition: background-color 0.3s ease, transform 0.2s ease;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);\n cursor: pointer;\n position: relative;\n overflow: hidden;\n z-index: 1;\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background-color: #57575700;\n border-radius: 50%;\n transform: translate(-50%, -50%);\n transition: all 0.4s ease;\n z-index: -1;\n}\n\n.button::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);\n background-size: 30px 30px;\n opacity: 0;\n transition: opacity 0.4s ease;\n}\n\n.button:hover {\n background-color: #239ccc;\n transform: scale(1.1) rotate(5deg);\n box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);\n}\n\n.button:hover::before {\n top: 50%;\n left: 50%;\n width: 100%;\n height: 100%;\n transform: translate(-50%, -50%) rotate(45deg);\n}\n\n.button:hover::after {\n opacity: 1;\n}\n\n.button:active {\n background-color: rgb(13, 130, 207);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n transform: translateY(2px);\n}\n"},{"created":"2024-01-22T17:00:36.000Z","isPrivate":0,"projectId":"99fb20","snapshot":null,"tags":null,"title":"button by gharsh11032000","updated":"2024-01-22T17:00:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":47,"cssLen":385,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n border-radius: 8px;\n border: 1px solid transparent;\n padding: 0.6em 1.2em;\n font-size: 1em;\n font-weight: 500;\n font-family: inherit;\n background-color: #1a1a1a;\n cursor: pointer;\n color: white;\n transition: border-color 0.25s;\n}\n\n.button:hover {\n border-color: #646cff;\n}\n\n.button:focus,\n.button:focus-visible {\n outline: 4px auto -webkit-focus-ring-color;\n}\n\n\n"}]}},"actionData":null,"errors":null}