{"loaderData":{"0":null,"0-2":{"total":7091,"projects":[{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"b98dbe","snapshot":null,"tags":null,"title":"button by TanimMahbub","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":569,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n /* typography */\n font-size: 22px;\n font-weight: 600;\n font-family: monospace;\n text-transform: uppercase;\n letter-spacing: 1px;\n\n /* ui */\n border: none;\n cursor: pointer;\n display: inline-block;\n padding: 12px 35px;\n border-radius: 8px;\n background: #f6781e;\n color: #fff;\n box-shadow: 0 0 0 3px #2f2e41, 0 6px 0 #2f2e41;\n transition: all 0.1s ease, background 0.3s ease;\n}\n\n/* ux */\n.button:hover,\n.button:focus {\n background: #df6108;\n}\n\n.button:active {\n box-shadow: 0 0 0 3px #2f2e41, 0 4px 0 #2f2e41;\n transform: translateY(2px);\n}\n"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"b64ec6","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":62,"cssLen":806,"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 color: var(--button_outline_color);\n transform: translateY(-0.2em);\n transition: transform 0.1s ease;\n background: linear-gradient(45deg, #FF5F6D, #FFC371);\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-22T16:59:59.000Z","isPrivate":0,"projectId":"757f62","snapshot":null,"tags":null,"title":"button by AkashKobal","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":51,"cssLen":1274,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n ","css":".buttonDownload {\n display: inline-block;\n position: relative;\n padding: 10px 25px;\n background-color: #4CC713;\n color: white;\n font-family: sans-serif;\n text-decoration: none;\n font-size: 0.9em;\n text-align: center;\n text-indent: 15px;\n border: none;\n border-radius: 2em;\n font-weight: bold;\n}\n\n.buttonDownload:hover {\n background-color: #1a60a2;\n color: white;\n}\n\n.buttonDownload:before, .buttonDownload:after {\n content: ' ';\n display: block;\n position: absolute;\n left: 15px;\n top: 52%;\n}\n\n.buttonDownload:before {\n width: 10px;\n height: 2px;\n border-style: solid;\n border-width: 0 2px 2px;\n}\n\n.buttonDownload:after {\n width: 0;\n height: 0;\n margin-left: 3px;\n margin-top: -7px;\n border-style: solid;\n border-width: 4px 4px 0 4px;\n border-color: transparent;\n border-top-color: inherit;\n animation: downloadArrow 1s linear infinite;\n animation-play-state: paused;\n}\n\n.buttonDownload:hover:before {\n border-color: #bdd3ef;\n}\n\n.buttonDownload:hover:after {\n border-top-color: #eff1f7;\n animation-play-state: running;\n}\n\n@keyframes downloadArrow {\n 0% {\n margin-top: -7px;\n opacity: 1;\n }\n\n 0.001% {\n margin-top: -15px;\n opacity: 0.4;\n }\n\n 50% {\n opacity: 1;\n }\n\n 100% {\n margin-top: 0;\n opacity: 0.4;\n }\n}\n"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"8e2c23","snapshot":null,"tags":null,"title":"button by leerepublik","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":345,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n background-color: #fff;\n height: 40px;\n width: 120px;\n border-radius: 10px;\n border: 1px solid #add8e6;\n box-shadow: 3px 3px #fff, 5px 5px #add8e6;\n color: #add8e6;\n font-weight: 700;\n transition: box-shadow 300ms linear;\n}\n\n.button:hover {\n box-shadow: none;\n color: #fff;\n background-color: #add8e6;\n cursor: pointer;\n}"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"ed08b2","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1275,"cssLen":987,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".Btn {\n width: 45px;\n height: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background-color: transparent;\n position: relative;\n /* overflow: hidden; */\n border-radius: 7px;\n cursor: pointer;\n transition: all 0.3s;\n}\n\n.svgContainer {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n backdrop-filter: blur(0px);\n letter-spacing: 0.8px;\n border-radius: 10px;\n transition: all 0.3s;\n border: 1px solid rgba(156, 156, 156, 0.466);\n}\n\n.BG {\n position: absolute;\n content: \"\";\n width: 100%;\n height: 100%;\n background: #7289da;\n z-index: -1;\n border-radius: 10px;\n pointer-events: none;\n transition: all 0.3s;\n}\n\n.Btn:hover .BG {\n transform: rotate(35deg);\n transform-origin: bottom;\n}\n\n.Btn:hover .svgContainer {\n border: 1px solid rgba(206, 206, 206, 0.466);\n background-color: rgba(214, 214, 214, 0.466);\n backdrop-filter: blur(4px);\n}\n"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"afecf0","snapshot":null,"tags":null,"title":"button by nimsay06","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1504,"cssLen":1091,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n height: 4em;\n width: 12em;\n border-radius: 18px;\n border: 4px solid lightskyblue;\n padding: 0.2em;\n overflow: hidden;\n}\n\n.text {\n display: block;\n font-size: 20px;\n color: lightskyblue;\n}\n\n.afterText {\n display: none;\n}\n\n.clouds {\n display: none;\n height: 4rem;\n width: 8rem;\n}\n\n.button:hover {\n cursor: pointer;\n}\n\n.button:hover .text {\n text-decoration: underline;\n font-weight: bold;\n}\n\n.button:focus {\n transition: ease-in 200ms;\n background-color: lightskyblue;\n border: none;\n}\n\n.button:focus .text {\n display: none;\n}\n\n.button:focus .afterText {\n animation: hoverMovement 1s ease-in alternate infinite;\n display: block;\n font-size: 25px;\n letter-spacing: 5px;\n color: rgb(90, 94, 97);\n}\n\n.button:focus .clouds {\n display: block;\n animation: cloudMovement ease-in-out 3s infinite;\n margin-top: -1.5em;\n}\n\n@keyframes hoverMovement {\n from {\n transform: translateY(0em);\n }\n\n to {\n transform: translateY(-0.1em);\n }\n}\n\n@keyframes cloudMovement {\n from {\n transform: translateX(-5em);\n }\n\n to {\n transform: translateX(10em);\n }\n}"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"1aacf5","snapshot":null,"tags":null,"title":"button by csozidev","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":11309,"cssLen":2246,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n\n\n\n\n\n\n\n\n

","css":"/* Cool share button made by: csozi | Website: english.csozi.hu*/\n\n.buttons {\n position: relative;\n display: grid;\n place-items: center;\n height: fit-content;\n width: fit-content;\n transition: 0.3s;\n border-radius: 50%;\n}\n\n.buttons:hover {\n padding: 60px;\n}\n\n.buttons:hover .button {\n box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff;\n}\n\n.main-button {\n position: relative;\n display: grid;\n place-items: center;\n padding: 10px;\n border: none;\n background: #e8e8e8;\n box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff;\n border-radius: 50%;\n transition: 0.2s;\n z-index: 100;\n}\n\n.button {\n position: absolute;\n display: grid;\n place-items: center;\n padding: 10px;\n border: none;\n background: #e8e8e8;\n box-shadow: 5px 5px 12px rgba(202, 202, 202, 0), -5px -5px 12px rgba(255, 255, 255, 0);\n transition: 0.3s;\n border-radius: 50%;\n}\n\n.discord-button:hover {\n background: #5865F2;\n}\n\n.buttons:hover .discord-button {\n translate: 70px 0px;\n box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff;\n}\n\n.twitter-button:hover {\n background: #1CA1F1;\n}\n\n.buttons:hover .twitter-button {\n translate: 47px -47px;\n box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff;\n}\n\n.reddit-button:hover {\n background: #FF4500;\n}\n\n.buttons:hover .reddit-button {\n translate: 0px -70px;\n box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff;\n}\n\n.messenger-button:hover {\n background: #0093FF;\n}\n\n.buttons:hover .messenger-button {\n translate: -47px -47px;\n box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff;\n}\n\n.pinterest-button:hover {\n background: #F0002A;\n}\n\n.buttons:hover .pinterest-button {\n translate: -70px 0px;\n box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff;\n}\n\n.instagram-button:hover {\n background: #F914AF;\n}\n\n.buttons:hover .instagram-button {\n translate: -47px 47px;\n box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff;\n}\n\n.snapchat-button:hover {\n background: #FFFC00;\n}\n\n.buttons:hover .snapchat-button {\n translate: 0px 70px;\n box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff;\n}\n\n.whatsapp-button:hover {\n background: #25D366;\n}\n\n.buttons:hover .whatsapp-button {\n translate: 47px 47px;\n box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff;\n}"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"5d7399","snapshot":null,"tags":null,"title":"button by mi-series","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":719,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n width: 160px;\n line-height: 40px;\n font-weight: 500px;\n font-size: 17px;\n letter-spacing: 2px;\n text-decoration: none;\n text-transform: uppercase;\n padding: 0;\n background: #FBEAEB;\n position: relative;\n z-index: 2;\n color: #FBEAEB;\n perspective: 300px;\n transform-style: preserve-3d;\n border-radius: 6px;\n border: none;\n}\n\nbutton:hover {\n color: #2F3C7E;\n}\n\nbutton::after {\n position: absolute;\n content: \"\";\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n font-weight: 500px;\n background: #2F3C7E;\n border-radius: 6px;\n z-index: -1;\n transform-origin: center bottom;\n transform: rotateX(0);\n transition: all 0.3s ease;\n}\n\nbutton:hover::after {\n transform: rotateX(-180deg);\n}"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"097ef9","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":385,"cssLen":777,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".Btn {\n width: 180px;\n height: 45px;\n border-radius: 40px;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n color: white;\n background-color: transparent;\n cursor: pointer;\n position: relative;\n background: linear-gradient( to right,#44ea76, #39fad7);\n transition-duration: .3s;\n letter-spacing: 1.4px;\n}\n\n.svgIcon path {\n fill: white;\n}\n\n.Btn:hover {\n transform: scale(0.95);\n transition-duration: .3s;\n}\n\n.Btn::before {\n content: \"\";\n position: absolute;\n width: 80%;\n height: 30%;\n background: linear-gradient( to right,#44ea76, #39fad7);\n filter: blur(10px);\n bottom: -3px;\n z-index: -1;\n transition-duration: .3s;\n}\n\n.Btn:hover::before {\n bottom: -1px;\n filter: blur(5px);\n transition-duration: .3s;\n}"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"02e01b","snapshot":null,"tags":null,"title":"button by KhaledMatalkah","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":1050,"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: 10px 20px;\n font-size: 16px;\n font-weight: bold;\n text-align: center;\n text-decoration: none;\n color: #ffffff;\n background-color: #000000;\n border: none;\n border-radius: 50px;\n transition: all 0.3s ease-in-out;\n cursor: pointer;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n position: relative;\n z-index: 1;\n}\n\n.button:hover {\n background-color: #111111;\n transform: translateY(-2px);\n box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);\n}\n\n.button:focus {\n outline: none;\n box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.3);\n}\n\n.button:active {\n transform: translateY(1px);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n top: -5px;\n left: -5px;\n right: -5px;\n bottom: -5px;\n background-color: rgba(255, 255, 255, 0.1);\n border-radius: 50px;\n z-index: -1;\n transition: all 0.3s ease-in-out;\n}\n\n.button:hover::before {\n top: -8px;\n left: -8px;\n right: -8px;\n bottom: -8px;\n}\n\n"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"c27141","snapshot":null,"tags":null,"title":"button by AmIt-DasIT","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":95,"cssLen":881,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Learn More

","css":".box {\n width: 45px;\n height: 45px;\n background: #5cda5c;\n border-radius: 25px;\n display: flex;\n justify-items: center;\n justify-content: center;\n align-items: center;\n transition: 0.3s;\n cursor: pointer;\n position: relative;\n}\n\n.arrow {\n border: solid black;\n border-width: 0 3px 3px 0;\n display: inline-block;\n padding: 3px;\n}\n\n.right {\n transform: rotate(-45deg);\n}\n\n.box:hover {\n width: 160px;\n background: linear-gradient(to right, #26d526, yellow);\n}\n\n.box:hover .arrow {\n display: none;\n}\n\n.box .text {\n display: none;\n}\n\n.box:hover .text {\n display: flex;\n font-size: 16px;\n font-weight: 550;\n color: black;\n letter-spacing: 0.6px;\n animation: anima 0.6s ease;\n}\n\n@keyframes anima {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n.box:active {\n background: linear-gradient(to right, rgb(38, 213, 38, 0.8), rgba(255, 255, 0, 0.8));\n}\n"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"808f8b","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":475,"cssLen":1985,"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-neutral-400 {\n --tw-border-opacity: 1;\n border-color: rgb(163 163 163 / var(--tw-border-opacity))\n}\n\n.bg-neutral-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(163 163 163 / var(--tw-bg-opacity))\n}\n\n.bg-neutral-950 {\n --tw-bg-opacity: 1;\n background-color: rgb(10 10 10 / 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-neutral-400 {\n --tw-text-opacity: 1;\n color: rgb(163 163 163 / 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-neutral-400 {\n --tw-shadow-color: #a3a3a3;\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}"}]}},"actionData":null,"errors":null}