{"loaderData":{"0":null,"0-2":{"total":7070,"projects":[{"created":"2024-01-22T17:00:32.000Z","isPrivate":0,"projectId":"bdeb46","snapshot":null,"tags":null,"title":"button by eslam-hany","updated":"2024-01-22T17:00:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":840,"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 mediumturquoise;\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: mediumturquoise;\n text-decoration: none;\n transition: 0.3s ease all;\n z-index: 1;\n cursor: pointer;\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: lightblue;\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:32.000Z","isPrivate":0,"projectId":"54d8f6","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T17:00:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":460,"cssLen":1966,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".absolute {\n position: absolute\n}\n\n.relative {\n position: relative\n}\n\n.-top-\\[150\\%\\] {\n top: -150%\n}\n\n.left-0 {\n left: 0px\n}\n\n.inline-flex {\n display: inline-flex\n}\n\n.h-\\[5px\\] {\n height: 5px\n}\n\n.w-80 {\n width: 20rem\n}\n\n.overflow-hidden {\n overflow: hidden\n}\n\n.rounded-md {\n border-radius: 0.375rem\n}\n\n.border {\n border-width: 1px\n}\n\n.border-b-4 {\n border-bottom-width: 4px\n}\n\n.border-cyan-400 {\n --tw-border-opacity: 1;\n border-color: rgb(34 211 238 / var(--tw-border-opacity))\n}\n\n.bg-cyan-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(34 211 238 / var(--tw-bg-opacity))\n}\n\n.bg-cyan-950 {\n --tw-bg-opacity: 1;\n background-color: rgb(8 51 68 / var(--tw-bg-opacity))\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n\n.font-medium {\n font-weight: 500\n}\n\n.text-cyan-400 {\n --tw-text-opacity: 1;\n color: rgb(34 211 238 / var(--tw-text-opacity))\n}\n\n.opacity-50 {\n opacity: 0.5\n}\n\n.shadow-\\[0_0_10px_10px_rgba\\(0\\2c 0\\2c 0\\2c 0\\.3\\)\\] {\n --tw-shadow: 0 0 10px 10px rgba(0,0,0,0.3);\n --tw-shadow-colored: 0 0 10px 10px 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-cyan-400 {\n --tw-shadow-color: #22d3ee;\n --tw-shadow: var(--tw-shadow-colored)\n}\n\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.duration-300 {\n transition-duration: 300ms\n}\n\n.duration-500 {\n transition-duration: 500ms\n}\n\n.hover\\:border-b:hover {\n border-bottom-width: 1px\n}\n\n.hover\\:border-t-4:hover {\n border-top-width: 4px\n}\n\n.hover\\:brightness-150:hover {\n --tw-brightness: brightness(1.5);\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.active\\:opacity-75:active {\n opacity: 0.75\n}\n\n.group:hover .group-hover\\:top-\\[150\\%\\] {\n top: 150%\n}"},{"created":"2024-01-22T17:00:32.000Z","isPrivate":0,"projectId":"9604e7","snapshot":null,"tags":null,"title":"button by ercnersoy","updated":"2024-01-22T17:00:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":612,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n padding: 1rem 2rem;\n border: 0;\n box-shadow: 0px 0px 40px 0px red;\n font-weight: bolder;\n color: white;\n border-radius: 0.3rem;\n background-color: red;\n letter-spacing: .2rem;\n}\n\nbutton:hover {\n animation: changeBg 1s infinite;\n -webkit-animation-duration: 10s;\n}\n\n@keyframes changeBg {\n 0%,\n\t100% {\n box-shadow: 0px 0px 40px 0px red;\n }\n\n 25% {\n box-shadow: 0px 0px 40px 0px turquoise;\n background-color: turquoise;\n }\n\n 50% {\n box-shadow: 0px 0px 40px 0px purple;\n background-color: purple;\n }\n\n 75% {\n box-shadow: 0px 0px 40px 0px rgb(191, 204, 11);\n background-color: rgb(191, 204, 11);\n }\n}"},{"created":"2024-01-22T17:00:32.000Z","isPrivate":0,"projectId":"99299b","snapshot":null,"tags":null,"title":"button by Lokesh1379","updated":"2024-01-22T17:00:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3968,"cssLen":890,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".parent {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.child {\n width: 50px;\n height: 50px;\n display: flex;\n justify-content: center;\n align-items: center;\n transform-style: preserve-3d;\n transition: all 0.5s ease-in-out;\n border-radius: 50%;\n margin: 0 5px;\n}\n\n.child:hover {\n background-color: white;\n background-position: -100px 100px, -100px 100px;\n transform: rotate3d(0.5, 1, 0, 30deg);\n transform: perspective(180px) rotateX(60deg) translateY(2px);\n box-shadow: 0px 10px 10px rgb(1, 49, 182);\n}\n\nbutton {\n border: none;\n background-color: transparent;\n font-size: 20px;\n}\n\n.button:hover {\n width: inherit;\n height: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n transform: translate3d(0px, 0px, 15px) perspective(180px) rotateX(-35deg) translateY(2px);\n border-radius: 50%;\n}"},{"created":"2024-01-22T17:00:32.000Z","isPrivate":0,"projectId":"6077b8","snapshot":null,"tags":null,"title":"button by ArturCodeCraft","updated":"2024-01-22T17:00:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":322,"cssLen":719,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\t\n","css":"/* ============================ */\na {\n text-decoration: none;\n}\n/* ============================ */\n.scroll-up {\n\t/* position: fixed; */\n right: 3rem;\n bottom: -50%;\n z-index: 10;\n width: 32px;\n height: 32px;\n border-radius: 4px;\n background-color: rgba(29, 29, 31, 0.7);\n backdrop-filter: saturate(180%) blur(20px);\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n transition: bottom .4s, transform .4s;\n}\n\n.scroll-up:hover {\n transform: translateY(-.25rem);\n}\n\n/* Show scroll-up */\n._show-scroll {\n bottom: 3rem;\n}\n\n@media (max-width: 1199.98px) {\n .scroll-up {\n right: 1rem;\n }\n}"},{"created":"2024-01-22T17:00:32.000Z","isPrivate":0,"projectId":"be559b","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":54,"cssLen":873,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n align-items: center;\n background-image: linear-gradient(144deg,#FF9A76, #FF6363 50%,#FF1E62);\n border: 0;\n border-radius: 8px;\n box-shadow: rgba(255, 154, 118, 0.2) 0 15px 30px -5px;\n box-sizing: border-box;\n color: #FFFFFF;\n display: flex;\n font-family: Phantomsans, sans-serif;\n font-size: 18px;\n justify-content: center;\n line-height: 1em;\n max-width: 100%;\n min-width: 140px;\n padding: 3px;\n text-decoration: none;\n user-select: none;\n -webkit-user-select: none;\n touch-action: manipulation;\n white-space: nowrap;\n cursor: pointer;\n transition: all .3s;\n}\n\nbutton:active,\nbutton:hover {\n outline: 0;\n}\n\nbutton span {\n background-color: rgb(5, 6, 45);\n padding: 16px 24px;\n border-radius: 6px;\n width: 100%;\n height: 100%;\n transition: 300ms;\n}\n\nbutton:hover span {\n background: none;\n}\n\nbutton:active {\n transform: scale(0.9);\n}"},{"created":"2024-01-22T17:00:32.000Z","isPrivate":0,"projectId":"600d61","snapshot":null,"tags":null,"title":"button by kevkevkevin","updated":"2024-01-22T17:00:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":47,"cssLen":1029,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n font-size: 16px;\n font-weight: 700;\n color: #292930;\n background: #ffdc60;\n height: 60px;\n line-height: 60px;\n text-align: center;\n padding: 0 50px;\n position: relative;\n z-index: 1;\n overflow: hidden;\n border-radius: 10px;\n text-transform: capitalize;\n cursor: pointer;\n border: none;\n box-shadow: 0px 0px 77px 12px rgba(0,0,0,0.13);\n -webkit-box-shadow: 0px 0px 77px 12px rgba(0,0,0,0.13);\n -moz-box-shadow: 0px 0px 77px 12px rgba(0,0,0,0.13);\n}\n\nbutton:before, button:after {\n content: \"\";\n background: #5956e9;\n height: 50%;\n width: 0;\n position: absolute;\n transition: .3s cubic-bezier(.785,.135,.15,.86);\n -webkit-transition: .3s cubic-bezier(.785,.135,.15,.86);\n z-index: -1;\n}\n\nbutton::before {\n top: 0;\n left: 0;\n right: auto;\n}\n\nbutton:after {\n bottom: 0;\n right: 0;\n left: auto;\n}\n\nbutton:hover {\n color: #fff;\n background-color: #57c9da;\n}\n\nbutton:hover:before {\n width: 100%;\n right: 0;\n left: auto;\n}\n\nbutton:hover::after {\n width: 100%;\n left: 0;\n right: auto;\n}\n"},{"created":"2024-01-22T17:00:32.000Z","isPrivate":0,"projectId":"e8066d","snapshot":null,"tags":null,"title":"button by Bodyhc","updated":"2024-01-22T17:00:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":803,"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 border: 1px solid #725ac1;\n outline: none;\n background-color: transparent;\n padding: 15px 30px;\n border-radius: 30px;\n z-index: 2;\n cursor: pointer;\n color: #ffff;\n overflow: hidden;\n text-align: center;\n font-size: 20px;\n font-weight: 800;\n font-family: \"Franklin Gothic Medium\", \"Arial Narrow\", Arial, sans-serif;\n}\n\nbutton::before {\n content: \"\";\n position: absolute;\n top: 20%;\n left: 20%;\n transform: translate(-50%, -50%);\n width: 40px;\n height: 40px;\n background-color: #725ac1;\n filter: blur(5px);\n z-index: -1;\n transition: width 0.9s ease-out, height 0.9s ease-out,\n background-color 0.3s ease-out;\n border-radius: 50%;\n}\n\nbutton:hover::before {\n border-radius: 20px;\n width: 300px;\n height: 200px;\n background-color: #725ac1;\n}\n"},{"created":"2024-01-22T17:00:32.000Z","isPrivate":0,"projectId":"fde62b","snapshot":null,"tags":null,"title":"button by ArturCodeCraft","updated":"2024-01-22T17:00:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":58,"cssLen":1016,"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.primary-button {\n min-width: 111px;\n height: 56px;\n border-radius: 40px;\n background: #000;\n padding: 16px 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n color: #fff;\n font-size: 16px;\n font-weight: 400;\n line-height: 1.5;\n letter-spacing: -0.32px;\n transition: background .2s ease-in-out, color .2s ease-in-out;\n position: relative;\n}\n\n.primary-button::before {\n content: '';\n width: 100%;\n height: 100%;\n border-radius: 40px;\n background: linear-gradient(69deg, #c3aab2 -4.77%, #9ec 46.72%, #80c0c8 90.23%, #4B8bfa 134.46%);\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n z-index: -1;\n transition: opacity .2s ease-in-out;\n}\n\n.primary-button:hover {\n background: transparent;\n color: #000;\n}\n\n.primary-button:hover::before {\n opacity: 1;\n}"},{"created":"2024-01-22T17:00:32.000Z","isPrivate":0,"projectId":"90e8c2","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":44,"cssLen":584,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".neu-button {\n background-color: #e0e0e0;\n border-radius: 50px;\n box-shadow: inset 4px 4px 10px #bcbcbc, inset -4px -4px 10px #ffffff;\n color: #4d4d4d;\n cursor: pointer;\n font-size: 18px;\n padding: 15px 40px;\n transition: all 0.2s ease-in-out;\n border: 2px solid rgb(206, 206, 206);\n}\n\n.neu-button:hover {\n box-shadow: inset 2px 2px 5px #bcbcbc, inset -2px -2px 5px #ffffff, 2px 2px 5px #bcbcbc, -2px -2px 5px #ffffff;\n}\n\n.neu-button:focus {\n outline: none;\n box-shadow: inset 2px 2px 5px #bcbcbc, inset -2px -2px 5px #ffffff, 2px 2px 5px #bcbcbc, -2px -2px 5px #ffffff;\n}"},{"created":"2024-01-22T17:00:31.000Z","isPrivate":0,"projectId":"2ca3a5","snapshot":null,"tags":null,"title":"button by reshades","updated":"2024-01-22T17:00:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":339,"cssLen":453,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n background-color: #3654ff;\n color: #fff;\n width: 8.5em;\n height: 2.9em;\n border: #3654ff 0.2em solid;\n border-radius: 11px;\n text-align: right;\n transition: all 0.6s ease;\n}\n\n.button:hover {\n background-color: #ffffff00;\n}\n\n.button svg {\n width: 1.6em;\n margin: -0.2em 0.8em 1em;\n position: absolute;\n display: flex;\n transition: all 0.6s ease;\n}\n\n.button:hover svg {\n transform: translateX(5px);\n}\n\n.text {\n margin: 0 1.5em\n}"},{"created":"2024-01-22T17:00:31.000Z","isPrivate":0,"projectId":"145b66","snapshot":null,"tags":null,"title":"button by Yaya12085","updated":"2024-01-22T17:00:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":472,"cssLen":2168,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".cursor-pointer{cursor:pointer}.rounded{border-radius:0.25rem}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-\\[\\#EB3349\\]{--tw-gradient-from:#EB3349 var(--tw-gradient-from-position);--tw-gradient-to:rgb(235 51 73 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-\\[\\#F45C43\\]{--tw-gradient-to:#F45C43 var(--tw-gradient-to-position)}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.font-semibold{font-weight:600}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow-\\[rgba\\(6\\2c _24\\2c _44\\2c _0\\.4\\)_0px_0px_0px_2px\\2c _rgba\\(6\\2c _24\\2c _44\\2c _0\\.65\\)_0px_4px_6px_-1px\\2c _rgba\\(255\\2c _255\\2c _255\\2c _0\\.08\\)_0px_1px_0px_inset\\]{--tw-shadow:rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;--tw-shadow-colored:0px 0px 0px 2px var(--tw-shadow-color), 0px 4px 6px -1px var(--tw-shadow-color), inset 0px 1px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.hover\\:shadow-\\[rgba\\(6\\2c _24\\2c _44\\2c _0\\.4\\)_0px_0px_0px_2px\\2c _rgba\\(6\\2c _24\\2c _44\\2c _0\\.65\\)_0px_4px_6px_-10px\\2c _rgba\\(255\\2c _255\\2c _255\\2c _0\\.08\\)_0px_1px_0px_inset\\]:hover{--tw-shadow:rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -10px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;--tw-shadow-colored:0px 0px 0px 2px var(--tw-shadow-color), 0px 4px 6px -10px var(--tw-shadow-color), inset 0px 1px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.focus\\:shadow-\\[inset_-12px_-8px_40px_\\#46464620\\]:focus{--tw-shadow:inset -12px -8px 40px #46464620;--tw-shadow-colored:inset -12px -8px 40px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}"}]}},"actionData":null,"errors":null}