{"loaderData":{"0":null,"0-3":{"total":7305,"projects":[{"created":"2024-01-22T17:00:24.000Z","isPrivate":0,"projectId":"b7c416","snapshot":null,"tags":null,"title":"button by elijahwgummer-poc","updated":"2024-01-22T17:00:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":114,"cssLen":1078,"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 display: inline-block;\n padding: 12px 26px;\n font-size: 20px;\n font-weight: bold;\n text-align: center;\n text-decoration: none;\n border-radius: 50px;\n color: #fff;\n background-color: #ff6b6b;\n border: none;\n overflow: hidden;\n transition: all 0.3s ease;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\n}\n\n.button span {\n position: relative;\n z-index: 1;\n}\n\n.button .overlay {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.3);\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.button .shine {\n position: absolute;\n top: -80px;\n left: -80px;\n width: 160px;\n height: 160px;\n background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.8) 0%, transparent 80%);\n transform: rotate(45deg);\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.button:hover .overlay {\n opacity: 0.7;\n}\n\n.button:hover .shine {\n opacity: 1;\n}\n\n.button:hover {\n background-color: #ff3333;\n}\n\n.button:active {\n background-color: #cc0000;\n}\n"},{"created":"2024-01-22T17:00:24.000Z","isPrivate":0,"projectId":"eddfb6","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:24.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 #0084ff;\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: #0084ff;\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: #0084ff;\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:24.000Z","isPrivate":0,"projectId":"6a861b","snapshot":null,"tags":null,"title":"button by 2Fl00rian6","updated":"2024-01-22T17:00:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":37,"cssLen":401,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n background-color: rgb(20, 87, 244);\n border: 1px solid rgb(20, 87, 244);\n padding: 12px 20px;\n border-radius: 7px;\n transition: .3s;\n color: #fff;\n}\n\nbutton:hover {\n border: 1px solid rgb(20, 87, 244);\n background-color: transparent;\n color: rgb(20, 87, 244);\n}\n\nbutton:focus {\n box-shadow: 0px 0px 0px 5px rgba(20, 87, 244, 0.37), 0px 0px 0px 10px rgba(20, 87, 244, 0.38);\n outline: none;\n}"},{"created":"2024-01-22T17:00:24.000Z","isPrivate":0,"projectId":"8d520b","snapshot":null,"tags":null,"title":"button by SuliLevente","updated":"2024-01-22T17:00:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":23,"cssLen":752,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background-color: #040810;\n color: #C7C7C7;\n padding: 15px;\n text-transform: uppercase;\n font-weight: bold;\n font-size: 17px;\n overflow: hidden;\n position: relative;\n border: 3px double #2D6FBB;\n z-index: 1;\n}\n\nbutton::before {\n content: \"\";\n background-color: #2D6FBB;\n transform: translateX(-100%);\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n left: 0;\n transition: all 0.3s;\n z-index: -1;\n}\n\nbutton:hover::before {\n transform: translateX(0);\n}\n\nbutton::after {\n content: \"\";\n background-color: #2D6FBB;\n transform: translateX(100%);\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n left: 0;\n transition: all 0.3s;\n z-index: -1;\n}\n\nbutton:hover::after {\n transform: translateX(0);\n}"},{"created":"2024-01-22T17:00:24.000Z","isPrivate":0,"projectId":"206cb6","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":157,"cssLen":2274,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n -webkit-appearance: none;\n appearance: none;\n position: relative;\n border-width: 0;\n padding: 0 8px 12px;\n min-width: 10em;\n box-sizing: border-box;\n background: transparent;\n font: inherit;\n cursor: pointer;\n}\n\n.button-top {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 0;\n padding: 8px 16px;\n transform: translateY(0);\n text-align: center;\n color: #fff;\n text-shadow: 0 -1px rgba(0, 0, 0, .25);\n transition-property: transform;\n transition-duration: .2s;\n -webkit-user-select: none;\n user-select: none;\n}\n\n.button:active .button-top {\n transform: translateY(6px);\n}\n\n.button-top::after {\n content: '';\n position: absolute;\n z-index: -1;\n border-radius: 4px;\n width: 100%;\n height: 100%;\n box-sizing: content-box;\n background-image: radial-gradient(#3dcd9e, #369d8d);\n text-align: center;\n color: #fff;\n box-shadow: inset 0 0 0px 1px rgba(255, 255, 255, .2), 0 1px 2px 1px rgba(255, 255, 255, .2);\n transition-property: border-radius, padding, width, transform;\n transition-duration: .2s;\n}\n\n.button:active .button-top::after {\n border-radius: 6px;\n padding: 0 2px;\n}\n\n.button-bottom {\n position: absolute;\n z-index: -1;\n bottom: 4px;\n left: 4px;\n border-radius: 8px / 16px 16px 8px 8px;\n padding-top: 6px;\n width: calc(100% - 8px);\n height: calc(100% - 10px);\n box-sizing: content-box;\n background-color: #38a19d;\n background-image: radial-gradient(4px 8px at 4px calc(100% - 8px), rgba(255, 255, 255, .25), transparent), radial-gradient(4px 8px at calc(100% - 4px) calc(100% - 8px), rgba(255, 255, 255, .25), transparent), radial-gradient(16px at -4px 0, white, transparent), radial-gradient(16px at calc(100% + 4px) 0, white, transparent);\n box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5), inset 0 -1px 3px 3px rgba(0, 0, 0, .4);\n transition-property: border-radius, padding-top;\n transition-duration: .2s;\n}\n\n.button:active .button-bottom {\n border-radius: 10px 10px 8px 8px / 8px;\n padding-top: 0;\n}\n\n.button-base {\n position: absolute;\n z-index: -2;\n top: 4px;\n left: 0;\n border-radius: 12px;\n width: 100%;\n height: calc(100% - 4px);\n background-color: rgba(0, 0, 0, .15);\n box-shadow: 0 1px 1px 0 black, inset 0 2px 2px rgba(0, 0, 0, .25);\n}"},{"created":"2024-01-22T17:00:24.000Z","isPrivate":0,"projectId":"44b4c0","snapshot":null,"tags":null,"title":"button by fcb4355","updated":"2024-01-22T17:00:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":48,"cssLen":425,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" \n","css":"/*\n ****** Simple Button ******\n*/\n.button {\n padding: 7px 10px;\n border: 1px solid #bbb;\n color: #222;\n font-weight: 600;\n cursor: pointer;\n border-radius: 4px;\n box-shadow: 0 10px 20px rgba(0,0,0,0.2);\n transition: all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n.button:hover {\n background-color: #007ffe;\n color: #fff;\n box-shadow: -20px 50px 50px rgba(0,0,0,0.2);\n border: none;\n padding: 10px 20px;\n}\n\n"},{"created":"2024-01-22T17:00:24.000Z","isPrivate":0,"projectId":"428e03","snapshot":null,"tags":null,"title":"button by boryanakrasteva","updated":"2024-01-22T17:00:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":521,"cssLen":1406,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n cursor: pointer;\n width: 50px;\n height: 50px;\n border: none;\n position: relative;\n border-radius: 10px;\n -webkit-box-shadow: 1px 1px 5px .2px #00000035;\n box-shadow: 1px 1px 5px .2px #00000035;\n -webkit-transition: .2s linear;\n transition: .2s linear;\n transition-delay: .2s;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: space-between;\n}\n\n.btn:hover {\n width: 150px;\n transition-delay: .2s;\n}\n\n.btn:hover > .paragraph {\n visibility: visible;\n opacity: 1;\n -webkit-transition-delay: .4s;\n transition-delay: .4s;\n}\n\n.btn:hover > .icon-wrapper .icon {\n transform: scale(1.1);\n}\n\n.bnt:hover > .icon-wrapper .icon path {\n stroke: black;\n}\n\n.paragraph {\n color: black;\n visibility: hidden;\n opacity: 0;\n font-size: 18px;\n margin-right: 20px;\n padding-left: 20px;\n -webkit-transition: .2s linear;\n transition: .2s linear;\n font-weight: bold;\n text-transform: uppercase;\n}\n\n.icon-wrapper {\n width: 50px;\n height: 50px;\n position: absolute;\n top: 0;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.icon {\n transform: scale(.9);\n transition: .2s linear;\n}\n\n.icon path {\n stroke: #000;\n stroke-width: 2px;\n -webkit-transition: .2s linear;\n transition: .2s linear;\n}"},{"created":"2024-01-22T17:00:24.000Z","isPrivate":0,"projectId":"bcf24e","snapshot":null,"tags":null,"title":"button by elijahgummer","updated":"2024-01-22T17:00:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":130,"cssLen":1399,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n 📷\n Photos\n

\n","css":"ul {\n position: relative;\n display: flex;\n gap: 25px;\n}\n\nul li {\n position: relative;\n list-style: none;\n width: 60px;\n height: 60px;\n background: #fff;\n border-radius: 60px;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);\n transition: 0.5s;\n}\n\nul li:hover {\n width: 180px;\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0);\n}\n\nul li::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 60px;\n background: linear-gradient(45deg, var(--i), var(--j));\n opacity: 0;\n transition: 0.5s;\n}\n\nul li:hover::before {\n opacity: 1;\n}\n\nul li::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 transition: 0.5s;\n filter: blur(15px);\n z-index: -1;\n opacity: 0;\n}\n\nul li:hover::after {\n opacity: 0.5;\n}\n\nul li .icon {\n color: #777;\n font-size: 1.75em;\n transition: 0.5s;\n transition-delay: 0.25s;\n}\n\nul li:hover .icon {\n transform: scale(0);\n color: #fff;\n transition-delay: 0s;\n}\n\nul li span {\n position: absolute;\n}\n\nul li .title {\n color: #fff;\n font-size: 1.1em;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n transform: scale(0);\n transition: 0.5s;\n transition-delay: 0s;\n}\n\nul li:hover .title {\n transform: scale(1);\n transition-delay: 0.25s;\n}\n"},{"created":"2024-01-22T17:00:24.000Z","isPrivate":0,"projectId":"bc277d","snapshot":null,"tags":null,"title":"button by Yaya12085","updated":"2024-01-22T17:00:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2740,"cssLen":1073,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".pinBtn {\n width: 100px;\n height: 40px;\n border-radius: 40px;\n border: 1px solid rgba(255, 255, 255, 0.349);\n background-color: rgb(12, 12, 12);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition-duration: .3s;\n overflow: hidden;\n}\n\n.IconContainer {\n width: 30px;\n height: 30px;\n background: linear-gradient(to bottom, rgb(255, 136, 255),rgb(172, 70, 255));\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n z-index: 2;\n transition-duration: .3s;\n}\n\n.icon {\n border-radius: 1px;\n}\n\n.text {\n height: 100%;\n width: 60px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n z-index: 1;\n transition-duration: .3s;\n font-size: 1.04em;\n}\n\n.pinBtn:hover .IconContainer {\n width: 90px;\n border-radius: 40px;\n transition-duration: .3s;\n}\n\n.pinBtn:hover .text {\n transform: translate(10px);\n width: 0;\n font-size: 0;\n transition-duration: .3s;\n}\n\n.pinBtn:active {\n transform: scale(0.95);\n transition-duration: .3s;\n}"},{"created":"2024-01-22T17:00:24.000Z","isPrivate":0,"projectId":"5bd273","snapshot":null,"tags":null,"title":"button by JohnnyCSilva","updated":"2024-01-22T17:00:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":113,"cssLen":1786,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n font-family: 'Poppins', sans-serif;\n letter-spacing: 2px;\n background: none;\n color: white;\n position: relative;\n outline: none;\n border: none;\n height: 50px;\n width: 190px;\n font-size: 14px;\n z-index: 2;\n transition: 0.01s 0.23s ease-out all;\n overflow: hidden;\n}\n\nbutton:before {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n width: 55%;\n background: #303030;\n z-index: -1;\n transition: 0.3s ease-in all;\n}\n\nbutton:after {\n content: \"\";\n position: absolute;\n left: -5%;\n top: 5%;\n height: 90%;\n width: 5%;\n background: white;\n transition: 0.4s 0.02s ease-in all;\n}\n\nbutton:hover {\n cursor: pointer;\n color: transparent;\n}\n\nbutton:hover:before {\n left: 120%;\n width: 25%;\n}\n\nbutton:hover:after {\n left: 100%;\n width: 70%;\n}\n\nbutton:hover > .icon-right.after:after {\n left: -80px;\n color: white;\n transition: 0.2s 0.2s ease all;\n}\n\nbutton:hover > .icon-right.after:before {\n left: -104px;\n top: 14px;\n opacity: 0.2;\n color: white;\n}\n\n.icon-right {\n position: absolute;\n top: 0;\n right: 0;\n}\n\n.icon-right:after {\n font-family: \"FontAwesome\";\n content: \"→\";\n font-size: 24px;\n display: inline-block;\n position: relative;\n top: 26px;\n transform: translate3D(0, -55%, 0);\n}\n\n.icon-right.after:after {\n left: -250px;\n color: black;\n transition: 0.15s 0.25s ease left, 0.5s 0.05s ease color;\n}\n\n.icon-right.after:before {\n content: \"Click Me!\";\n position: absolute;\n left: -230px;\n top: 14px;\n opacity: 0;\n transition: 0.2s ease-in all;\n}\n\n.signature {\n position: fixed;\n font-family: sans-serif;\n font-weight: 100;\n bottom: 10px;\n left: 0;\n letter-spacing: 4px;\n font-size: 10px;\n width: 100%;\n text-align: center;\n color: white;\n text-transform: uppercase;\n text-decoration: none;\n}"},{"created":"2024-01-22T17:00:24.000Z","isPrivate":0,"projectId":"822299","snapshot":null,"tags":null,"title":"button by KSAplay","updated":"2024-01-22T17:00:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":87,"cssLen":1791,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".container {\n transition: 200ms ease;\n}\n\n.button {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 10px 40px;\n border-width: 0;\n border-radius: 1em;\n background-color: #19171C;\n transition: 500ms ease;\n}\n\n.button p {\n font-size: 20px;\n font-weight: bold;\n background: rgb(137,60,21);\n background: linear-gradient(90deg, rgba(137,60,21,1) 0%, rgba(255,222,68,1) 17%, rgba(177,116,30,1) 24%, rgba(255,231,82,1) 40%, rgba(224,147,38,1) 50%, rgba(228,150,42,1) 59%, rgba(176,120,27,1) 70%, rgba(239,179,51,1) 85%, rgba(135,58,26,1) 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.button::before {\n position: absolute;\n content: '';\n width: 190px;\n height: 50px;\n border-radius: 1em;\n background-size: 100%;\n background: rgb(137,60,21);\n background: linear-gradient(90deg, rgba(137,60,21,1) 0%, rgba(255,222,68,1) 17%, rgba(177,116,30,1) 24%, rgba(255,231,82,1) 40%, rgba(224,147,38,1) 50%, rgba(228,150,42,1) 59%, rgba(176,120,27,1) 70%, rgba(239,179,51,1) 85%, rgba(135,58,26,1) 100%);\n z-index: -1;\n}\n\n.container:hover .button::before {\n animation: golden 5s infinite alternate ease-in-out;\n}\n\n.container:hover .button p {\n animation: golden 5s infinite alternate ease-in-out;\n}\n\n.container:hover {\n transform: scale(1.1);\n}\n\n.container:active {\n transform: scale(1);\n}\n\n.container:active .button::before {\n animation: golden 1s infinite alternate ease-in-out;\n}\n\n.container:active .button p {\n animation: golden 1s infinite alternate ease-in-out;\n}\n\n@keyframes golden {\n 0% {\n background-size: 100%;\n background-position: 50%;\n }\n\n 50% {\n background-size: 500%;\n background-position: 0%;\n }\n\n 100% {\n background-size: 200%;\n background-position: 100%;\n }\n}"},{"created":"2024-01-22T17:00:24.000Z","isPrivate":0,"projectId":"2e8b4d","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":697,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n font-weight: 700;\n font-size: 17px;\n width: 200px;\n height: 60px;\n border: none;\n color: white;\n background-image: linear-gradient(\n to top left,\n hsl(49.04, 100%, 57.06%) 0%,\n hsl(49.04, 100%, 57.06%) 20%,\n hsl(58.89, 45.92%, 53.77%) 20%,\n hsl(58.89, 45.92%, 53.77%) 40%,\n hsl(124.17, 16.44%, 57.06%) 40%,\n hsl(124.17, 16.44%, 57.06%) 60%,\n hsl(200.79, 47.04%, 47.21%) 60%,\n hsl(200.79, 47.04%, 47.21%) 80%,\n hsl(210, 100%, 43.92%) 80%,\n hsl(210, 100%, 43.92%) 100%\n );\n transition: 1s all;\n box-shadow: 0 1px 15px 0 #797f7b;\n}\n\nbutton:hover {\n transform: scale(1.1);\n box-shadow: -2px 2px 10px #616562,\n 2px -2px 10px #717774;\n}"}]}},"actionData":null,"errors":null}