{"loaderData":{"0":null,"0-3":{"total":7311,"projects":[{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"6dbe5c","snapshot":null,"tags":null,"title":"button by njesenberger","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":159,"cssLen":2290,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","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(#cd3f64, #9d3656);\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: #803;\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 rgba(255, 255, 255, .75), inset 0 2px 2px rgba(0, 0, 0, .25);\n}"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"ea68ad","snapshot":null,"tags":null,"title":"button by Yaya12085","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1087,"cssLen":498,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n max-width: 320px;\n display: flex;\n padding: 0.5rem 1.4rem;\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 700;\n text-align: center;\n text-transform: uppercase;\n vertical-align: middle;\n align-items: center;\n border-radius: 0.5rem;\n border: 1px solid rgba(0, 0, 0, 0.25);\n gap: 0.75rem;\n color: rgb(65, 63, 63);\n background-color: #fff;\n cursor: pointer;\n transition: all .6s ease;\n}\n\n.button svg {\n height: 24px;\n}\n\nbutton:hover {\n transform: scale(1.02);\n}"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"7f536d","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":403,"cssLen":779,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n width: 120px;\n height: 30px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 12px;\n cursor: pointer;\n border: 3px solid rgb(255, 239, 94);\n background-color: rgb(255, 239, 94);\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.137);\n}\n\n.text {\n width: 70%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgb(27, 27, 27);\n color: white;\n}\n\n.arrow path {\n fill: rgb(19, 19, 19);\n}\n\n.button:hover .arrow {\n animation: slide-in-left 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;\n}\n\n@keyframes slide-in-left {\n 0% {\n transform: translateX(-8px);\n opacity: 0;\n }\n\n 100% {\n transform: translateX(0px);\n opacity: 1;\n }\n}\n\n.button:active {\n transform: scale(0.97);\n}"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"18c283","snapshot":null,"tags":null,"title":"button by Codecite","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":57,"cssLen":2532,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n --fancy-button-gradient-0: #8d49fd;\n --fancy-button-gradient-50: #7f56f3;\n --fancy-button-gradient-100: #5691f3;\n --fancy-button-inner-shadow-top: rgba(233, 209, 255, 0.2);\n --fancy-button-inner-shadow-top-lg: rgba(9, 12, 60, 0.1);\n --fancy-button-inner-shadow-bottom: rgba(137, 222, 246, 0.3);\n --fancy-button-shine-top: #e9d1ff;\n --fancy-button-shine-bottom: #adfff9;\n font-family: 'Poppins';\n font-weight: 500;\n font-size: 15px;\n line-height: 21px;\n text-shadow: 0px 0.5px 0.5px rgba(0, 0, 0, 0.2);\n padding: 0;\n margin: 0;\n appearance: none;\n border: none;\n outline: none;\n overflow: hidden;\n position: relative;\n cursor: pointer;\n z-index: 1;\n border-radius: 25px;\n color: #fff;\n background-image: linear-gradient(to bottom, var(--fancy-button-gradient-0) 0%, var(--fancy-button-gradient-50) 50%, var(--fancy-button-gradient-100) 100%);\n box-shadow: 0px 4px 12px rgba(9, 12, 60, 0.15), 0px 2px 8px rgba(9, 12, 60, 0.15), 0px 1px 3px var(--fancy-button-inner-shadow-top-lg), inset 0px 1px 1px var(--fancy-button-inner-shadow-top), inset 0px -1px 3px var(--fancy-button-inner-shadow-bottom);\n}\n\n.btn:before, .btn:after {\n content: '';\n position: absolute;\n border-radius: inherit;\n will-change: transform;\n}\n\n.btn:before {\n left: 50%;\n transform: translateX(-50%);\n background-color: var(--fancy-button-shine-top);\n width: 96px;\n height: 6px;\n top: -3px;\n opacity: 0.6;\n filter: blur(6px);\n transition: opacity 0.25s;\n}\n\n.btn:after {\n inset: 0;\n background-size: cover;\n z-index: 2;\n opacity: 0.3;\n mix-blend-mode: overlay;\n pointer-events: none;\n}\n\n.btn span {\n display: block;\n padding: 12px 24px;\n border-radius: inherit;\n overflow: hidden;\n position: relative;\n background-image: linear-gradient(to bottom, var(--fancy-button-shine-top), transparent 8px);\n background-position: 0 -6px;\n background-repeat: no-repeat;\n z-index: 1;\n}\n\n.btn span:before, .btn span:after {\n content: '';\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n border-radius: 50%;\n background-color: var(--fancy-button-shine-bottom);\n transition: opacity 0.25s, transform 0.25s;\n will-change: transform;\n}\n\n.btn span:before {\n width: 92px;\n height: 8px;\n bottom: -4px;\n opacity: 0.75;\n filter: blur(6px);\n}\n\n.btn span:after {\n width: 112px;\n height: 1px;\n bottom: 0;\n opacity: 0.9;\n filter: blur(1px);\n}\n\n.btn:hover span:before {\n opacity: 0.8;\n}\n\n.btn:hover span:before {\n transform: translateX(-50%) scale(1.25);\n}\n\n.btn:hover span:after {\n opacity: 1;\n}"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"60380b","snapshot":null,"tags":null,"title":"button by cssbuttons-io","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":516,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n padding: 1.3em 3em;\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 2.5px;\n font-weight: 500;\n color: #000;\n background-color: #fff;\n border: none;\n border-radius: 45px;\n box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);\n transition: all 0.3s ease 0s;\n cursor: pointer;\n outline: none;\n}\n\nbutton:hover {\n background-color: #23c483;\n box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);\n color: #fff;\n transform: translateY(-7px);\n}\n\nbutton:active {\n transform: translateY(-1px);\n}"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"5a9ce5","snapshot":null,"tags":null,"title":"button by mi-series","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":56,"cssLen":604,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n width: 150px;\n padding: 0;\n border: none;\n transform: rotate(5deg);\n transform-origin: center;\n font-family: \"Gochi Hand\", cursive;\n text-decoration: none;\n font-size: 15px;\n cursor: pointer;\n padding-bottom: 3px;\n border-radius: 5px;\n box-shadow: 0 2px 0 #494a4b;\n transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n background-color: #5cdb95;\n}\n\n.button span {\n background: #f1f5f8;\n display: block;\n padding: 0.5rem 1rem;\n border-radius: 5px;\n border: 2px solid #494a4b;\n}\n\n.button:active {\n transform: translateY(5px);\n padding-bottom: 0px;\n outline: 0;\n}\n"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"aaf762","snapshot":null,"tags":null,"title":"button by TaniaDou","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":71,"cssLen":1510,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Button\n

","css":".button {\n padding: 1rem 2rem;\n border-radius: .5rem;\n border: none;\n font-size: 1rem;\n font-weight: 400;\n color: #f4f0ff;\n text-align: center;\n backdrop-filter: blur(10px);\n cursor: pointer;\n}\n\n.button::before {\n content: \"\";\n display: block;\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n width: 100%;\n border-radius: .5rem;\n background: linear-gradient(180deg, rgba(8, 77, 126, 0) 0%, rgba(8, 77, 126, 0.42) 100%),rgba(47,255,255,.24);\n box-shadow: inset 0 0 12px rgba(151,200,255,.44);\n z-index: -1;\n}\n\n.button::after {\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(180deg, rgba(8, 77, 126, 0) 0%, rgba(8, 77, 126, 0.42) 100%),rgba(47,255,255,.24);\n box-shadow: inset 0 0 12px rgba(151,200,255,.44);\n border-radius: .5rem;\n opacity: 0;\n z-index: -1;\n transition: all .3s ease-in;\n}\n\n.button:hover::after {\n opacity: 1;\n}\n\n.button-border {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n border-radius: .5rem;\n z-index: -1;\n}\n\n.button-border::before {\n content: \"\";\n position: absolute;\n border-radius: .5rem;\n padding: 1px;\n inset: 0;\n background: linear-gradient(180deg, rgba(184, 238, 255, 0.24) 0%, rgba(184, 238, 255, 0) 100%),linear-gradient(0deg, rgba(184, 238, 255, 0.32), rgba(184, 238, 255, 0.32));\n -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n pointer-events: none;\n}"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"fed426","snapshot":null,"tags":null,"title":"button by LilaRest","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":894,"cssLen":1327,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 20px 25px 20px 22px;\n box-shadow: rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;\n background-color: #e8e8e8;\n border-color: #ffe2e2;\n border-style: solid;\n border-width: 9px;\n border-radius: 35px;\n font-size: 25px;\n font-weight: 900;\n color: rgb(134, 124, 124);\n font-family: monospace;\n transition: transform 400ms cubic-bezier(.68,-0.55,.27,2.5), \n border-color 400ms ease-in-out,\n background-color 400ms ease-in-out;\n word-spacing: -2px;\n}\n\n@keyframes movingBorders {\n 0% {\n border-color: #fce4e4;\n }\n\n 50% {\n border-color: #ffd8d8;\n }\n\n 90% {\n border-color: #fce4e4;\n }\n}\n\nbutton:hover {\n background-color: #eee;\n transform: scale(105%);\n animation: movingBorders 3s infinite;\n}\n\nbutton svg {\n margin-right: 11px;\n fill: rgb(255, 110, 110);\n transition: opacity 100ms ease-in-out;\n}\n\n.filled {\n position: absolute;\n opacity: 0;\n top: 20px;\n left: 22px;\n}\n\n@keyframes beatingHeart {\n 0% {\n transform: scale(1);\n }\n\n 15% {\n transform: scale(1.15);\n }\n\n 30% {\n transform: scale(1);\n }\n\n 45% {\n transform: scale(1.15);\n }\n\n 60% {\n transform: scale(1);\n }\n}\n\nbutton:hover .empty {\n opacity: 0;\n}\n\nbutton:hover .filled {\n opacity: 1;\n animation: beatingHeart 1.2s infinite;\n}"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"7304a7","snapshot":null,"tags":null,"title":"button by barisdogansutcu","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":24,"cssLen":620,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n padding: 17px 40px;\n border-radius: 50px;\n cursor: pointer;\n border: 0;\n background-color: white;\n box-shadow: rgb(0 0 0 / 5%) 0 0 8px;\n letter-spacing: 1.5px;\n text-transform: uppercase;\n font-size: 15px;\n transition: all 0.5s ease;\n}\n\nbutton:hover {\n letter-spacing: 3px;\n background-color: hsl(261deg 80% 48%);\n color: hsl(0, 0%, 100%);\n box-shadow: rgb(93 24 220) 0px 7px 29px 0px;\n}\n\nbutton:active {\n letter-spacing: 3px;\n background-color: hsl(261deg 80% 48%);\n color: hsl(0, 0%, 100%);\n box-shadow: rgb(93 24 220) 0px 0px 0px 0px;\n transform: translateY(10px);\n transition: 100ms;\n}\n"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"ae9f5a","snapshot":null,"tags":null,"title":"button by mrhyddenn","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":1446,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n position: relative;\n padding: 10px 20px;\n border-radius: 7px;\n border: 1px solid rgb(61, 106, 255);\n font-size: 14px;\n text-transform: uppercase;\n font-weight: 600;\n letter-spacing: 2px;\n background: transparent;\n color: #fff;\n overflow: hidden;\n box-shadow: 0 0 0 0 transparent;\n -webkit-transition: all 0.2s ease-in;\n -moz-transition: all 0.2s ease-in;\n transition: all 0.2s ease-in;\n}\n\nbutton:hover {\n background: rgb(61, 106, 255);\n box-shadow: 0 0 30px 5px rgba(0, 142, 236, 0.815);\n -webkit-transition: all 0.2s ease-out;\n -moz-transition: all 0.2s ease-out;\n transition: all 0.2s ease-out;\n}\n\nbutton:hover::before {\n -webkit-animation: sh02 0.5s 0s linear;\n -moz-animation: sh02 0.5s 0s linear;\n animation: sh02 0.5s 0s linear;\n}\n\nbutton::before {\n content: '';\n display: block;\n width: 0px;\n height: 86%;\n position: absolute;\n top: 7%;\n left: 0%;\n opacity: 0;\n background: #fff;\n box-shadow: 0 0 50px 30px #fff;\n -webkit-transform: skewX(-20deg);\n -moz-transform: skewX(-20deg);\n -ms-transform: skewX(-20deg);\n -o-transform: skewX(-20deg);\n transform: skewX(-20deg);\n}\n\n@keyframes sh02 {\n from {\n opacity: 0;\n left: 0%;\n }\n\n 50% {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n left: 100%;\n }\n}\n\nbutton:active {\n box-shadow: 0 0 0 0 transparent;\n -webkit-transition: box-shadow 0.2s ease-in;\n -moz-transition: box-shadow 0.2s ease-in;\n transition: box-shadow 0.2s ease-in;\n}\n"},{"created":"2024-01-22T16:59:49.000Z","isPrivate":0,"projectId":"b6cea5","snapshot":null,"tags":null,"title":"button by abrahamcalsin","updated":"2024-01-22T16:59:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":41,"cssLen":968,"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: flex;\n justify-content: center;\n align-items: center;\n border-radius: 5px;\n background: #183153;\n font-family: \"Montserrat\", sans-serif;\n box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.2);\n overflow: hidden;\n cursor: pointer;\n border: none;\n}\n\nbutton:after {\n content: \" \";\n width: 0%;\n height: 100%;\n background: #ffd401;\n position: absolute;\n transition: all 0.4s ease-in-out;\n right: 0;\n}\n\nbutton:hover::after {\n right: auto;\n left: 0;\n width: 100%;\n}\n\nbutton span {\n text-align: center;\n text-decoration: none;\n width: 100%;\n padding: 18px 25px;\n color: #fff;\n font-size: 1.125em;\n font-weight: 700;\n letter-spacing: 0.3em;\n z-index: 20;\n transition: all 0.3s ease-in-out;\n}\n\nbutton:hover span {\n color: #183153;\n animation: scaleUp 0.3s ease-in-out;\n}\n\n@keyframes scaleUp {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(0.95);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n"},{"created":"2024-01-22T16:59:49.000Z","isPrivate":0,"projectId":"a191a2","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T16:59:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":599,"cssLen":1104,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n\n","css":".Btn {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: 45px;\n height: 45px;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n transition-duration: .3s;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);\n background-color: rgb(255, 65, 65);\n}\n\n/* plus sign */\n.sign {\n width: 100%;\n transition-duration: .3s;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.sign svg {\n width: 17px;\n}\n\n.sign svg path {\n fill: white;\n}\n/* text */\n.text {\n position: absolute;\n right: 0%;\n width: 0%;\n opacity: 0;\n color: white;\n font-size: 1.2em;\n font-weight: 600;\n transition-duration: .3s;\n}\n/* hover effect on button width */\n.Btn:hover {\n width: 125px;\n border-radius: 40px;\n transition-duration: .3s;\n}\n\n.Btn:hover .sign {\n width: 30%;\n transition-duration: .3s;\n padding-left: 20px;\n}\n/* hover effect button's text */\n.Btn:hover .text {\n opacity: 1;\n width: 70%;\n transition-duration: .3s;\n padding-right: 10px;\n}\n/* button click effect*/\n.Btn:active {\n transform: translate(2px ,2px);\n}"}]}},"actionData":null,"errors":null}