{"loaderData":{"0":null,"0-3":{"total":7365,"projects":[{"created":"2024-01-22T17:00:32.000Z","isPrivate":0,"projectId":"3cebd9","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1158,"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(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:32.000Z","isPrivate":0,"projectId":"478cd2","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-lime-400 {\n --tw-border-opacity: 1;\n border-color: rgb(163 230 53 / var(--tw-border-opacity))\n}\n\n.bg-lime-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(163 230 53 / var(--tw-bg-opacity))\n}\n\n.bg-lime-950 {\n --tw-bg-opacity: 1;\n background-color: rgb(26 46 5 / 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-lime-400 {\n --tw-text-opacity: 1;\n color: rgb(163 230 53 / 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-lime-400 {\n --tw-shadow-color: #a3e635;\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":"500dab","snapshot":null,"tags":null,"title":"button by nazarbayev01","updated":"2024-01-22T17:00:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":38,"cssLen":679,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n padding: 1em 2em;\n border: none;\n border-radius: 5px;\n font-weight: bold;\n letter-spacing: 3px;\n background: #DCFFFC;\n text-transform: uppercase;\n color: #088178;\n transition: all 1000ms;\n font-size: 15px;\n position: relative;\n overflow: hidden;\n outline: 2px solid #088178;\n}\n\nbutton:hover {\n color: #DCFFFC;\n transform: scale(1);\n outline: 2px solid #088178;\n box-shadow: 4px 5px 17px -4px #088178;\n}\n\nbutton::before {\n content: \"\";\n position: absolute;\n left: -50px;\n top: 0;\n width: 0;\n height: 100%;\n background-color: #088178;\n transform: skewX(30deg);\n z-index: -1;\n transition: width 1000ms;\n}\n\nbutton:hover::before {\n width: 250%;\n}"},{"created":"2024-01-22T17:00:32.000Z","isPrivate":0,"projectId":"6fdb44","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":987,"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 width: 100px;\n height: 40px;\n font-size: 15px;\n font-weight: 600;\n color: white;\n border: none;\n background-size: 200% 200%;\n background-color: #99fff7;\n background-image: radial-gradient(\n at 65% 89%,\n hsla(249, 100%, 62%, 1) 0px,\n transparent 50%\n ),\n radial-gradient(at 68% 76%, hsla(334, 100%, 74%, 1) 0px, transparent 50%),\n radial-gradient(at 52% 39%, hsla(34, 100%, 71%, 1) 0px, transparent 50%),\n radial-gradient(at 12% 37%, hsla(282, 100%, 66%, 1) 0px, transparent 50%),\n radial-gradient(at 34% 9%, hsla(201, 100%, 63%, 1) 0px, transparent 50%),\n radial-gradient(at 89% 18%, hsla(193, 100%, 74%, 1) 0px, transparent 50%),\n radial-gradient(at 36% 37%, hsla(251, 100%, 65%, 1) 0px, transparent 50%);\n background-position: left;\n cursor: pointer;\n border-radius: 10px;\n transition: all 3s;\n}\n\n.button:hover {\n background-position: right;\n}\n"},{"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"}]}},"actionData":null,"errors":null}