{"loaderData":{"0":null,"0-3":{"total":7297,"projects":[{"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)}"},{"created":"2024-01-22T17:00:31.000Z","isPrivate":0,"projectId":"83664b","snapshot":null,"tags":null,"title":"button by doniaskima","updated":"2024-01-22T17:00:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":51,"cssLen":1805,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn-9,\n.btn-9 *,\n.btn-9 :after,\n.btn-9 :before,\n.btn-9:after,\n.btn-9:before {\n border: 0 solid;\n box-sizing: border-box;\n}\n\n.btn-9 {\n -webkit-tap-highlight-color: transparent;\n -webkit-appearance: button;\n background-color: #000;\n background-image: none;\n color: #fff;\n cursor: pointer;\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,\n Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,\n Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n font-size: 100%;\n font-weight: 900;\n line-height: 1.5;\n margin: 0;\n -webkit-mask-image: -webkit-radial-gradient(#000, #fff);\n padding: 0;\n text-transform: uppercase;\n}\n\n.btn-9:disabled {\n cursor: default;\n}\n\n.btn-9:-moz-focusring {\n outline: auto;\n}\n\n.btn-9 svg {\n display: block;\n vertical-align: middle;\n}\n\n.btn-9 [hidden] {\n display: none;\n}\n\n.btn-9 {\n border-radius: 99rem;\n border-width: 2px;\n overflow: hidden;\n padding: 0.8rem 3rem;\n position: relative;\n}\n\n.btn-9 span {\n mix-blend-mode: difference;\n}\n\n.btn-9:after,\n.btn-9:before {\n --tilt: 1.2rem;\n background: #fff;\n -webkit-clip-path: polygon(\n 0 0,\n calc(100% - var(--tilt)) 0,\n 100% 50%,\n calc(100% - var(--tilt)) 100%,\n 0 100%\n );\n clip-path: polygon(\n 0 0,\n calc(100% - var(--tilt)) 0,\n 100% 50%,\n calc(100% - var(--tilt)) 100%,\n 0 100%\n );\n content: \"\";\n display: block;\n height: 100%;\n left: calc(-100% - var(--tilt));\n position: absolute;\n top: 0;\n transform: translateX(var(--progress, 0));\n transition: transform 0.2s ease;\n width: calc(100% + var(--tilt));\n}\n\n.btn-9:after {\n left: 100%;\n transform: translateX(var(--progress, 0)) rotate(180deg);\n z-index: -1;\n}\n\n.btn-9:hover:before {\n --progress: 100%;\n}\n\n.btn-9:hover:after {\n --progress: -100%;\n}\n"},{"created":"2024-01-22T17:00:31.000Z","isPrivate":0,"projectId":"3c6fc7","snapshot":null,"tags":null,"title":"button by imPradhyumn","updated":"2024-01-22T17:00:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":40,"cssLen":969,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 5px;\n background: #183153;\n font-family: \"Montserrat\", sans-serif;\n box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.2);\n overflow: hidden;\n border: none;\n}\n\nbutton:after {\n content: \" \";\n width: 0%;\n height: 100%;\n background: #FFD401;\n position: absolute;\n transition: all 0.4s ease-in-out;\n right: auto;\n left: auto;\n}\n\nbutton:hover::after {\n right: auto;\n left: auto;\n width: 100%;\n}\n\nbutton span {\n text-align: center;\n text-decoration: none;\n width: 100%;\n padding: 18px 25px;\n color: #fff;\n font-size: 1.125em;\n font-weight: 700;\n letter-spacing: 0.3em;\n z-index: 20;\n transition: all 0.3s ease-in-out;\n}\n\nbutton:hover span {\n color: #183153;\n animation: scaleUp 0.3s ease-in-out;\n}\n\n@keyframes scaleUp {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(0.95);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n"},{"created":"2024-01-22T17:00:31.000Z","isPrivate":0,"projectId":"d0b455","snapshot":null,"tags":null,"title":"button by mrhyddenn","updated":"2024-01-22T17:00:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":49,"cssLen":1079,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n text-transform: uppercase;\n letter-spacing: 0.1em;\n padding: 10px 30px;\n transition: 0.5s;\n position: relative;\n font-size: 17px;\n background: #333;\n border: none;\n color: #fff;\n}\n\nbutton:hover {\n letter-spacing: 0.25em;\n background: #ff1867;\n color: #ff1867;\n box-shadow: 0 0 45px #ff1867;\n}\n\nbutton::before {\n content: '';\n position: absolute;\n inset: 2px;\n background: #222222;\n}\n\nbutton span {\n position: relative;\n z-index: 1;\n}\n\nbutton i {\n position: absolute;\n inset: 0;\n display: block;\n}\n\nbutton i::before {\n content: '';\n position: absolute;\n border: 2px solid #ff1867;\n width: 7px;\n height: 4px;\n top: -3.5px;\n left: 80%;\n background: #222222;\n transform: translateX(-50%);\n transition: 0.5s;\n}\n\nbutton:hover i::before {\n width: 20px;\n left: 20%;\n}\n\nbutton i::after {\n content: '';\n position: absolute;\n border: 2px solid #ff1867;\n width: 7px;\n height: 4px;\n bottom: -3.5px;\n left: 20%;\n background: #222222;\n transform: translateX(-50%);\n transition: 0.5s;\n}\n\nbutton:hover i::after {\n width: 20px;\n left: 80%;\n}"},{"created":"2024-01-22T17:00:31.000Z","isPrivate":0,"projectId":"ddf783","snapshot":null,"tags":null,"title":"button by ozgeozkaraa01","updated":"2024-01-22T17:00:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":288,"cssLen":432,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.3s linear;\n border-radius: 10px;\n border: 1px solid #F2BED1;\n padding: 10px 20px;\n}\n\nbutton > svg {\n margin-left: 5px;\n transition: all 0.4s ease-in;\n}\n\nbutton:hover > svg {\n font-size: 1.2em;\n transform: translateX(6px);\n}\n\nbutton:hover {\n box-shadow: 10px 10px 40px #d1d1d1;\n transform: translateY(-5px);\n}"}]}},"actionData":null,"errors":null}