{"loaderData":{"0":null,"0-3":{"total":7311,"projects":[{"created":"2024-01-22T16:59:41.000Z","isPrivate":0,"projectId":"c8d15b","snapshot":null,"tags":null,"title":"button by CYBWEBALI","updated":"2024-01-22T16:59:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":939,"cssLen":730,"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);\n fill: #333333;\n}\n\n"},{"created":"2024-01-22T16:59:41.000Z","isPrivate":0,"projectId":"7c1b91","snapshot":null,"tags":null,"title":"button by hakemdamer222","updated":"2024-01-22T16:59:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":502,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button,\nbutton:focus {\n font-size: 17px;\n padding: 10px 25px;\n border-radius: 0.7rem;\n background-image: linear-gradient(rgb(214, 202, 254), rgb(158, 129, 254));\n border: 2px solid rgb(50, 50, 50);\n border-bottom: 5px solid rgb(50, 50, 50);\n box-shadow: 0px 1px 6px 0px rgb(158, 129, 254);\n transform: translate(0, -3px);\n cursor: pointer;\n transition: 0.2s;\n transition-timing-function: linear;\n}\n\nbutton:active {\n transform: translate(0, 0);\n border-bottom: 2px solid rgb(50, 50, 50);\n}\n"},{"created":"2024-01-22T16:59:41.000Z","isPrivate":0,"projectId":"52e429","snapshot":null,"tags":null,"title":"button by mrhyddenn","updated":"2024-01-22T16:59:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":44,"cssLen":1635,"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 margin: 0;\n padding: 0.8em 1em;\n outline: none;\n text-decoration: none;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n border: none;\n text-transform: uppercase;\n background-color: #333;\n border-radius: 10px;\n color: #fff;\n font-weight: 300;\n font-size: 18px;\n font-family: inherit;\n z-index: 0;\n overflow: hidden;\n transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);\n}\n\nbutton:hover {\n animation: sh0 0.5s ease-in-out both;\n}\n\n@keyframes sh0 {\n 0% {\n transform: rotate(0deg) translate3d(0, 0, 0);\n }\n\n 25% {\n transform: rotate(7deg) translate3d(0, 0, 0);\n }\n\n 50% {\n transform: rotate(-7deg) translate3d(0, 0, 0);\n }\n\n 75% {\n transform: rotate(1deg) translate3d(0, 0, 0);\n }\n\n 100% {\n transform: rotate(0deg) translate3d(0, 0, 0);\n }\n}\n\nbutton:hover span {\n animation: storm 0.7s ease-in-out both;\n animation-delay: 0.06s;\n}\n\nbutton::before,\nbutton::after {\n content: '';\n position: absolute;\n right: 0;\n bottom: 0;\n width: 100px;\n height: 100px;\n border-radius: 50%;\n background: #fff;\n opacity: 0;\n transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);\n z-index: -1;\n transform: translate(100%, -25%) translate3d(0, 0, 0);\n}\n\nbutton:hover::before,\nbutton:hover::after {\n opacity: 0.15;\n transition: transform 0.2s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);\n}\n\nbutton:hover::before {\n transform: translate3d(50%, 0, 0) scale(0.9);\n}\n\nbutton:hover::after {\n transform: translate(50%, 0) scale(1.1);\n}\n\n"},{"created":"2024-01-22T16:59:41.000Z","isPrivate":0,"projectId":"c0e1b3","snapshot":null,"tags":null,"title":"button by absoluteSTrange","updated":"2024-01-22T16:59:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":24,"cssLen":515,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n padding: 17px 40px;\n border-radius: 10px;\n border: 0;\n background-color: rgb(255, 56, 86);\n letter-spacing: 1.5px;\n font-size: 15px;\n transition: all 0.3s ease;\n box-shadow: rgb(201, 46, 70) 0px 10px 0px 0px;\n color: hsl(0, 0%, 100%);\n cursor: pointer;\n}\n\nbutton:hover {\n box-shadow: rgb(201, 46, 70) 0px 7px 0px 0px;\n}\n\nbutton:active {\n background-color: rgb(255, 56, 86);\n /*50, 168, 80*/\n box-shadow: rgb(201, 46, 70) 0px 0px 0px 0px;\n transform: translateY(5px);\n transition: 200ms;\n}\n"},{"created":"2024-01-22T16:59:41.000Z","isPrivate":0,"projectId":"b3dbc6","snapshot":null,"tags":null,"title":"button by cssbuttons-io","updated":"2024-01-22T16:59:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":1250,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n --glow-color: rgb(217, 176, 255);\n --glow-spread-color: rgba(191, 123, 255, 0.781);\n --enhanced-glow-color: rgb(231, 206, 255);\n --btn-color: rgb(100, 61, 136);\n border: .25em solid var(--glow-color);\n padding: 1em 3em;\n color: var(--glow-color);\n font-size: 15px;\n font-weight: bold;\n background-color: var(--btn-color);\n border-radius: 1em;\n outline: none;\n box-shadow: 0 0 1em .25em var(--glow-color),\n 0 0 4em 1em var(--glow-spread-color),\n inset 0 0 .75em .25em var(--glow-color);\n text-shadow: 0 0 .5em var(--glow-color);\n position: relative;\n transition: all 0.3s;\n}\n\nbutton::after {\n pointer-events: none;\n content: \"\";\n position: absolute;\n top: 120%;\n left: 0;\n height: 100%;\n width: 100%;\n background-color: var(--glow-spread-color);\n filter: blur(2em);\n opacity: .7;\n transform: perspective(1.5em) rotateX(35deg) scale(1, .6);\n}\n\nbutton:hover {\n color: var(--btn-color);\n background-color: var(--glow-color);\n box-shadow: 0 0 1em .25em var(--glow-color),\n 0 0 4em 2em var(--glow-spread-color),\n inset 0 0 .75em .25em var(--glow-color);\n}\n\nbutton:active {\n box-shadow: 0 0 0.6em .25em var(--glow-color),\n 0 0 2.5em 2em var(--glow-spread-color),\n inset 0 0 .5em .25em var(--glow-color);\n}"},{"created":"2024-01-22T16:59:41.000Z","isPrivate":0,"projectId":"9d42ce","snapshot":null,"tags":null,"title":"button by Web-Potato","updated":"2024-01-22T16:59:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":45,"cssLen":663,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n padding: 0.1em 0.25em;\n width: 13em;\n height: 4.2em;\n background-color: #212121;\n border: 0.08em solid #fff;\n border-radius: 0.3em;\n font-size: 12px;\n cursor: pointer;\n}\n\nbutton span {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n bottom: 0.4em;\n width: 8.25em;\n height: 2.5em;\n background-color: #212121;\n border-radius: 0.2em;\n font-size: 1.5em;\n color: #fff;\n border: 0.08em solid #fff;\n box-shadow: 0 0.4em 0.1em 0.019em #fff;\n}\n\nbutton span:hover {\n transition: all 0.5s;\n transform: translate(0, 0.4em);\n box-shadow: 0 0 0 0 #fff;\n}\n\nbutton span:not(hover) {\n transition: all 1s;\n}\n"},{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"e3f9c2","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":100,"cssLen":1099,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn-class-name {\n --primary: 255, 90, 120;\n --secondary: 150, 50, 60;\n width: 60px;\n height: 50px;\n border: none;\n outline: none;\n cursor: pointer;\n user-select: none;\n touch-action: manipulation;\n outline: 10px solid rgb(var(--primary), .5);\n border-radius: 100%;\n position: relative;\n transition: .3s;\n}\n\n.btn-class-name .back {\n background: rgb(var(--secondary));\n border-radius: 100%;\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n}\n\n.btn-class-name .front {\n background: linear-gradient(0deg, rgba(var(--primary), .6) 20%, rgba(var(--primary)) 50%);\n box-shadow: 0 .5em 1em -0.2em rgba(var(--secondary), .5);\n border-radius: 100%;\n position: absolute;\n border: 1px solid rgb(var(--secondary));\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 1.2rem;\n font-weight: 600;\n font-family: inherit;\n transform: translateY(-15%);\n transition: .15s;\n color: rgb(var(--secondary));\n}\n\n.btn-class-name:active .front {\n transform: translateY(0%);\n box-shadow: 0 0;\n}"},{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"b4953e","snapshot":null,"tags":null,"title":"button by gagan-gv","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":404,"cssLen":727,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n width: 150px;\n height: 50px;\n border-radius: 5px;\n border: none;\n transition: all 0.5s ease-in-out;\n font-size: 20px;\n font-family: Verdana, Geneva, Tahoma, sans-serif;\n font-weight: 600;\n display: flex;\n align-items: center;\n background: #040f16;\n color: #f5f5f5;\n}\n\n.btn:hover {\n box-shadow: 0 0 20px 0px #2e2e2e3a;\n}\n\n.btn .icon {\n position: absolute;\n height: 40px;\n width: 70px;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.5s;\n}\n\n.btn .text {\n transform: translateX(55px);\n}\n\n.btn:hover .icon {\n width: 175px;\n}\n\n.btn:hover .text {\n transition: all 0.5s;\n opacity: 0;\n}\n\n.btn:focus {\n outline: none;\n}\n\n.btn:active .icon {\n transform: scale(0.85);\n}"},{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"756ce0","snapshot":null,"tags":null,"title":"button by Madflows","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":48,"cssLen":2044,"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: inline-block;\n cursor: pointer;\n outline: none;\n border: 0;\n vertical-align: middle;\n text-decoration: none;\n font-family: inherit;\n font-size: 15px;\n}\n\nbutton.learn-more {\n font-weight: 600;\n color: #382b22;\n text-transform: uppercase;\n padding: 1.25em 2em;\n background: #fff0f0;\n border: 2px solid #b18597;\n border-radius: 0.75em;\n -webkit-transform-style: preserve-3d;\n transform-style: preserve-3d;\n -webkit-transition: background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);\n transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);\n}\n\nbutton.learn-more::before {\n position: absolute;\n content: '';\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: #f9c4d2;\n border-radius: inherit;\n -webkit-box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2;\n box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2;\n -webkit-transform: translate3d(0, 0.75em, -1em);\n transform: translate3d(0, 0.75em, -1em);\n transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);\n}\n\nbutton.learn-more:hover {\n background: #ffe9e9;\n -webkit-transform: translate(0, 0.25em);\n transform: translate(0, 0.25em);\n}\n\nbutton.learn-more:hover::before {\n -webkit-box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2;\n box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2;\n -webkit-transform: translate3d(0, 0.5em, -1em);\n transform: translate3d(0, 0.5em, -1em);\n}\n\nbutton.learn-more:active {\n background: #ffe9e9;\n -webkit-transform: translate(0em, 0.75em);\n transform: translate(0em, 0.75em);\n}\n\nbutton.learn-more:active::before {\n -webkit-box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2;\n box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2;\n -webkit-transform: translate3d(0, 0, -1em);\n transform: translate3d(0, 0, -1em);\n}"},{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"d6e924","snapshot":null,"tags":null,"title":"button by Mike11jr","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":488,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","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 .4s;\n}\n\n.btn:hover {\n border-radius: 5px;\n transform: translateY(-10px);\n box-shadow: 0 7px 0 -2px #f85959,\n 0 15px 0 -4px #39a2db,\n 0 16px 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,\n 0 8px 0 -4px #39a2db,\n 0 12px 10px -3px #39a2db;\n}"},{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"4eafdd","snapshot":null,"tags":null,"title":"button by mobinkakei","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":59,"cssLen":1894,"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 margin: 0;\n padding: 17px 35px;\n outline: none;\n text-decoration: none;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n text-transform: uppercase;\n background-color: #fff;\n border: 1px solid rgba(22, 76, 167, 0.6);\n border-radius: 10px;\n color: #1d89ff;\n font-weight: 400;\n font-family: inherit;\n z-index: 0;\n overflow: hidden;\n transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);\n}\n\nbutton span {\n color: #164ca7;\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.7px;\n}\n\nbutton:hover {\n animation: rotate624 0.7s ease-in-out both;\n}\n\nbutton:hover span {\n animation: storm1261 0.7s ease-in-out both;\n animation-delay: 0.06s;\n}\n\n@keyframes rotate624 {\n 0% {\n transform: rotate(0deg) translate3d(0, 0, 0);\n }\n\n 25% {\n transform: rotate(3deg) translate3d(0, 0, 0);\n }\n\n 50% {\n transform: rotate(-3deg) translate3d(0, 0, 0);\n }\n\n 75% {\n transform: rotate(1deg) translate3d(0, 0, 0);\n }\n\n 100% {\n transform: rotate(0deg) translate3d(0, 0, 0);\n }\n}\n\n@keyframes storm1261 {\n 0% {\n transform: translate3d(0, 0, 0) translateZ(0);\n }\n\n 25% {\n transform: translate3d(4px, 0, 0) translateZ(0);\n }\n\n 50% {\n transform: translate3d(-3px, 0, 0) translateZ(0);\n }\n\n 75% {\n transform: translate3d(2px, 0, 0) translateZ(0);\n }\n\n 100% {\n transform: translate3d(0, 0, 0) translateZ(0);\n }\n}\n\n.btn-shine {\n border: 1px solid;\n overflow: hidden;\n position: relative;\n}\n\n.btn-shine span {\n z-index: 20;\n}\n\n.btn-shine:after {\n background: #38ef7d;\n content: \"\";\n height: 155px;\n left: -75px;\n opacity: 0.4;\n position: absolute;\n top: -50px;\n transform: rotate(35deg);\n transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);\n width: 50px;\n z-index: -10;\n}\n\n.btn-shine:hover:after {\n left: 120%;\n transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);\n}"},{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"40a462","snapshot":null,"tags":null,"title":"button by ShrinilDhorda","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":40,"cssLen":594,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n","css":".btn {\n font-size: 1.2rem;\n padding: 1rem 2.5rem;\n border: none;\n outline: none;\n border-radius: 0.4rem;\n cursor: pointer;\n text-transform: uppercase;\n background-color: rgb(14, 14, 26);\n color: rgb(234, 234, 234);\n font-weight: 700;\n transition: 0.6s;\n box-shadow: 0px 0px 60px #1f4c65;\n -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));\n}\n\n.btn:active {\n scale: 0.92;\n}\n\n.btn:hover {\n background: rgb(2,29,78);\n background: linear-gradient(270deg, rgba(2, 29, 78, 0.681) 0%, rgba(31, 215, 232, 0.873) 60%);\n color: rgb(4, 4, 38);\n}"}]}},"actionData":null,"errors":null}