{"loaderData":{"0":null,"0-3":{"total":7433,"projects":[{"created":"2024-01-22T16:59:58.000Z","isPrivate":0,"projectId":"681d54","snapshot":null,"tags":null,"title":"button by ramz04","updated":"2024-01-22T16:59:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":49,"cssLen":506,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"/* inspired form gumroad website */\n/* inspired form gumroad website */\n.button {\n --bg: #000;\n --hover-bg: #ff90e8;\n --hover-text: #000;\n color: #fff;\n border: 1px solid var(--bg);\n border-radius: 4px;\n padding: 0.8em 2em;\n background: var(--bg);\n transition: 0.2s;\n}\n\n.button:hover {\n color: var(--hover-text);\n transform: translate(0.25rem,-0.25rem);\n background: var(--hover-bg);\n box-shadow: -0.25rem 0.25rem var(--bg);\n}\n\n.button:active {\n transform: translate(0);\n box-shadow: none;\n}"},{"created":"2024-01-22T16:59:58.000Z","isPrivate":0,"projectId":"d37e62","snapshot":null,"tags":null,"title":"button by hamoode-taha-04","updated":"2024-01-22T16:59:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":40,"cssLen":794,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".ui-btn {\n cursor: pointer;\n border-radius: 5px;\n color: rgb(219, 218, 218);\n border-style: solid;\n background-color: transparent;\n border-color: rgb(219, 218, 218);\n width: 120px;\n height: 40px;\n transition: 0.2s ease;\n text-transform: uppercase;\n border-width: 2px;\n font-weight: 500;\n font-size: 18px;\n letter-spacing: 2px;\n}\n.ui-btn:hover {\n color: rgb(247, 247, 247);\n background-color: rgb(0, 81, 255);\n border-color: rgb(0, 81, 255);\n text-shadow: 0 0 50px white, 0 0 20px white, 0 0 15px white;\n box-shadow: 0 0 50px rgb(0, 81, 255), 0 0 30px rgb(0, 81, 255),\n 0 0 60px rgb(0, 81, 255), 0 0 120px rgb(0, 81, 255);\n font-size: 20px;\n width: 130px;\n height: 50px;\n letter-spacing: 3px;\n}\n.ui-btn:active {\n width: 115px;\n height: 38px;\n letter-spacing: 0px;\n}\n"},{"created":"2024-01-22T16:59:58.000Z","isPrivate":0,"projectId":"60b8f9","snapshot":null,"tags":null,"title":"button by EmmaxPlay","updated":"2024-01-22T16:59:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":1112,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn {\n padding: 0.9em 1.6em;\n border: none;\n outline: none;\n color: #FFF;\n font-family: inherit;\n font-weight: 500;\n font-size: 17px;\n cursor: pointer;\n position: relative;\n z-index: 0;\n border-radius: 12px;\n}\n\n.btn::after {\n content: \"\";\n z-index: -1;\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgb(46, 46, 46);\n left: 0;\n top: 0;\n border-radius: 10px;\n}\n/* glow */\n.btn::before {\n content: \"\";\n background: linear-gradient(\n 45deg,\n #FF0000, #002BFF, #FF00C8, #002BFF,\n #FF0000, #002BFF, #FF00C8, #002BFF\n);\n position: absolute;\n top: -2px;\n left: -2px;\n background-size: 600%;\n z-index: -1;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n filter: blur(8px);\n animation: glowing 20s linear infinite;\n transition: opacity .3s ease-in-out;\n border-radius: 10px;\n opacity: 0;\n}\n\n@keyframes glowing {\n 0% {\n background-position: 0 0;\n }\n\n 50% {\n background-position: 400% 0;\n }\n\n 100% {\n background-position: 0 0;\n }\n}\n\n/* hover */\n.btn:hover::before {\n opacity: 1;\n}\n\n.btn:active:after {\n background: transparent;\n}\n\n.btn:active {\n color: #000;\n font-weight: bold;\n}"},{"created":"2024-01-22T16:59:58.000Z","isPrivate":0,"projectId":"434d00","snapshot":null,"tags":null,"title":"button by ahmed150up2","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":606,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" ","css":".button {\n --key-text-color: #969faf;\n --docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,0.4);\n --docsearch-key-gradient: linear-gradient(-225deg,#d5dbe4,#f8f8f8);\n border: none;\n background: var(--docsearch-key-gradient);\n border-radius: 3px;\n box-shadow: var(--docsearch-key-shadow);\n color: var(--key-text-color);\n height: 2.5em;\n text-align: center;\n padding: 0.6em;\n margin: 0 0.6em;\n display: inline-block;\n text-transform: uppercase;\n font-weight: bold;\n font-size: 1em;\n min-width: 1em;\n line-height: 1em;\n user-select: none;\n}\n\n"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"867f5d","snapshot":null,"tags":null,"title":"button by aseel-al-zubaidi_pwcit","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":47,"cssLen":2118,"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 cursor: pointer;\n outline: none;\n border: 0;\n vertical-align: middle;\n text-decoration: none;\n font-family: inherit;\n font-size: 15px;\n}\n\nbutton.learn-more {\n font-weight: 600;\n color: #e88d14;\n text-transform: uppercase;\n padding: 1.25em 2em;\n background: #ad1b02;\n border: 2px solid #f3be26;\n border-radius: 0.75em;\n -webkit-transform-style: preserve-3d;\n transform-style: preserve-3d;\n -webkit-transition: background 150ms cubic-bezier(0, 0, 0.58, 1),\n -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);\n transition: transform 150ms cubic-bezier(0, 0, 0.58, 1),\n background 150ms cubic-bezier(0, 0, 0.58, 1),\n -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);\n}\n\nbutton.learn-more::before {\n position: absolute;\n content: \"\";\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: #f3be26;\n border-radius: inherit;\n -webkit-box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2;\n box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2;\n -webkit-transform: translate3d(0, 0.75em, -1em);\n transform: translate3d(0, 0.75em, -1em);\n transition: transform 150ms cubic-bezier(0, 0, 0.58, 1),\n box-shadow 150ms cubic-bezier(0, 0, 0.58, 1),\n -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1),\n -webkit-box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);\n}\n\nbutton.learn-more:hover {\n background: #ffe9e9;\n -webkit-transform: translate(0, 0.25em);\n transform: translate(0, 0.25em);\n}\n\nbutton.learn-more:hover::before {\n -webkit-box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2;\n box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2;\n -webkit-transform: translate3d(0, 0.5em, -1em);\n transform: translate3d(0, 0.5em, -1em);\n}\n\nbutton.learn-more:active {\n background: #ffe9e9;\n -webkit-transform: translate(0em, 0.75em);\n transform: translate(0em, 0.75em);\n}\n\nbutton.learn-more:active::before {\n -webkit-box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2;\n box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2;\n -webkit-transform: translate3d(0, 0, -1em);\n transform: translate3d(0, 0, -1em);\n}\n"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"3b5f68","snapshot":null,"tags":null,"title":"button by Rodrypaladin","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":723,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n padding: 10px 20px;\n font-size: 1.1rem;\n background-color: rgb(89, 182, 35);\n border: none;\n color: white;\n position: relative;\n width: 120px;\n height: 45px;\n transition: background-color 0.2s ease-in, all 0.15s ease-in;\n}\n\nbutton::after {\n display: flex;\n align-items: center;\n justify-content: center;\n content: \"Button\";\n width: 120px;\n height: 45px;\n position: absolute;\n top: 0;\n left: 0;\n transform: translate(5px, 5px);\n background-color: rgb(53, 144, 0);\n color: white;\n transition: all 0.15s ease-in;\n}\n\nbutton:hover::after {\n transform: translate(-5px, -6px);\n}\n\nbutton:hover {\n transform: translate(5px, 5px);\n}\n\nbutton:active::after {\n background-color: rgb(232, 255, 219);\n}"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"cd2ba8","snapshot":null,"tags":null,"title":"button by mi-series","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":195,"cssLen":2193,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".container {\n border: none;\n}\n\n.container .card {\n background-color: white;\n border-radius: 10px;\n border: 1px solid black;\n position: relative;\n z-index: 0;\n transition: all 300ms ease-out;\n transform-origin: center center;\n width: 150px;\n height: 50px;\n box-shadow: 0px;\n outline: none;\n}\n\n.card-header {\n padding: 10px;\n background: linear-gradient(90deg, #CB2D6F 20px, transparent 100%) center / 22px 22px,\n\t\tlinear-gradient(#CB2D6F 20px, transparent 100%) center / 22px 22px,\n\t\t#fff;\n color: white;\n height: 100%;\n font-size: 20px;\n font-weight: 600;\n border: 1px solid white;\n border-radius: 10px;\n}\n\n.container .card .border {\n transition: all 300ms ease-out;\n transform-origin: center center;\n position: absolute;\n top: 6px;\n left: 6px;\n width: calc(100% - 0px);\n height: calc(100% - 0px);\n border: 1px solid black;\n border-radius: 9px;\n}\n\n.container a {\n opacity: 0;\n position: absolute;\n z-index: 1;\n width: 50%;\n height: 50%;\n}\n\n.container a:hover,\n.container a:focus {\n transform: translateZ(50px);\n}\n\n.container a:hover ~ .card .card-header,\n.container a:focus ~ .card .card-header {\n transform: translateZ(24px);\n}\n\n.container a:nth-child(1) {\n top: 0;\n left: 0;\n}\n\n.container a:nth-child(1):hover ~ .card,\n.container a:nth-child(1):focus ~ .card {\n transform: rotateX(10deg) rotateY(-10deg) translateZ(0);\n transform-origin: right bottom;\n box-shadow: 10px 20px;\n}\n\n.container a:nth-child(2) {\n top: 0;\n right: 0;\n}\n\n.container a:nth-child(2):hover ~ .card,\n.container a:nth-child(2):focus ~ .card {\n transform: rotateX(10deg) rotateY(10deg) translateZ(0);\n transform-origin: left bottom;\n box-shadow: -10px 20px;\n}\n\n.container a:nth-child(3) {\n bottom: 0;\n right: 0;\n}\n\n.container a:nth-child(3):hover ~ .card ,\n.container a:nth-child(3):focus ~ .card {\n transform-origin: left top;\n transform: rotateX(-10deg) rotateY(10deg) translateZ(0);\n box-shadow: -10px -20px;\n}\n\n.container a:nth-child(4) {\n bottom: 0;\n left: 0;\n}\n\n.container a:nth-child(4):hover ~ .card,\n.container a:nth-child(4):focus ~ .card {\n transform-origin: right top;\n transform: rotateX(-10deg) rotateY(-10deg) translateZ(0);\n box-shadow: 10px -20px;\n}"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"eecaa0","snapshot":null,"tags":null,"title":"button by NAKAMOZ","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":856,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n cursor: pointer;\n background-color: transparent;\n color: white;\n border: none;\n font-size: 17px;\n position: relative;\n z-index: 3;\n transition: 0.5s;\n -webkit-transition: 0.5s;\n -moz-transition: 0.5s;\n -ms-transition: 0.5s;\n -o-transition: 0.5s;\n}\n\nbutton::before {\n content: \"\";\n border: 3px solid white;\n position: absolute;\n left: -25px;\n bottom: 0;\n display: block;\n width: 10px;\n height: 10px;\n border-radius: 60px;\n -webkit-border-radius: 60px;\n -moz-border-radius: 60px;\n -ms-border-radius: 60px;\n -o-border-radius: 60px;\n transition: 0.5s;\n -webkit-transition: 0.5s;\n -moz-transition: 0.5s;\n -ms-transition: 0.5s;\n -o-transition: 0.5s;\n}\n\nbutton:hover::before {\n left: -25px;\n bottom: -17.5px;\n width: 100%;\n padding: 20px;\n background-color: white;\n z-index: -1;\n}\n\nbutton:hover {\n color: #282828;\n}\n"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"2f3c67","snapshot":null,"tags":null,"title":"button by deepak16375","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":45,"cssLen":421,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n font-size: 17px;\n font-weight: bold;\n border: 0px;\n color: white;\n background-color: #1877f2;\n padding: 1rem 2rem;\n border-radius: 15px;\n cursor: pointer;\n}\n\n.button:hover {\n background-image: linear-gradient(90deg,\n\t\t#B799FF 0%,\n\t\t#ACBCFF 50%,\n\t\t#AEE2FF 75%,\n\t\t#E6FFFD 100%);\n color: black;\n animation: slide 10s linear infinite;\n}\n\n@keyframes slide {\n 100% {\n background-position: 50rem;\n }\n}"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"3e9cca","snapshot":null,"tags":null,"title":"button by Ratinax","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":79,"cssLen":511,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".container {\n position: relative;\n width: 4.5em;\n height: 4em;\n background-color: red;\n overflow: hidden;\n border-radius: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n scale: 2;\n box-shadow: 0 .5em #AA1111;\n}\n\n.button {\n cursor: pointer;\n position: absolute;\n text-transform: uppercase;\n height: 110%;\n width: 110%;\n background-color: red;\n color: white;\n text-shadow: 0 0.1em 0.1em black;\n}\n\n.container:has(.button:active) {\n box-shadow: none;\n margin-top: 2em;\n}\n"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"b33253","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":388,"cssLen":1116,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".Btn {\n width: 120px;\n height: 45px;\n background-color: rgb(65, 64, 64);\n border: none;\n box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.342);\n border-radius: 5px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 7px;\n position: relative;\n overflow: hidden;\n transition-duration: .5s;\n}\n\n.text {\n color: rgb(184, 236, 104);\n font-weight: 800;\n letter-spacing: 1.1px;\n z-index: 2;\n}\n\n.svgIcon {\n z-index: 2;\n}\n\n.svgIcon path {\n fill: rgb(184, 236, 104);\n}\n\n.Btn:hover {\n color: rgb(230, 255, 193);\n}\n\n.effect {\n position: absolute;\n width: 10px;\n height: 10px;\n background-color: rgb(184, 236, 104);\n border-radius: 50%;\n z-index: 1;\n opacity: 0;\n transition-duration: .5s;\n}\n\n.Btn:hover .effect {\n transform: scale(15);\n transform-origin: center;\n opacity: 1;\n transition-duration: .5s;\n}\n\n.Btn:hover {\n box-shadow: 0px 0px 5px rgb(184, 236, 104),\n 0px 0px 10px rgb(184, 236, 104),\n 0px 0px 30px rgb(184, 236, 104);\n transition-duration: .7s;\n}\n\n.Btn:hover .text {\n color: rgb(65, 64, 64);\n}\n\n.Btn:hover .svgIcon path {\n fill: rgb(65, 64, 64);\n}"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"29b955","snapshot":null,"tags":null,"title":"button by Yaya12085","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":778,"cssLen":1095,"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: #0163E0;\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: 30px;\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: 150px;\n border-radius: 40px;\n transition-duration: .3s;\n}\n\n.Btn:hover .sign {\n width: 30%;\n transition-duration: .3s;\n padding-left: 10px;\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}