{"loaderData":{"0":null,"0-2":{"total":7091,"projects":[{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"02728a","snapshot":null,"tags":null,"title":"button by MuhammadHasann","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":100,"cssLen":953,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n cursor: pointer;\n --c: #0ea5e9;\n padding: 12px 28px;\n margin: 1em;\n position: relative;\n min-width: 12em;\n background: transparent;\n font-size: 12px;\n font-weight: bold;\n color: var(--c);\n text-align: center;\n text-transform: uppercase;\n font-family: sans-serif;\n letter-spacing: 0.1em;\n border: 2px solid var(--c);\n border-radius: 8px;\n overflow: hidden;\n z-index: 1;\n transition: 0.5s;\n}\n\n.button span {\n position: absolute;\n width: 25%;\n height: 100%;\n background-color: var(--c);\n transform: translateY(150%);\n border-radius: 50%;\n left: calc((var(--n) - 1) * 25%);\n transition: 0.5s;\n transition-delay: calc((var(--n) - 1) * 0.1s);\n z-index: -1;\n}\n\n.button:hover {\n color: black;\n}\n\n.button:hover span {\n transform: translateY(0) scale(2);\n}\n\n.button span:nth-child(1) {\n --n: 1;\n}\n\n.button span:nth-child(2) {\n --n: 2;\n}\n\n.button span:nth-child(3) {\n --n: 3;\n}\n\n.button span:nth-child(4) {\n --n: 4;\n}\n"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"39c05b","snapshot":null,"tags":null,"title":"button by KSAplay","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":41,"cssLen":767,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n padding: 0.8em 2em 0.8em 2.5em;\n font-size: 15px;\n font-weight: bold;\n border-radius: 15px;\n color: #f6fff6;\n letter-spacing: 0.3em;\n text-shadow: -2px 2px 5px #33fd30;\n background-color: transparent;\n border: 2px solid #bbfeb1;\n box-shadow: 0 0 0px 1px #42f112,\n 0 0 10px 2px #33fd30,\n inset 0 0 0px 1px #42f112,\n inset 0 0 10px 2px #33fd30;\n transition: 100ms;\n}\n\n.btn:hover {\n box-shadow: 0 0 0px 1px #42f112,\n 0 0 10px 2px #33fd30,\n inset 0 0 0px 1px #42f112,\n inset 0 0 30px 2px #33fd30;\n text-shadow: 0 0 10px #33fd30;\n transform: translateY(-5px);\n}\n\n.btn:active {\n box-shadow: 0 0 0px 1px #42f112,\n 0 0 25px 2px #33fd30,\n inset 0 0 0px 1px #42f112,\n inset 0 0 30px 2px #33fd30;\n transform: translateY(1px);\n}"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"cbbde6","snapshot":null,"tags":null,"title":"button by htwarriors108","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":663,"cssLen":1434,"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 position: relative;\n list-style: none;\n width: 60px;\n height: 60px;\n border-radius: 60px;\n cursor: pointer;\n box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1);\n display: flex;\n align-items: center;\n justify-content: center;\n transition: 0.5s;\n border: none;\n}\n\nbutton:active {\n scale: 1.2;\n}\n\nbutton:hover {\n width: 180px;\n box-shadow: 0px 10px 25px rgba(0, 0, 0, 0);\n}\n\nbutton::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: 50px;\n background: linear-gradient(45deg, var(--i), var(--j));\n opacity: 0;\n transition: 0.5s;\n}\n\nbutton:hover::before {\n opacity: 1;\n}\n\nbutton::after {\n content: '';\n position: absolute;\n top: 10px;\n width: 100%;\n height: 100%;\n border-radius: 60px;\n background: linear-gradient(45deg, var(--i), var(--j));\n filter: blur(15px);\n transition: 0.5s;\n z-index: -1;\n opacity: 0;\n}\n\nbutton:hover::after {\n opacity: 0.5;\n}\n\nbutton svg {\n color: #777;\n width: auto;\n height: 30px;\n transition: 0.5s;\n transition-delay: 0.25s;\n}\n\nbutton:hover svg {\n transform: scale(0);\n color: #fff;\n transition-delay: 0s;\n}\n\nbutton span {\n position: absolute;\n}\n\nbutton .title {\n color: #fff;\n font-size: 1.3em;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n transform: scale(0);\n transition: 0.5s;\n transition-delay: 0s;\n font-weight: 600;\n}\n\nbutton:hover .title {\n transform: scale(1);\n transition-delay: 0.25s;\n}"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"381ba3","snapshot":null,"tags":null,"title":"button by ArturCodeCraft","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":69,"cssLen":1484,"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.menu__icon {\n width: 2rem;\n height: 2rem;\n padding: .25rem;\n background-color: rgb(29, 29, 31, .7);\n backdrop-filter: saturate(180%) blur(20px);\n border: solid 1px rgba(66,66,69,0.7);\n position: relative;\n}\n\n.menu__icon span {\n width: 1.5rem;\n height: 1.5rem;\n position: absolute;\n top: calc(.25rem - 1px);\n left: calc(.25rem - 1px);\n transition: transform .1806s cubic-bezier(.04,.04,.12,.96);\n}\n\n.menu__icon span:before {\n content: '';\n width: 1.5rem;\n height: .125rem;\n background-color: #fff;\n position: absolute;\n left: 0;\n transition: transform .1596s cubic-bezier(.52,.16,.52,.84) .1008s;\n}\n\n.menu__icon span:nth-child(1)::before {\n top: .625rem;\n transform: translateY(-3px);\n}\n\n.menu__icon span:nth-child(2)::before {\n bottom: .625rem;\n transform: translateY(3px);\n}\n\n.menu__icon:hover :nth-child(1),\n.menu__icon:hover :nth-child(2) {\n transition: transform .3192s cubic-bezier(.04,.04,.12,.96) .1008s;\n}\n\n.menu__icon:hover :nth-child(1)::before,\n.menu__icon:hover :nth-child(2)::before {\n transform: none;\n transition: transform .1806s cubic-bezier(.04,.04,.12,.96);\n}\n\n.menu__icon:hover :nth-child(1) {\n transform: rotate(45deg) translateY(1px);\n}\n\n.menu__icon:hover :nth-child(2) {\n transform: rotate(-45deg) translateY(-1px);\n}"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"1ea618","snapshot":null,"tags":null,"title":"button by omriluz","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":2799,"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 padding: 10px 22px;\n border-radius: 6px;\n border: none;\n color: #fff;\n cursor: pointer;\n background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);\n transition: all 0.2s ease;\n}\n\n.button:active {\n transform: scale(0.96);\n}\n\n.button:before,\n.button:after {\n position: absolute;\n content: \"\";\n width: 150%;\n left: 50%;\n height: 100%;\n transform: translateX(-50%);\n z-index: -1000;\n background-repeat: no-repeat;\n}\n\n.button:hover:before {\n top: -70%;\n background-image: radial-gradient(circle, #a89215 20%, transparent 20%),\n radial-gradient(circle, transparent 20%, #13a5be 20%, transparent 30%),\n radial-gradient(circle, #a3b82d 20%, transparent 20%),\n radial-gradient(circle, #590cbe 20%, transparent 20%),\n radial-gradient(circle, transparent 10%, #bd1717 15%, transparent 20%),\n radial-gradient(circle, #2a7ce8 20%, transparent 20%),\n radial-gradient(circle, #30e82a 20%, transparent 20%),\n radial-gradient(circle, #e92c75 20%, transparent 20%),\n radial-gradient(circle, #914fe7 20%, transparent 20%);\n background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,\n 10% 10%, 18% 18%;\n background-position: 50% 120%;\n animation: greentopBubbles 0.6s ease;\n}\n\n@keyframes greentopBubbles {\n 0% {\n background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,\n 40% 90%, 55% 90%, 70% 90%;\n }\n\n 50% {\n background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,\n 50% 50%, 65% 20%, 90% 30%;\n }\n\n 100% {\n background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,\n 50% 40%, 65% 10%, 90% 20%;\n background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;\n }\n}\n\n.button:hover::after {\n bottom: -70%;\n background-image: radial-gradient(circle, #ff93db 20%, transparent 20%),\n radial-gradient(circle, #2ae8df 20%, transparent 20%),\n radial-gradient(circle, transparent 10%, #71ffbd 15%, transparent 20%),\n radial-gradient(circle, #2a9ce8 20%, transparent 20%),\n radial-gradient(circle, #7814fc 20%, transparent 20%),\n radial-gradient(circle, #73e4f8 20%, transparent 20%),\n radial-gradient(circle, #f8d3a9 20%, transparent 20%);\n background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;\n background-position: 50% 0%;\n animation: greenbottomBubbles 0.6s ease;\n}\n\n@keyframes greenbottomBubbles {\n 0% {\n background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,\n 70% -10%, 70% 0%;\n }\n\n 50% {\n background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,\n 105% 0%;\n }\n\n 100% {\n background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,\n 110% 10%;\n background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;\n }\n}\n"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"d0143b","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1064,"cssLen":947,"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: rgb(20, 20, 20);\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 background-color: rgba(207, 207, 207, 0.466);\n backdrop-filter: blur(4px);\n}\n"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"539a0f","snapshot":null,"tags":null,"title":"button by seyed-mohsen-mousavi","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":722,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n background: rgba(55, 51, 51, 0.49);\n border-radius: 16px;\n box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n backdrop-filter: blur(3.7px);\n -webkit-backdrop-filter: blur(3.7px);\n outline: none;\n border: none;\n padding: 20px;\n transform: rotate3d(1, 1, 1, 320deg);\n filter: drop-shadow(1px 1px 8px black);\n color: white;\n cursor: pointer;\n transition: ease-in-out 0.5s;\n}\n.button:hover {\n transform: rotate3d(1, 1, 1, 360deg);\n animation: shadow 1s both;\n}\n@keyframes shadow {\n 0% {\n filter: drop-shadow(1px 1px 8px black);\n }\n 25% {\n filter: drop-shadow(1px 1px 5px black);\n }\n 50% {\n filter: drop-shadow(1px 1px 2px black);\n }\n 100% {\n filter: drop-shadow(1px 1px 2px black);\n }\n}\n"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"7f946c","snapshot":null,"tags":null,"title":"button by wang3616359git","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":800,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".bt {\n border: none;\n color: white;\n font-weight: 600;\n font-size: 18px;\n line-height: 40px;\n text-align: center;\n /*background-color: #0985e8;*/\n background-color: rgba(92, 215, 152,0.8);\n height: 40px;\n width: 100px;\n clip-path: polygon(\n 0 0,5% 0,5% 15%,10% 15%,10% 0,100% 0,\n 100% 75%,95% 75%,95% 85%,100% 85%,100% 100%,\n 50% 100%,50% 85%,45% 85%,45% 100%,0 100%,\n 0 65%,5% 65%,5% 50%,0 50%,0 0\n );\n border-top-right-radius: 5px;\n border-right: #aebdb7 2px solid;\n border-bottom: #b0bab1 2px solid;\n transition: all 0.6s ease;\n}\n\n.bt:active {\n transition: all 0.01s ease;\n border-right: #aebdb7 0 solid;\n border-bottom: #b0bab1 0 solid;\n user-select: none;\n transform: translateX(1px) translateY(1px);\n}"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"2762b8","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":24,"cssLen":1183,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n height: 50px;\n margin: 5px;\n width: 120px;\n cursor: pointer;\n background: #f44336;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n font-family: Consolas, Courier New, monospace;\n border: solid #e53935 1px;\n font-size: 16px;\n color: #ffffff;\n -webkit-transition: 500ms;\n transition: 500ms;\n border-radius: 5px;\n background: linear-gradient(145deg, #e53935, #d32f2f);\n -webkit-box-shadow: -1px -5px 15px #c62828, 5px 5px 15px #c62828,\n inset 5px 5px 10px #d32f2f, inset -5px -5px 10px #d32f2f;\n box-shadow: -1px -5px 15px #c62828, 5px 5px 15px #c62828,\n inset 5px 5px 10px #d32f2f, inset -5px -5px 10px #d32f2f;\n}\n\nbutton:hover {\n -webkit-box-shadow: 1px 1px 13px #b71c1c, -1px -1px 13px #e53935;\n box-shadow: 1px 1px 13px #b71c1c, -1px -1px 13px #e53935;\n color: #d6d6d6;\n -webkit-transition: 500ms;\n transition: 500ms;\n}\n\nbutton:active {\n -webkit-box-shadow: 1px 1px 13px #b71c1c, -1px -1px 33px #e53935;\n box-shadow: 1px 1px 13px #b71c1c, -1px -1px 33px #e53935;\n color: #d6d6d6;\n -webkit-transition: 100ms;\n transition: 100ms;\n}\n"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"df2bdb","snapshot":null,"tags":null,"title":"button by KhaledMatalkah","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":1094,"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: 15px 32px;\n font-size: 17px;\n font-weight: bold;\n color: rgb(0, 0, 0);\n background-color: rgb(255, 255, 255);\n border: none;\n border-radius: 50px;\n text-align: center;\n text-decoration: none;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n z-index: 1;\n}\n\n.button:before,\n.button:after {\n content: \"\";\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n border-radius: 50px;\n opacity: 0.3;\n pointer-events: none;\n transition: all 0.3s ease-in-out;\n}\n\n.button:before {\n left: -100%;\n background: linear-gradient(90deg, rgba(0, 136, 255, 0.8), rgba(255, 0, 170, 0.8), rgba(0, 136, 255, 0.8));\n z-index: -1;\n}\n\n.button:hover:before {\n left: 0;\n}\n\n.button:after {\n right: -100%;\n background: linear-gradient(270deg, rgba(0, 136, 255, 0.8), rgba(255, 0, 170, 0.8), rgba(0, 136, 255, 0.8));\n z-index: -1;\n}\n\n.button:hover:after {\n right: 0;\n}\n\n.button:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n\n.button:active {\n transform: translateY(1px);\n box-shadow: none;\n}\n"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"dd1fb7","snapshot":null,"tags":null,"title":"button by boryanakrasteva","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":62,"cssLen":597,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".mouse {\n width: 25px;\n height: 40px;\n border: 1px solid rgb(196, 196, 196);\n background-color: transparent;\n border-radius: 13px;\n border-bottom-left-radius: 20px;\n border-bottom-right-radius: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n}\n\n.scroll {\n width: 3px;\n height: 10px;\n background-color: rgb(196, 196, 196);\n border-radius: 2px;\n position: absolute;\n bottom: 9px;\n animation: move_918 1.5s linear infinite;\n}\n\n@keyframes move_918 {\n 0% {\n bottom: 9px;\n }\n\n 50% {\n bottom: 5px;\n }\n\n 100% {\n bottom: 9px;\n }\n}"},{"created":"2024-01-22T17:00:06.000Z","isPrivate":0,"projectId":"ad9445","snapshot":null,"tags":null,"title":"button by gharsh11032000","updated":"2024-01-22T17:00:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":346,"cssLen":1192,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".cssbuttons-io-button {\n background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);\n color: white;\n font-family: inherit;\n padding: 0.35em;\n padding-left: 1.2em;\n font-size: 17px;\n border-radius: 10em;\n border: none;\n letter-spacing: 0.05em;\n display: flex;\n align-items: center;\n overflow: hidden;\n position: relative;\n height: 2.8em;\n padding-right: 3.3em;\n cursor: pointer;\n text-transform: uppercase;\n font-weight: 500;\n box-shadow: 0 0 1.6em rgba(183, 33, 255,0.3),0 0 1.6em hsla(191, 98%, 56%, 0.3);\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.cssbuttons-io-button .icon {\n background: white;\n margin-left: 1em;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 2.2em;\n width: 2.2em;\n border-radius: 10em;\n right: 0.3em;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.cssbuttons-io-button:hover .icon {\n width: calc(100% - 0.6em);\n}\n\n.cssbuttons-io-button .icon svg {\n width: 1.1em;\n transition: transform 0.3s;\n color: #B721FF;\n}\n\n.cssbuttons-io-button:hover .icon svg {\n transform: translateX(0.1em);\n}\n\n.cssbuttons-io-button:active .icon {\n transform: scale(0.9);\n}\n"}]}},"actionData":null,"errors":null}