{"loaderData":{"0":null,"0-2":{"total":7091,"projects":[{"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}"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"7a34c1","snapshot":null,"tags":null,"title":"button by ShrinilDhorda","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1300,"cssLen":1594,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" ","css":".crushbtn {\n font-size: 2rem;\n padding: 0.7rem 2.4rem;\n letter-spacing: .3rem;\n border-radius: 1.5rem;\n position: relative;\n background-color: #e8e8e8;\n color: red;\n border: none;\n text-shadow: 0 0 3px #ff6e6e;\n overflow: hidden;\n cursor: pointer;\n transition: 0.7s;\n z-index: 2;\n}\n\n.heart1 svg {\n position: absolute;\n left: 4.5rem;\n top: 1.8rem;\n opacity: 0;\n fill: red;\n stroke: none;\n transition: 0.7s;\n width: 2rem;\n height: 2rem;\n animation: move1 5s ease-in-out infinite alternate-reverse;\n}\n\n.heart2 svg {\n position: absolute;\n left: 0.8rem;\n opacity: 0;\n top: 0.3rem;\n width: 1.5rem;\n height: 1.5rem;\n fill: red;\n stroke: none;\n transform: rotate(-20deg );\n animation: move2 5s ease infinite alternate-reverse;\n}\n\n.heart3 svg {\n position: absolute;\n right: 1rem;\n top: 0.5rem;\n opacity: 0;\n width: 1.4rem;\n height: 1.4rem;\n transform: rotate(20deg);\n fill: red;\n stroke: none;\n z-index: -1;\n animation: move3 5s ease infinite alternate-reverse;\n}\n\n@keyframes move1 {\n 0% {\n top: 2rem;\n }\n\n 50% {\n top: 4rem;\n }\n\n 100% {\n top: 2rem;\n }\n}\n\n@keyframes move2 {\n 0% {\n top: 0.3rem;\n }\n\n 50% {\n top: 1.5rem;\n }\n\n 100% {\n top: 0.3rem;\n }\n}\n\n@keyframes move3 {\n 0% {\n top: 1.5rem;\n }\n\n 50% {\n top: .6rem;\n }\n\n 100% {\n top: 1.5rem;\n }\n}\n\n.crushbtn:hover .heart1 svg,\n.crushbtn:hover .heart2 svg,\n.crushbtn:hover .heart3 svg {\n opacity: 1;\n filter: drop-shadow(0 0 10px #ff6e6e)\n}\n\n.crushbtn:hover {\n color: red;\n box-shadow: 0 0 10px inset #ff6e6e;\n scale: 105%;\n}\n\n.crushbtn:active {\n scale: 100%;\n}"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"2ce7b6","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1808,"cssLen":952,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n width: 140px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 10px;\n padding: 0px 15px;\n background-color: red;\n border-radius: 10px;\n border: none;\n color: white;\n position: relative;\n cursor: pointer;\n font-weight: 900;\n transition-duration: .2s;\n}\n\n.game path {\n color: white;\n}\n\n.button .arrow {\n position: absolute;\n right: 0;\n padding: 0px 5px;\n width: 30px;\n height: 100%;\n font-size: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.button:hover,\n.button:focus {\n background-color: black;\n transition-duration: .2s;\n}\n\n.button:hover .arrow {\n animation: slide-right .6s ease-out both;\n}\n/* arrow animation */\n@keyframes slide-right {\n 0% {\n transform: translateX(-10px);\n opacity: 0;\n }\n\n 100% {\n transform: translateX(0);\n opacity: 1;\n }\n}\n\n.button:active {\n transform: translate(1px , 1px);\n transition-duration: .2s;\n}"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"853cd0","snapshot":null,"tags":null,"title":"button by kalp-lathia","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":116,"cssLen":1583,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n --bg-color: rgb(0, 119, 255);\n --color: white;\n --border-radius: 1rem;\n --animation-duaration: 1s;\n --height: 4rem;\n --span-width: 1.5rem;\n --base-pos: 0rem;\n --final-pos: -2rem\n}\n\n.button, .left, .right {\n height: var(--height);\n background-color: var(--bg-color);\n transition: all var(--animation-duaration) ease-in-out;\n}\n\n.button {\n position: relative;\n font-size: 1rem;\n padding: 0rem 2.5rem;\n color: var(--color);\n border: none;\n border-radius: var(--border-radius);\n cursor: pointer;\n}\n\n.left, .right {\n width: var(--span-width);\n position: absolute;\n top: 0rem;\n}\n\n.left {\n left: var(--base-pos);\n border-radius: var(--border-radius) 0rem 0rem var(--border-radius);\n}\n\n.right {\n right: var(--base-pos);\n border-radius: 0rem var(--border-radius) var(--border-radius) 0rem;\n}\n\n.button:hover {\n animation: button-radius var(--animation-duaration) infinite ease-in-out;\n}\n\n.button:hover .left {\n animation: left-shake var(--animation-duaration) infinite ease-in-out;\n}\n\n.button:hover .right {\n animation: right-shake var(--animation-duaration) infinite ease-in-out;\n}\n\n@keyframes button-radius {\n 0% {\n border-radius: var(--border-radius);\n }\n\n 50% {\n border-radius: 0rem;\n }\n\n 100% {\n border-radius: var(--border-radius);\n }\n}\n\n@keyframes left-shake {\n 0% {\n left: var(--base-pos);\n }\n\n 50% {\n left: var(--final-pos);\n }\n\n 100% {\n left: var(--base-pos);\n }\n}\n\n@keyframes right-shake {\n 0% {\n right: var(--base-pos);\n }\n\n 50% {\n right: var(--final-pos);\n }\n\n 100% {\n right: var(--base-pos);\n }\n}"}]}},"actionData":null,"errors":null}