{"loaderData":{"0":null,"0-2":{"total":7072,"projects":[{"created":"2024-01-22T17:00:28.000Z","isPrivate":0,"projectId":"d121c6","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":803,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n font-size: 18px;\n letter-spacing: 2px;\n text-transform: uppercase;\n display: inline-block;\n text-align: center;\n font-weight: bold;\n padding: 0.7em 2em;\n border: 3px solid #14dd50;\n border-radius: 2px;\n position: relative;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);\n color: #14dd50;\n text-decoration: none;\n transition: 0.3s ease all;\n z-index: 1;\n}\n\nbutton:before {\n transition: 0.5s all ease;\n position: absolute;\n top: 0;\n left: 50%;\n right: 50%;\n bottom: 0;\n opacity: 0;\n content: '';\n background-color: #14dd50;\n z-index: -1;\n}\n\nbutton:hover, button:focus {\n color: white;\n}\n\nbutton:hover:before, button:focus:before {\n transition: 0.5s all ease;\n left: 0;\n right: 0;\n opacity: 1;\n}\n\nbutton:active {\n transform: scale(0.9);\n}"},{"created":"2024-01-22T17:00:27.000Z","isPrivate":0,"projectId":"a9bc9e","snapshot":null,"tags":null,"title":"button by MuhammadHasann","updated":"2024-01-22T17:00:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":80,"cssLen":1790,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n","css":".button-cont {\n position: relative;\n width: fit-content;\n height: fit-content;\n border-radius: 9999px;\n}\n\n.button-cont::before {\n content: \"\";\n position: absolute;\n top: 0%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0;\n height: 0;\n background: #06b5d4;\n border-radius: 50%;\n filter: blur(30px);\n opacity: 0.8;\n transition: all 0.6s cubic-bezier(1, 0, 0, 1);\n}\n\n.button-cont:hover::before {\n width: 100%;\n height: 25px;\n}\n\n.button {\n cursor: pointer;\n position: relative;\n padding: 20px 48px;\n background-color: #083344;\n font-size: 16px;\n color: #fefefe;\n font-weight: 500;\n border: none;\n border-radius: 9999px;\n backdrop-filter: blur(4px);\n box-shadow: inset 0px 1px 1px #67e8f9;\n transition: all 0.3s ease-in-out, box-shadow 0.1s ease-in-out;\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 50%;\n transform: translate(-50%, 0%);\n width: 0;\n height: 0;\n border-radius: 50%;\n box-shadow: 0px 0px 25px 3px #67e8f97e;\n transition: all 0.5s cubic-bezier(1, 0, 0, 1);\n}\n\n.button::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 50%;\n transform: translate(-50%, 0%);\n width: 0;\n height: 0;\n background-image: linear-gradient(\n to right,\n #06b5d400,\n #4ec4db00,\n #72d0e200,\n #90ddea3d,\n #ace9f277,\n #ace9f2,\n #ace9f2,\n #ace9f277,\n #90ddea3d,\n #72d0e200,\n #4ec3db00,\n #06b6d400\n );\n border-radius: 0 0 50% 50%;\n opacity: 0.8;\n filter: drop-shadow(0px 0px 30px #06b6d4);\n transition: all 0.5s cubic-bezier(1, 0, 0, 1);\n}\n\n.button-cont:hover .button {\n background: #18181898;\n box-shadow: inset 0px 0px 0px #fefefe;\n}\n\n.button-cont:hover .button::before {\n width: 30%;\n height: 2px;\n}\n\n.button-cont:hover .button::after {\n width: 100%;\n height: 2px;\n}\n"},{"created":"2024-01-22T17:00:27.000Z","isPrivate":0,"projectId":"959f55","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":832,"cssLen":1136,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n --main-focus: #2d8cf0;\n --font-color: #dedede;\n --bg-color-sub: #222;\n --bg-color: #323232;\n --main-color: #dedede;\n position: relative;\n width: 150px;\n height: 40px;\n cursor: pointer;\n display: flex;\n align-items: center;\n border: 2px solid var(--main-color);\n box-shadow: 4px 4px var(--main-color);\n background-color: var(--bg-color);\n border-radius: 10px;\n overflow: hidden;\n}\n\n.button, .button__icon, .button__text {\n transition: all 0.3s;\n}\n\n.button .button__text {\n transform: translateX(21px);\n color: var(--font-color);\n font-weight: 600;\n}\n\n.button .button__icon {\n position: absolute;\n transform: translateX(109px);\n height: 100%;\n width: 39px;\n background-color: var(--bg-color-sub);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.button .svg {\n width: 20px;\n fill: var(--main-color);\n}\n\n.button:hover {\n background: var(--bg-color);\n}\n\n.button:hover .button__text {\n color: transparent;\n}\n\n.button:hover .button__icon {\n width: 148px;\n transform: translateX(0);\n}\n\n.button:active {\n transform: translate(3px, 3px);\n box-shadow: 0px 0px var(--main-color);\n}"},{"created":"2024-01-22T17:00:27.000Z","isPrivate":0,"projectId":"9ebee1","snapshot":null,"tags":null,"title":"button by omriluz","updated":"2024-01-22T17:00:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":748,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","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 0.4s;\n}\n\n.btn:hover {\n border-radius: 5px;\n transform: translateY(-10px);\n box-shadow: 0 -7px 0 -2px #f85959, 0 -15px 0 -4px #39a2db,\n 0 -16px 10px -3px #39a2db, 0 7px 0 -2px #f85959, 0 15px 0 -4px #39a2db,\n 0 16px 10px -3px #39a2db, 8px 0px 0 -2px #f85959, 15px 0px 0 -4px #39a2db,\n 16px 0px 10px -3px #39a2db, -8px 0px 0 -2px #f85959,\n -15px 0px 0 -4px #39a2db, -16px 0px 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, 0 8px 0 -4px #39a2db,\n 0 12px 10px -3px #39a2db;\n}\n"},{"created":"2024-01-22T17:00:27.000Z","isPrivate":0,"projectId":"e0f2b0","snapshot":null,"tags":null,"title":"button by Javierrocadev","updated":"2024-01-22T17:00:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":949,"cssLen":2195,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n Hover me!\n \n \n \n Explore!\n\n","css":".absolute{position:absolute}.relative{position:relative}.-left-2{left:-0.5rem}.-top-8{top:-2rem}.left-6{left:1.5rem}.top-2{top:0.5rem}.top-2\\.5{top:0.625rem}.z-10{z-index:10}.h-12{height:3rem}.h-32{height:8rem}.w-32{width:8rem}.w-36{width:9rem}.origin-bottom{transform-origin:bottom}.scale-x-0{--tw-scale-x:0;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:9999px}.rounded-md{border-radius:0.375rem}.border-none{border-style:none}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}.bg-green-200{--tw-bg-opacity:1;background-color:rgb(187 247 208 / var(--tw-bg-opacity))}.bg-green-400{--tw-bg-opacity:1;background-color:rgb(74 222 128 / var(--tw-bg-opacity))}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(22 163 74 / var(--tw-bg-opacity))}.p-2{padding:0.5rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.opacity-0{opacity:0}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-100{transition-duration:100ms}.duration-1000{transition-duration:1000ms}.duration-500{transition-duration:500ms}.duration-700{transition-duration:700ms}.group:hover .group-hover\\:scale-x-100{--tw-scale-x:1;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:opacity-100{opacity:1}.group:hover .group-hover\\:duration-1000{transition-duration:1000ms}.group:hover .group-hover\\:duration-500{transition-duration:500ms}.group:hover .group-hover\\:duration-700{transition-duration:700ms}"},{"created":"2024-01-22T17:00:27.000Z","isPrivate":0,"projectId":"19321c","snapshot":null,"tags":null,"title":"button by KhaledMatalkah","updated":"2024-01-22T17:00:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":45,"cssLen":816,"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: transparent;\n border-radius: 50px;\n text-align: center;\n text-decoration: none;\n cursor: pointer;\n position: relative;\n border: none;\n z-index: 1;\n}\n\n.button {\n overflow: hidden;\n}\n\n.button:before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: -100%;\n width: 100%;\n height: 100%;\n background-color: rgb(255, 255, 255);\n transition: left 0.8s ease-in-out;\n z-index: -1;\n}\n\n.button:hover:before {\n left: 0%;\n}\n\n.button:after {\n content: \"\";\n position: absolute;\n bottom: 50%;\n right: -100%;\n width: 100%;\n height: 100%;\n background-color: rgb(255, 255, 255);\n transition: right 0.8s ease-in-out;\n z-index: -1;\n}\n\n.button:hover:after {\n right: 0%;\n}"},{"created":"2024-01-22T17:00:27.000Z","isPrivate":0,"projectId":"b5bf9a","snapshot":null,"tags":null,"title":"button by ozgeozkaraa01","updated":"2024-01-22T17:00:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":1031,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n border: none;\n padding: 0.8em 2.5em;\n outline: none;\n color: white;\n font-style: 1.2em;\n position: relative;\n z-index: 1;\n cursor: pointer;\n background: none;\n text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.45);\n}\n\nbutton::before,\nbutton::after {\n position: absolute;\n top: 50%;\n left: 50%;\n border-radius: 10em;\n -webkit-transform: translateX(-50%) translateY(-50%);\n transform: translateX(-50%) translateY(-50%);\n width: 105%;\n height: 105%;\n content: \"\";\n z-index: -2;\n background-size: 400% 400%;\n background: linear-gradient(\n 100deg,\n #f79533,\n #f37055,\n #ef4e7b,\n #a166ab,\n #5073b8,\n #1098ad,\n #07b39b,\n #6fba82\n );\n}\n\nbutton::before {\n -webkit-filter: blur(7px);\n filter: blur(7px);\n -webkit-transition: all 0.25s ease;\n transition: all 0.25s ease;\n -webkit-animation: pulse 10s infinite ease;\n animation: pulse 10s infinite ease;\n}\n\nbutton::after {\n -webkit-filter: blur(0.3px);\n filter: blur(0.3px);\n}\n\nbutton:hover::before {\n width: 115%;\n height: 115%;\n}"},{"created":"2024-01-22T17:00:27.000Z","isPrivate":0,"projectId":"cfb283","snapshot":null,"tags":null,"title":"button by ashish-yadv","updated":"2024-01-22T17:00:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":939,"cssLen":745,"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) rotate(360deg);\n fill: #333333;\n}\n\n"},{"created":"2024-01-22T17:00:27.000Z","isPrivate":0,"projectId":"e8feab","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":811,"cssLen":987,"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: #24a1de;\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 border: 1px solid rgba(226, 226, 226, 0.466);\n background-color: rgba(204, 204, 204, 0.466);\n backdrop-filter: blur(4px);\n}\n"},{"created":"2024-01-22T17:00:27.000Z","isPrivate":0,"projectId":"2d8794","snapshot":null,"tags":null,"title":"button by ArturCodeCraft","updated":"2024-01-22T17:00:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":48,"cssLen":519,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n Hover me!\n","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}"},{"created":"2024-01-22T17:00:27.000Z","isPrivate":0,"projectId":"0c0cb0","snapshot":null,"tags":null,"title":"button by tarantino421","updated":"2024-01-22T17:00:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3044,"cssLen":1560,"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 \n

","css":".box {\n --clr-shadow__border: #A8DF8E;\n --clr-text: #F6F4EB;\n --clr-code-line: #43ff85;\n --clr-matrix: #020204;\n --size: 3rem;\n position: relative;\n outline: 1px solid var(--clr-shadow__border);\n}\n\n.button {\n font-weight: 600;\n font-size: 1.5rem;\n letter-spacing: 0.2rem;\n color: var(--clr-text);\n padding: calc(var(--size) / 3) var(--size);\n background: transparent;\n border: none;\n cursor: pointer;\n text-shadow: 2px 0px var(--clr-shadow__border), 0px 2px var(--clr-shadow__border),\n -2px 0px var(--clr-shadow__border), 0px -2px var(--clr-shadow__border);\n}\n\n.matrix {\n width: 100%;\n height: 100%;\n bottom: 0%;\n transition: 0.5s ease-in-out;\n z-index: -1;\n opacity: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n position: absolute;\n background: var(--clr-matrix);\n}\n\n.box:hover .matrix {\n opacity: 1;\n}\n\n.code-line {\n position: relative;\n display: flex;\n flex-direction: column-reverse;\n transition: 0.5s;\n min-height: 0.6rem;\n min-width: 0.6rem;\n animation: matrix-animation calc(.2s * var(--i)) linear infinite;\n}\n\n.code {\n text-shadow: 20px 100px var(--clr-code-line),-20px -50px var(--clr-code-line);\n font-size: 0.8rem;\n font-weight: 400;\n color: var(--clr-code-line);\n opacity: 0.5;\n}\n\n.code:first-child {\n color: var(--clr-text);\n opacity: 1;\n}\n\n@keyframes matrix-animation {\n 0% {\n transform: translateY(calc(-50% * var(--i)));\n }\n\n 100% {\n -webkit-transform: translateY(calc(50% * var(--i)));\n transform: translateY(calc(50% * var(--i)));\n }\n}\n\n\n\n\n\n\n\n"},{"created":"2024-01-22T17:00:27.000Z","isPrivate":0,"projectId":"1ffd74","snapshot":null,"tags":null,"title":"button by boryanakrasteva","updated":"2024-01-22T17:00:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":72,"cssLen":743,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".btn-wrapper {\n width: 120px;\n height: 50px;\n position: relative;\n z-index: 1;\n background: linear-gradient(270deg, #96f061, #a259d3, #1d9de0, #e790b0);\n box-shadow: 2px 2px 10px rgba(255, 255, 255, 0.363);\n background-size: 800% 800%;\n animation: animateBorder 9s ease infinite;\n}\n\n.btn {\n width: 95%;\n height: 90%;\n position: absolute;\n padding: 5px;\n border: none;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #212121;\n z-index: 2;\n text-transform: uppercase;\n letter-spacing: 4.5px;\n color: white;\n font-weight: bold;\n}\n\n@keyframes animateBorder {\n 0% {\n background-position: 0% 50%\n }\n\n 50% {\n background-position: 100% 50%\n }\n\n 100% {\n background-position: 0% 50%\n }\n}"}]}},"actionData":null,"errors":null}