{"loaderData":{"0":null,"0-3":{"total":7544,"projects":[{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"b03ee8","snapshot":null,"tags":null,"title":"button by Df12345677","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":705,"cssLen":736,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n height: 60px;\n width: 200px;\n background-color: #132233;\n border: 2px solid rgb(182, 128, 128);\n color: #eee;\n transition: .6s;\n font-size: 15px;\n border-radius: 50px;\n display: flex;\n justify-content: center;\n align-items: center;\n /* padding: 20px; */\n overflow: hidden;\n}\n\n.button span {\n transform: translateX(10px);\n transition: .5s;\n}\n\n.button svg {\n transform: translateX(-300px);\n transition: .6s;\n z-index: 3;\n height: 20px;\n}\n\n.button:hover {\n width: 60px;\n background-color: rgba(51, 34, 51, 0.815);\n box-shadow: 20px 20px 96px #bebebe,-20px -20px 96px #ffffff;\n}\n\n.button:hover svg {\n transform: translateX(-5px);\n}\n\n.button:hover span {\n transform: translateY(70px);\n font-size: .1rem;\n}"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"3bfcde","snapshot":null,"tags":null,"title":"button by ArturCodeCraft","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":44,"cssLen":640,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"Hover me!","css":"/* ============================ */\na {\n text-decoration: none;\n}\n/* ============================ */\n.menu__link {\n color: #fff;\n line-height: 2;\n position: relative;\n padding-right: 4px;\n}\n\n.menu__link:hover {\n text-decoration: underline;\n}\n\n.menu__link::before {\n content: '';\n width: 6px;\n height: 6px;\n border-top: solid 2px #fff;\n border-right: solid 2px #fff;\n border-radius: 2px;\n position: absolute;\n top: 50%;\n left: 100%;\n transform: translateY(-50%) rotate(45deg);\n transition: transform .4s;\n}\n\n.menu__link:hover::before {\n transform: translateX(4px) translateY(-50%) rotate(45deg);\n}"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"1ace8a","snapshot":null,"tags":null,"title":"button by MrD4rio","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1451,"cssLen":1104,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n font-family: inherit;\n font-size: 18px;\n background: linear-gradient(to bottom, #4f4dd9 0%,#2b60aa 100%);\n color: white;\n padding: 0.8em 1.2em;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: 25px;\n box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);\n transition: all 0.3s;\n}\n\nbutton:hover {\n transform: translateY(-3px);\n box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);\n}\n\nbutton:active {\n transform: scale(0.95);\n box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);\n}\n\nbutton span {\n display: block;\n margin-left: 0.4em;\n transition: all 0.3s;\n}\n\nbutton svg {\n width: 18px;\n height: 18px;\n fill: white;\n transition: all 0.3s;\n}\n\nbutton .svg-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n background-color: rgba(255, 255, 255, 0.2);\n margin-right: 0.5em;\n transition: all 0.3s;\n}\n\nbutton:hover .svg-wrapper {\n background-color: rgba(255, 255, 255, 0.5);\n}\n\nbutton:hover svg {\n transform: rotate(360deg);\n}\n\n/* credits to uiverse.io/profile/eirikvold */"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"d3126d","snapshot":null,"tags":null,"title":"button by AyuuLima","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":1044,"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 width: 120px;\n height: 40px;\n background-color: rgb(0, 0, 0);\n display: flex;\n align-items: center;\n color: rgb(255, 255, 255);\n flex-direction: column;\n justify-content: center;\n border: none;\n padding: 20px;\n gap: 120px;\n border-radius: 10px;\n cursor: pointer;\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n inset: 0;\n left: 3px;\n top: -4px;\n margin: auto;\n width: -128px;\n height: -48px;\n border-radius: 10px;\n background: linear-gradient(-45deg, #10d32a 0%, rgb(119, 235, 235) 100%);\n z-index: -10;\n pointer-events: visiblePainted;\n transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.button::after {\n content: \"\";\n z-index: -1;\n position: absolute;\n inset: 0;\n background: linear-gradient(-45deg, #00ff22 0%, rgb(0, 250, 250) 100%);\n transform: translate3d(0, 0, 0) scale(0.95);\n filter: blur(15px);\n}\n\n.button:hover::after {\n filter: blur(40px);\n}\n\n.button:hover::before {\n transform: rotate(-180deg);\n}\n\n.button:active::before {\n scale: 0.7;\n}\n"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"37e423","snapshot":null,"tags":null,"title":"button by Tsiangana","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":105,"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 width: 140px;\n height: 45px;\n border-radius: 30em;\n position: relative;\n overflow: hidden;\n color: #fff;\n font-family: Roboto, sans-serif;\n font-weight: 600;\n font-size: 15px;\n line-height: 1;\n cursor: pointer;\n z-index: 1;\n background: #ff135a;\n border: 3px solid #fff;\n box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;\n transition: 0.6s ease-in;\n}\n\n.button:hover {\n background: #fff;\n}\n\n.button .two {\n display: none;\n}\n\n.button::before {\n content: \"\";\n width: 0;\n height: 50px;\n border-radius: 30em;\n position: absolute;\n top: 0;\n left: 0;\n background-image: linear-gradient(to right, #0fd850 0%, #f9f047 100%);\n transition: 0.5s ease;\n display: block;\n z-index: -1;\n}\n\n.button:hover::before {\n width: 140px;\n transition: 3s linear;\n}\n\n.button:hover .one {\n display: none;\n}\n\n.button:hover .two {\n display: inline;\n}\n"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"0ab866","snapshot":null,"tags":null,"title":"button by Dear31","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":719,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n padding: 12px 32px;\n border-radius: 10px;\n border: 3px black solid;\n box-shadow: 2px 2px 1px;\n font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;\n font-weight: 700;\n font-size: 17px;\n background-color: #01aaba68;\n overflow: hidden;\n position: relative;\n z-index: 10;\n}\n\nbutton::after {\n content: \"\";\n position: absolute;\n background-color: #199fab;\n width: 0px;\n height: 0px;\n border-radius: 50%;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n transition: all .3s ease-in;\n z-index: -1;\n}\n\nbutton:hover::after {\n transform-origin: center;\n transition: all .3s ease-in;\n width: 200px;\n height: 200px;\n}\n"},{"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"}]}},"actionData":null,"errors":null}