{"loaderData":{"0":null,"0-3":{"total":7367,"projects":[{"created":"2024-01-22T17:00:28.000Z","isPrivate":0,"projectId":"30bd01","snapshot":null,"tags":null,"title":"button by ArturCodeCraft","updated":"2024-01-22T17:00:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":64,"cssLen":1084,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"/* ============================ */\nbutton {\n border: none;\n background: none;\n padding: 0;\n margin: 0;\n cursor: pointer;\n font-family: inherit;\n}\n/* ============================ */\n.menu__button {\n min-width: 62px;\n height: 36px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 8px 16px;\n background-color: #fff;\n transition: background-color .4s;\n}\n\n.menu__button span {\n color: #000;\n line-height: 1;\n transition: color .4s;\n}\n\n.menu__button:hover {\n background: linear-gradient(90deg, #fff 50%, transparent 0) repeat-x,\n\t\tlinear-gradient(90deg, #fff 50%, transparent 0) repeat-x,\n\t\tlinear-gradient(0deg, #fff 50%, transparent 0) repeat-y,\n\t\tlinear-gradient(0deg, #fff 50%, transparent 0) repeat-y;\n background-size: 6px 2px, 6px 2px, 2px 6px, 2px 6px;\n background-position: 0 0, 0 100%, 0 0, 100% 0;\n animation: linearGradientMove .4s infinite linear;\n}\n\n.menu__button:hover span {\n color: #fff;\n}\n\n@keyframes linearGradientMove {\n 100% {\n background-position: 6px 0, -6px 100%, 0 -6px, 100% 6px;\n }\n}"},{"created":"2024-01-22T17:00:28.000Z","isPrivate":0,"projectId":"c7e83c","snapshot":null,"tags":null,"title":"button by HarryProCW","updated":"2024-01-22T17:00:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":166,"cssLen":1075,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".rounded-full{border-radius:9999px}.bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(99 102 241 / var(--tw-bg-opacity))}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.font-bold{font-weight:700}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-indigo-500\\/50{--tw-shadow-color:rgb(99 102 241 / 0.5);--tw-shadow:var(--tw-shadow-colored)}@keyframes pulse{50%{opacity:.5}}.hover\\:animate-pulse:hover{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.hover\\:brightness-110:hover{--tw-brightness:brightness(1.1);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)}"},{"created":"2024-01-22T17:00:28.000Z","isPrivate":0,"projectId":"0a510b","snapshot":null,"tags":null,"title":"button by Rodrypaladin","updated":"2024-01-22T17:00:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":724,"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(243, 119, 69);\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(224, 64, 0);\n color: white;\n transition: all 0.15s ease-in;\n}\n\nbutton:hover::after {\n transform: translate(-5px, -6px);\n}\n\nbutton:hover {\n transform: translate(5px, 5px);\n}\n\nbutton:active::after {\n background-color: rgb(255, 218, 203);\n}"},{"created":"2024-01-22T17:00:28.000Z","isPrivate":0,"projectId":"36b805","snapshot":null,"tags":null,"title":"button by SelfMadeSystem","updated":"2024-01-22T17:00:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1834,"cssLen":1434,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n font-size: larger;\n height: 3em;\n width: 8em;\n position: relative;\n border: none;\n isolation: isolate;\n}\n\n.btn > span {\n position: absolute;\n border-radius: 0.5em;\n pointer-events: none;\n inset: 0;\n background-color: hsl(218, 68%, 52%);\n color: white;\n box-shadow: 1px 2px 4px #0007;\n z-index: 10;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.ripple-container {\n position: absolute;\n inset: -0.3em;\n display: grid;\n grid-template-columns: repeat(16, 0.5em);\n border-radius: 0.8em;\n padding: 0.3em;\n overflow: hidden;\n}\n\n.ripple-container > span {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.ripple-container > span::after {\n content: \"\";\n pointer-events: none;\n position: absolute;\n background-color: hsl(218, 68%, 65%);\n transition: width 0.5s ease-out, height 0.5s ease-out, opacity 1s;\n width: 18em;\n height: 18em;\n opacity: 0;\n border-radius: 999em;\n}\n\n.ripple-container > span:active::after {\n transition: 0s;\n width: 0em;\n height: 0em;\n opacity: 1;\n}\n\n.ripple-container::before {\n content: \"\";\n pointer-events: none;\n position: absolute;\n background-color: hsla(218, 68%, 65%, 0.5);\n width: 13em;\n height: 13em;\n border-radius: 999em;\n transition: transform 0.25s ease-out;\n transform: translate(-25%, -25%) scale(0);\n}\n\n.ripple-container:hover::before {\n transform: translate(-25%, -25%) scale(1);\n}\n"},{"created":"2024-01-22T17:00:28.000Z","isPrivate":0,"projectId":"d121c6","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":803,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n font-size: 18px;\n letter-spacing: 2px;\n text-transform: uppercase;\n display: inline-block;\n text-align: center;\n font-weight: bold;\n padding: 0.7em 2em;\n border: 3px solid #14dd50;\n border-radius: 2px;\n position: relative;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);\n color: #14dd50;\n text-decoration: none;\n transition: 0.3s ease all;\n z-index: 1;\n}\n\nbutton:before {\n transition: 0.5s all ease;\n position: absolute;\n top: 0;\n left: 50%;\n right: 50%;\n bottom: 0;\n opacity: 0;\n content: '';\n background-color: #14dd50;\n z-index: -1;\n}\n\nbutton:hover, button:focus {\n color: white;\n}\n\nbutton:hover:before, button:focus:before {\n transition: 0.5s all ease;\n left: 0;\n right: 0;\n opacity: 1;\n}\n\nbutton:active {\n transform: scale(0.9);\n}"},{"created":"2024-01-22T17:00:27.000Z","isPrivate":0,"projectId":"a9bc9e","snapshot":null,"tags":null,"title":"button by MuhammadHasann","updated":"2024-01-22T17:00:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":80,"cssLen":1790,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n","css":".button-cont {\n position: relative;\n width: fit-content;\n height: fit-content;\n border-radius: 9999px;\n}\n\n.button-cont::before {\n content: \"\";\n position: absolute;\n top: 0%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0;\n height: 0;\n background: #06b5d4;\n border-radius: 50%;\n filter: blur(30px);\n opacity: 0.8;\n transition: all 0.6s cubic-bezier(1, 0, 0, 1);\n}\n\n.button-cont:hover::before {\n width: 100%;\n height: 25px;\n}\n\n.button {\n cursor: pointer;\n position: relative;\n padding: 20px 48px;\n background-color: #083344;\n font-size: 16px;\n color: #fefefe;\n font-weight: 500;\n border: none;\n border-radius: 9999px;\n backdrop-filter: blur(4px);\n box-shadow: inset 0px 1px 1px #67e8f9;\n transition: all 0.3s ease-in-out, box-shadow 0.1s ease-in-out;\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 50%;\n transform: translate(-50%, 0%);\n width: 0;\n height: 0;\n border-radius: 50%;\n box-shadow: 0px 0px 25px 3px #67e8f97e;\n transition: all 0.5s cubic-bezier(1, 0, 0, 1);\n}\n\n.button::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 50%;\n transform: translate(-50%, 0%);\n width: 0;\n height: 0;\n background-image: linear-gradient(\n to right,\n #06b5d400,\n #4ec4db00,\n #72d0e200,\n #90ddea3d,\n #ace9f277,\n #ace9f2,\n #ace9f2,\n #ace9f277,\n #90ddea3d,\n #72d0e200,\n #4ec3db00,\n #06b6d400\n );\n border-radius: 0 0 50% 50%;\n opacity: 0.8;\n filter: drop-shadow(0px 0px 30px #06b6d4);\n transition: all 0.5s cubic-bezier(1, 0, 0, 1);\n}\n\n.button-cont:hover .button {\n background: #18181898;\n box-shadow: inset 0px 0px 0px #fefefe;\n}\n\n.button-cont:hover .button::before {\n width: 30%;\n height: 2px;\n}\n\n.button-cont:hover .button::after {\n width: 100%;\n height: 2px;\n}\n"},{"created":"2024-01-22T17:00:27.000Z","isPrivate":0,"projectId":"959f55","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":832,"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: #dedede;\n --bg-color-sub: #222;\n --bg-color: #323232;\n --main-color: #dedede;\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(21px);\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:27.000Z","isPrivate":0,"projectId":"9ebee1","snapshot":null,"tags":null,"title":"button by omriluz","updated":"2024-01-22T17:00:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":748,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn {\n width: 130px;\n height: 40px;\n font-size: 1.1em;\n cursor: pointer;\n background-color: #171717;\n color: #fff;\n border: none;\n border-radius: 5px;\n transition: all 0.4s;\n}\n\n.btn:hover {\n border-radius: 5px;\n transform: translateY(-10px);\n box-shadow: 0 -7px 0 -2px #f85959, 0 -15px 0 -4px #39a2db,\n 0 -16px 10px -3px #39a2db, 0 7px 0 -2px #f85959, 0 15px 0 -4px #39a2db,\n 0 16px 10px -3px #39a2db, 8px 0px 0 -2px #f85959, 15px 0px 0 -4px #39a2db,\n 16px 0px 10px -3px #39a2db, -8px 0px 0 -2px #f85959,\n -15px 0px 0 -4px #39a2db, -16px 0px 10px -3px #39a2db;\n}\n\n.btn:active {\n transition: all 0.2s;\n transform: translateY(-5px);\n box-shadow: 0 2px 0 -2px #f85959, 0 8px 0 -4px #39a2db,\n 0 12px 10px -3px #39a2db;\n}\n"},{"created":"2024-01-22T17:00:27.000Z","isPrivate":0,"projectId":"e0f2b0","snapshot":null,"tags":null,"title":"button by Javierrocadev","updated":"2024-01-22T17:00:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":949,"cssLen":2195,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n Hover me!\n \n \n \n Explore!\n\n","css":".absolute{position:absolute}.relative{position:relative}.-left-2{left:-0.5rem}.-top-8{top:-2rem}.left-6{left:1.5rem}.top-2{top:0.5rem}.top-2\\.5{top:0.625rem}.z-10{z-index:10}.h-12{height:3rem}.h-32{height:8rem}.w-32{width:8rem}.w-36{width:9rem}.origin-bottom{transform-origin:bottom}.scale-x-0{--tw-scale-x:0;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))}.transform{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))}.cursor-pointer{cursor:pointer}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:9999px}.rounded-md{border-radius:0.375rem}.border-none{border-style:none}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}.bg-green-200{--tw-bg-opacity:1;background-color:rgb(187 247 208 / var(--tw-bg-opacity))}.bg-green-400{--tw-bg-opacity:1;background-color:rgb(74 222 128 / var(--tw-bg-opacity))}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(22 163 74 / var(--tw-bg-opacity))}.p-2{padding:0.5rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.opacity-0{opacity:0}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-100{transition-duration:100ms}.duration-1000{transition-duration:1000ms}.duration-500{transition-duration:500ms}.duration-700{transition-duration:700ms}.group:hover .group-hover\\:scale-x-100{--tw-scale-x:1;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))}.group:hover .group-hover\\:opacity-100{opacity:1}.group:hover .group-hover\\:duration-1000{transition-duration:1000ms}.group:hover .group-hover\\:duration-500{transition-duration:500ms}.group:hover .group-hover\\:duration-700{transition-duration:700ms}"},{"created":"2024-01-22T17:00:27.000Z","isPrivate":0,"projectId":"19321c","snapshot":null,"tags":null,"title":"button by KhaledMatalkah","updated":"2024-01-22T17:00:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":45,"cssLen":816,"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: rgb(0, 0, 0);\n background: transparent;\n border-radius: 50px;\n text-align: center;\n text-decoration: none;\n cursor: pointer;\n position: relative;\n border: none;\n z-index: 1;\n}\n\n.button {\n overflow: hidden;\n}\n\n.button:before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: -100%;\n width: 100%;\n height: 100%;\n background-color: rgb(255, 255, 255);\n transition: left 0.8s ease-in-out;\n z-index: -1;\n}\n\n.button:hover:before {\n left: 0%;\n}\n\n.button:after {\n content: \"\";\n position: absolute;\n bottom: 50%;\n right: -100%;\n width: 100%;\n height: 100%;\n background-color: rgb(255, 255, 255);\n transition: right 0.8s ease-in-out;\n z-index: -1;\n}\n\n.button:hover:after {\n right: 0%;\n}"},{"created":"2024-01-22T17:00:27.000Z","isPrivate":0,"projectId":"b5bf9a","snapshot":null,"tags":null,"title":"button by ozgeozkaraa01","updated":"2024-01-22T17:00:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":1031,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n border: none;\n padding: 0.8em 2.5em;\n outline: none;\n color: white;\n font-style: 1.2em;\n position: relative;\n z-index: 1;\n cursor: pointer;\n background: none;\n text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.45);\n}\n\nbutton::before,\nbutton::after {\n position: absolute;\n top: 50%;\n left: 50%;\n border-radius: 10em;\n -webkit-transform: translateX(-50%) translateY(-50%);\n transform: translateX(-50%) translateY(-50%);\n width: 105%;\n height: 105%;\n content: \"\";\n z-index: -2;\n background-size: 400% 400%;\n background: linear-gradient(\n 100deg,\n #f79533,\n #f37055,\n #ef4e7b,\n #a166ab,\n #5073b8,\n #1098ad,\n #07b39b,\n #6fba82\n );\n}\n\nbutton::before {\n -webkit-filter: blur(7px);\n filter: blur(7px);\n -webkit-transition: all 0.25s ease;\n transition: all 0.25s ease;\n -webkit-animation: pulse 10s infinite ease;\n animation: pulse 10s infinite ease;\n}\n\nbutton::after {\n -webkit-filter: blur(0.3px);\n filter: blur(0.3px);\n}\n\nbutton:hover::before {\n width: 115%;\n height: 115%;\n}"},{"created":"2024-01-22T17:00:27.000Z","isPrivate":0,"projectId":"cfb283","snapshot":null,"tags":null,"title":"button by ashish-yadv","updated":"2024-01-22T17:00:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":939,"cssLen":745,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n display: grid;\n place-items: center;\n background: #e3edf7;\n padding: 1.4em;\n border-radius: 10px;\n box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),\n\t -6px -6px 10px -1px rgba(255,255,255,0.7);\n border: 1px solid rgba(0,0,0,0);\n cursor: pointer;\n transition: transform 0.5s;\n}\n\n.btn:hover {\n box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.2),\n\t inset -4px -4px 6px -1px rgba(255,255,255,0.7),\n\t -0.5px -0.5px 0px rgba(255,255,255,1),\n\t 0.5px 0.5px 0px rgba(0,0,0,0.15),\n\t 0px 12px 10px -10px rgba(0,0,0,0.05);\n border: 1px solid rgba(0,0,0,0.1);\n transform: translateY(0.5em);\n}\n\n.btn svg {\n transition: transform 0.5s;\n}\n\n.btn:hover svg {\n transform: scale(0.9) rotate(360deg);\n fill: #333333;\n}\n\n"}]}},"actionData":null,"errors":null}