{"loaderData":{"0":null,"0-3":{"total":7308,"projects":[{"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}"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"4f336d","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":170,"cssLen":1358,"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 font-family: inherit;\n font-size: 18px;\n border-radius: 40em;\n width: 8em;\n height: 3em;\n z-index: 1;\n color: white;\n overflow: hidden;\n border: none;\n}\n\nbutton .text {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n line-height: 3em;\n border-radius: 40em;\n border: none;\n background: linear-gradient(rgba(255, 255, 255, 0.473), rgba(150, 150, 150, 0.25));\n z-index: 1;\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n}\n\nbutton .blob {\n position: absolute;\n z-index: -1;\n border-radius: 5em;\n width: 5em;\n height: 3em;\n transition: transform .3s ease-in-out, background .3s ease-in-out;\n}\n\nbutton .blob:nth-child(2) {\n left: 0em;\n top: 0;\n background: #ff5656;\n}\n\nbutton .blob:nth-child(3) {\n left: 1.8em;\n top: 0;\n z-index: -1;\n background: #f9ca24;\n}\n\nbutton .blob:nth-child(4) {\n left: 4em;\n top: -1em;\n background: #ff9f1a;\n}\n\nbutton .blob:nth-child(5) {\n left: 4.3em;\n top: 1.6em;\n background: #00a8ff;\n}\n\nbutton:hover .blob:nth-child(2) {\n background: #00a8ff;\n}\n\nbutton:hover .blob:nth-child(3) {\n background: #ff9f1a;\n}\n\nbutton:hover .blob:nth-child(4) {\n background: #f9ca24;\n}\n\nbutton:hover .blob:nth-child(5) {\n background: #ff5656;\n}\n\nbutton:hover .blob {\n transform: scale(1.3);\n}\n\nbutton:active {\n border: 2px solid white;\n}"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"236d80","snapshot":null,"tags":null,"title":"button by TISEPSE","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":61,"cssLen":868,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"Hover me \n","css":".bck-grnd {\n position: relative;\n display: flex;\n background-color: #dac0a3;\n padding: 15px 20px;\n font-size: 25px;\n color: black;\n text-decoration: none;\n border: 3px solid transparent;\n overflow: hidden;\n font-family: \"Gill Sans\", \"Gill Sans MT\", Calibri, \"Trebuchet MS\", sans-serif;\n z-index: 2;\n border-radius: 10px;\n letter-spacing: 3px;\n box-shadow: 0 0.4rem #eadbc8;\n box-shadow: 0.4rem 0.4rem 0 #eadbc8;\n transition: 0.5s;\n}\n\n.bck-grnd .style {\n background: #f8f0e5;\n height: 150px;\n width: 100%;\n position: absolute;\n left: 0;\n bottom: 0;\n border-radius: 30px 30px 0px 0px;\n top: 120%;\n z-index: -1;\n transition: 0.5s;\n}\n\n.bck-grnd:hover .style {\n top: -70%;\n border-radius: 50px 50px 0px 0px;\n}\n\n.bck-grnd:hover {\n color: #d8ba98;\n border: 3px solid #dac0a3;\n box-shadow: none;\n}\n\n.bck-grnd:active {\n transform: scale(1.1);\n}\n"}]}},"actionData":null,"errors":null}