{"loaderData":{"0":null,"0-2":{"total":7100,"projects":[{"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}"},{"created":"2024-01-22T16:59:49.000Z","isPrivate":0,"projectId":"a351bf","snapshot":null,"tags":null,"title":"button by simontheonlyone","updated":"2024-01-22T16:59:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":316,"cssLen":2711,"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 align-items: center;\n justify-content: center;\n width: 5.3em;\n height: 5.3em;\n border: none;\n cursor: pointer;\n border-radius: 0.4em;\n background: rgba(235, 252, 254, 0.8);\n}\n\n.container {\n position: relative;\n width: 3.5em;\n height: 3.1em;\n background: none;\n overflow: hidden;\n}\n\n.folder {\n content: \"\";\n position: absolute;\n /* box-shadow: 0 0 5px rgba(0, 0, 0, .3); */\n}\n\n.folder_one {\n bottom: 0;\n width: 100%;\n height: 88%;\n border-radius: 3px;\n border-top: 2px solid rgb(206, 167, 39);\n /* background-color: rgb(252, 212, 80); */\n background: linear-gradient(-35deg, rgb(238, 194, 47) 5%, rgb(255, 223, 118));\n}\n\n.folder_two {\n top: 5%;\n width: 38%;\n height: 19%;\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n border-bottom-right-radius: 3px;\n background-color: rgb(206, 167, 39);\n box-shadow: 0 1px 5px -2px rgba(0, 0, 0, 0.5);\n}\n\n.folder_two::before {\n content: \"\";\n position: absolute;\n display: inline;\n left: 88%;\n width: 0;\n height: 0;\n border-left: 7px solid rgb(206, 167, 39);\n border-top: 0.3em solid transparent;\n border-bottom: 0.3em solid transparent;\n /* background-color: rgb(206, 167, 39); */\n}\n\n.folder_three {\n display: flex;\n align-items: center;\n justify-content: center;\n left: 0.5em;\n bottom: 0;\n width: 2.5em;\n height: 0.9em;\n border-radius: 4px 4px 0 0;\n background: linear-gradient(-35deg, rgb(25, 102, 218), rgb(109, 165, 249));\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);\n}\n\n.folder_four {\n left: 1em;\n bottom: 0.3em;\n width: 1.5em;\n height: 0.18em;\n border-radius: 1em;\n background-color: rgb(20, 77, 163);\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n}\n\n.active_line {\n content: \"\";\n position: absolute;\n bottom: 0;\n width: 0.9em;\n height: 0.4em;\n background-color: #999;\n border: none;\n border-radius: 1em;\n transition: all 0.15s linear;\n}\n\n.button:active .active_line,\n.button:focus .active_line {\n width: 2.3em;\n background-color: rgb(41, 126, 255);\n}\n\n.button:focus .container {\n animation: wow 1s forwards;\n}\n\n@keyframes wow {\n 20% {\n scale: 0.8;\n }\n\n 30% {\n scale: 1;\n transform: translateY(0);\n }\n\n 50% {\n transform: translateY(-6px);\n }\n\n 65% {\n transform: translateY(4px);\n }\n\n 80% {\n transform: translateY(0);\n }\n\n 100% {\n scale: 1;\n }\n}\n\n.text {\n content: \"\";\n position: absolute;\n top: -4.5em;\n width: 7.7em;\n height: 2.6em;\n background-color: #666;\n color: #fff;\n display: flex;\n justify-content: center;\n align-items: center;\n border: none;\n border-radius: 5px;\n text-shadow: 0 0 10px rgb(0, 0, 0);\n opacity: 0;\n transition: all 0.25s linear;\n}\n\n.button:hover .text {\n opacity: 1;\n}\n"},{"created":"2024-01-22T16:59:49.000Z","isPrivate":0,"projectId":"da7904","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T16:59:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":492,"cssLen":592,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n width: 180px;\n height: 40px;\n background-image: linear-gradient(rgb(214, 202, 254), rgb(158, 129, 254));\n border: none;\n border-radius: 50px;\n color: rgb(255, 255, 255);\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n cursor: pointer;\n box-shadow: 1px 3px 0px rgb(139, 113, 255);\n transition-duration: .3s;\n}\n\n.cartIcon {\n width: 14px;\n height: fit-content;\n}\n\n.cartIcon path {\n fill: white;\n}\n\n.button:active {\n transform: translate(2px ,0px);\n box-shadow: 0px 1px 0px rgb(139, 113, 255);\n padding-bottom: 1px;\n}\n"},{"created":"2024-01-22T16:59:49.000Z","isPrivate":0,"projectId":"634eae","snapshot":null,"tags":null,"title":"button by alexmaracinaru","updated":"2024-01-22T16:59:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":200,"cssLen":891,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".cta {\n position: relative;\n margin: auto;\n padding: 12px 18px;\n transition: all 0.2s ease;\n border: none;\n background: none;\n cursor: pointer;\n}\n\n.cta:before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n border-radius: 50px;\n background: #b1dae7;\n width: 45px;\n height: 45px;\n transition: all 0.3s ease;\n}\n\n.cta span {\n position: relative;\n font-family: \"Ubuntu\", sans-serif;\n font-size: 18px;\n font-weight: 700;\n letter-spacing: 0.05em;\n color: #234567;\n}\n\n.cta svg {\n position: relative;\n top: 0;\n margin-left: 10px;\n fill: none;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke: #234567;\n stroke-width: 2;\n transform: translateX(-5px);\n transition: all 0.3s ease;\n}\n\n.cta:hover:before {\n width: 100%;\n background: #b1dae7;\n}\n\n.cta:hover svg {\n transform: translateX(0);\n}\n\n.cta:active {\n transform: scale(0.95);\n}\n"},{"created":"2024-01-22T16:59:49.000Z","isPrivate":0,"projectId":"5ded54","snapshot":null,"tags":null,"title":"button by gharsh11032000","updated":"2024-01-22T16:59:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":32,"cssLen":1238,"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 background-color: transparent;\n color: #e8e8e8;\n font-size: 17px;\n font-weight: 600;\n border-radius: 10px;\n width: 150px;\n height: 60px;\n border: none;\n text-transform: uppercase;\n cursor: pointer;\n overflow: hidden;\n box-shadow: 0 10px 20px rgba(51, 51, 51, 0.2);\n transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.button::before {\n content: \"Hello!\";\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n pointer-events: none;\n background: linear-gradient(135deg,#7b4397,#dc2430 );\n transform: translate(0%,90%);\n z-index: 99;\n position: relative;\n transform-origin: bottom;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.button::after {\n content: \"Hover me\";\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #333;\n width: 100%;\n height: 100%;\n pointer-events: none;\n transform-origin: top;\n transform: translate(0%,-100%);\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.button:hover::before {\n transform: translate(0%,0%);\n}\n\n.button:hover::after {\n transform: translate(0%,-200%);\n}\n\n.button:focus {\n outline: none;\n}\n\n.button:active {\n scale: 0.95;\n}\n\n\n"}]}},"actionData":null,"errors":null}