{"loaderData":{"0":null,"0-3":{"total":7405,"projects":[{"created":"2024-01-22T16:59:48.000Z","isPrivate":0,"projectId":"aa3b79","snapshot":null,"tags":null,"title":"button by levxyca","updated":"2024-01-22T16:59:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":342,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n font-family: monospace;\n font-size: 1.5rem;\n color: #FAFAFA;\n text-transform: uppercase;\n padding: 10px 20px;\n border-radius: 10px;\n border: 2px solid #FAFAFA;\n background: #252525;\n box-shadow: 3px 3px #fafafa;\n cursor: pointer;\n margin: 35px 0;\n}\n\nbutton:active {\n box-shadow: none;\n transform: translate(3px, 3px);\n}"},{"created":"2024-01-22T16:59:48.000Z","isPrivate":0,"projectId":"f7c008","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T16:59:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":272,"cssLen":608,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".cssbuttons-io-button {\n display: flex;\n align-items: center;\n font-family: inherit;\n font-weight: 500;\n font-size: 16px;\n padding: 0.7em 1.4em 0.7em 1.1em;\n color: white;\n background: #ad5389;\n background: linear-gradient(0deg, rgba(20,167,62,1) 0%, rgba(102,247,113,1) 100%);\n border: none;\n box-shadow: 0 0.7em 1.5em -0.5em #14a73e98;\n letter-spacing: 0.05em;\n border-radius: 20em;\n}\n\n.cssbuttons-io-button svg {\n margin-right: 6px;\n}\n\n.cssbuttons-io-button:hover {\n box-shadow: 0 0.5em 1.5em -0.5em #14a73e98;\n}\n\n.cssbuttons-io-button:active {\n box-shadow: 0 0.3em 1em -0.5em #14a73e98;\n}"},{"created":"2024-01-22T16:59:48.000Z","isPrivate":0,"projectId":"ccf600","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T16:59:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":716,"cssLen":686,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n color: white;\n background-color: #222;\n font-weight: 500;\n border-radius: 0.5rem;\n font-size: 1rem;\n line-height: 2rem;\n padding-left: 2rem;\n padding-right: 2rem;\n padding-top: 0.7rem;\n padding-bottom: 0.7rem;\n cursor: pointer;\n text-align: center;\n margin-right: 0.5rem;\n display: inline-flex;\n align-items: center;\n border: none;\n}\n\n.button:hover {\n background-color: #333;\n}\n\n.button svg {\n display: inline;\n width: 1.3rem;\n height: 1.3rem;\n margin-right: 0.75rem;\n color: white;\n}\n\n.button:focus svg {\n animation: spin_357 0.5s linear;\n}\n\n@keyframes spin_357 {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n"},{"created":"2024-01-22T16:59:48.000Z","isPrivate":0,"projectId":"722cbb","snapshot":null,"tags":null,"title":"button by akshat-patel28","updated":"2024-01-22T16:59:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1958,"cssLen":649,"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

","css":".button-container {\n display: flex;\n background-color: rgba(245, 73, 144);\n width: 250px;\n height: 40px;\n align-items: center;\n justify-content: space-around;\n border-radius: 10px;\n box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px,\n rgba(245, 73, 144, 0.5) 5px 10px 15px;\n}\n\n.button {\n outline: 0 !important;\n border: 0 !important;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background-color: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n transition: all ease-in-out 0.3s;\n cursor: pointer;\n}\n\n.button:hover {\n transform: translateY(-3px);\n}\n\n.icon {\n font-size: 20px;\n}"},{"created":"2024-01-22T16:59:48.000Z","isPrivate":0,"projectId":"5f51ce","snapshot":null,"tags":null,"title":"button by Mhyar-nsi","updated":"2024-01-22T16:59:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":270,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n font-family: monospace;\n background-color: #f3f7fe;\n color: #3b82f6;\n border: none;\n border-radius: 8px;\n width: 100px;\n height: 45px;\n transition: .3s;\n}\n\nbutton:hover {\n background-color: #3b82f6;\n box-shadow: 0 0 0 5px #3b83f65f;\n color: #fff;\n}\n"},{"created":"2024-01-22T16:59:48.000Z","isPrivate":0,"projectId":"4c8ce6","snapshot":null,"tags":null,"title":"button by cssbuttons-io","updated":"2024-01-22T16:59:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":1073,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n appearance: button;\n background-color: #1899D6;\n border: solid transparent;\n border-radius: 16px;\n border-width: 0 0 4px;\n box-sizing: border-box;\n color: #FFFFFF;\n cursor: pointer;\n display: inline-block;\n font-size: 15px;\n font-weight: 700;\n letter-spacing: .8px;\n line-height: 20px;\n margin: 0;\n outline: none;\n overflow: visible;\n padding: 13px 19px;\n text-align: center;\n text-transform: uppercase;\n touch-action: manipulation;\n transform: translateZ(0);\n transition: filter .2s;\n user-select: none;\n -webkit-user-select: none;\n vertical-align: middle;\n white-space: nowrap;\n}\n\nbutton:after {\n background-clip: padding-box;\n background-color: #1CB0F6;\n border: solid transparent;\n border-radius: 16px;\n border-width: 0 0 4px;\n bottom: -4px;\n content: \"\";\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1;\n}\n\nbutton:main, button:focus {\n user-select: auto;\n}\n\nbutton:hover:not(:disabled) {\n filter: brightness(1.1);\n}\n\nbutton:disabled {\n cursor: auto;\n}\n\nbutton:active:after {\n border-width: 0 0 0px;\n}\n\nbutton:active {\n padding-bottom: 10px;\n}"},{"created":"2024-01-22T16:59:48.000Z","isPrivate":0,"projectId":"29b1f9","snapshot":null,"tags":null,"title":"button by namecho","updated":"2024-01-22T16:59:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":1716,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button,\nbutton::after {\n padding: 16px 20px;\n font-size: 18px;\n background: linear-gradient(45deg, transparent 5%, #ff013c 5%);\n border: 0;\n color: #fff;\n letter-spacing: 3px;\n line-height: 1;\n box-shadow: 6px 0px 0px #00e6f6;\n outline: transparent;\n position: relative;\n}\n\nbutton::after {\n --slice-0: inset(50% 50% 50% 50%);\n --slice-1: inset(80% -6px 0 0);\n --slice-2: inset(50% -6px 30% 0);\n --slice-3: inset(10% -6px 85% 0);\n --slice-4: inset(40% -6px 43% 0);\n --slice-5: inset(80% -6px 5% 0);\n content: \"HOVER ME\";\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(45deg, transparent 3%, #00e6f6 3%, #00e6f6 5%, #ff013c 5%);\n text-shadow: -3px -3px 0px #f8f005, 3px 3px 0px #00e6f6;\n clip-path: var(--slice-0);\n}\n\nbutton:hover::after {\n animation: 1s glitch;\n animation-timing-function: steps(2, end);\n}\n\n@keyframes glitch {\n 0% {\n clip-path: var(--slice-1);\n transform: translate(-20px, -10px);\n }\n\n 10% {\n clip-path: var(--slice-3);\n transform: translate(10px, 10px);\n }\n\n 20% {\n clip-path: var(--slice-1);\n transform: translate(-10px, 10px);\n }\n\n 30% {\n clip-path: var(--slice-3);\n transform: translate(0px, 5px);\n }\n\n 40% {\n clip-path: var(--slice-2);\n transform: translate(-5px, 0px);\n }\n\n 50% {\n clip-path: var(--slice-3);\n transform: translate(5px, 0px);\n }\n\n 60% {\n clip-path: var(--slice-4);\n transform: translate(5px, 10px);\n }\n\n 70% {\n clip-path: var(--slice-2);\n transform: translate(-10px, 10px);\n }\n\n 80% {\n clip-path: var(--slice-5);\n transform: translate(20px, -10px);\n }\n\n 90% {\n clip-path: var(--slice-1);\n transform: translate(-10px, 0px);\n }\n\n 100% {\n clip-path: var(--slice-1);\n transform: translate(0);\n }\n}\n"},{"created":"2024-01-22T16:59:47.000Z","isPrivate":0,"projectId":"7bd6c4","snapshot":null,"tags":null,"title":"button by mrhyddenn","updated":"2024-01-22T16:59:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":570,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background: #fff;\n border: none;\n padding: 10px 20px;\n display: inline-block;\n font-size: 15px;\n font-weight: 600;\n width: 120px;\n text-transform: uppercase;\n cursor: pointer;\n transform: skew(-21deg);\n}\n\nspan {\n display: inline-block;\n transform: skew(21deg);\n}\n\nbutton::before {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n right: 100%;\n left: 0;\n background: rgb(20, 20, 20);\n opacity: 0;\n z-index: -1;\n transition: all 0.5s;\n}\n\nbutton:hover {\n color: #fff;\n}\n\nbutton:hover::before {\n left: 0;\n right: 0;\n opacity: 1;\n}"},{"created":"2024-01-22T16:59:47.000Z","isPrivate":0,"projectId":"d430fb","snapshot":null,"tags":null,"title":"button by gharsh11032000","updated":"2024-01-22T16:59:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":606,"cssLen":1555,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".animated-button {\n position: relative;\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 16px 36px;\n border: 4px solid;\n border-color: transparent;\n font-size: 16px;\n background-color: inherit;\n border-radius: 100px;\n font-weight: 600;\n color: greenyellow;\n box-shadow: 0 0 0 2px greenyellow;\n cursor: pointer;\n overflow: hidden;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.animated-button svg {\n position: absolute;\n width: 24px;\n fill: greenyellow;\n z-index: 9;\n transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.animated-button .arr-1 {\n right: 16px;\n}\n\n.animated-button .arr-2 {\n left: -25%;\n}\n\n.animated-button .circle {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 20px;\n height: 20px;\n background-color: greenyellow;\n border-radius: 50%;\n opacity: 0;\n transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.animated-button .text {\n position: relative;\n z-index: 1;\n transform: translateX(-12px);\n transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.animated-button:hover {\n box-shadow: 0 0 0 12px transparent;\n color: #212121;\n border-radius: 12px;\n}\n\n.animated-button:hover .arr-1 {\n right: -25%;\n}\n\n.animated-button:hover .arr-2 {\n left: 16px;\n}\n\n.animated-button:hover .text {\n transform: translateX(12px);\n}\n\n.animated-button:hover svg {\n fill: #212121;\n}\n\n.animated-button:active {\n scale: 0.95;\n box-shadow: 0 0 0 4px greenyellow;\n}\n\n.animated-button:hover .circle {\n width: 220px;\n height: 220px;\n opacity: 1;\n}\n"},{"created":"2024-01-22T16:59:47.000Z","isPrivate":0,"projectId":"caae8a","snapshot":null,"tags":null,"title":"button by barisdogansutcu","updated":"2024-01-22T16:59:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2882,"cssLen":981,"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 padding: 0 10px;\n color: white;\n text-shadow: 2px 2px rgb(116, 116, 116);\n text-transform: uppercase;\n cursor: pointer;\n border: solid 2px black;\n letter-spacing: 1px;\n font-weight: 600;\n font-size: 17px;\n background-color: hsl(49deg 98% 60%);\n border-radius: 50px;\n position: relative;\n overflow: hidden;\n transition: all 0.5s ease;\n}\n\nbutton:active {\n transform: scale(0.9);\n transition: all 100ms ease;\n}\n\nbutton svg {\n transition: all 0.5s ease;\n z-index: 2;\n}\n\n.play {\n transition: all 0.5s ease;\n transition-delay: 300ms;\n}\n\nbutton:hover svg {\n transform: scale(3) translate(50%);\n}\n\n.now {\n position: absolute;\n left: 0;\n transform: translateX(-100%);\n transition: all 0.5s ease;\n z-index: 2;\n}\n\nbutton:hover .now {\n transform: translateX(10px);\n transition-delay: 300ms;\n}\n\nbutton:hover .play {\n transform: translateX(200%);\n transition-delay: 300ms;\n}\n"},{"created":"2024-01-22T16:59:47.000Z","isPrivate":0,"projectId":"4d777a","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T16:59:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":738,"cssLen":752,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" \n\n","css":".Btn {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: 100px;\n height: 40px;\n border: none;\n padding: 0px 20px;\n background-color: rgb(168, 38, 255);\n color: white;\n font-weight: 500;\n cursor: pointer;\n border-radius: 10px;\n box-shadow: 5px 5px 0px rgb(140, 32, 212);\n transition-duration: .3s;\n}\n\n.svg {\n width: 13px;\n position: absolute;\n right: 0;\n margin-right: 20px;\n fill: white;\n transition-duration: .3s;\n}\n\n.Btn:hover {\n color: transparent;\n}\n\n.Btn:hover svg {\n right: 43%;\n margin: 0;\n padding: 0;\n border: none;\n transition-duration: .3s;\n}\n\n.Btn:active {\n transform: translate(3px , 3px);\n transition-duration: .3s;\n box-shadow: 2px 2px 0px rgb(140, 32, 212);\n}"},{"created":"2024-01-22T16:59:47.000Z","isPrivate":0,"projectId":"a3b0c9","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T16:59:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1481,"cssLen":936,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","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 .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 .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: #181818;\n z-index: -1;\n border-radius: 10px;\n pointer-events: none;\n transition: all .3s;\n}\n\n.Btn:hover .BG {\n transform: rotate(35deg);\n transform-origin: bottom;\n}\n\n.Btn:hover .svgContainer {\n background-color: rgba(156, 156, 156, 0.466);\n backdrop-filter: blur(4px);\n}\n"}]}},"actionData":null,"errors":null}