{"loaderData":{"0":null,"0-2":{"total":7091,"projects":[{"created":"2024-01-22T17:00:05.000Z","isPrivate":0,"projectId":"d00486","snapshot":null,"tags":null,"title":"button by svqantonio","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3629,"cssLen":2003,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

","css":".main {\n display: flex;\n flex-direction: column;\n gap: 0.5em;\n}\n\n.up {\n display: flex;\n flex-direction: row;\n gap: 0.5em;\n}\n\n.down {\n display: flex;\n flex-direction: row;\n gap: 0.5em;\n}\n\n.card1 {\n width: 90px;\n height: 90px;\n outline: none;\n border: none;\n background: white;\n border-radius: 90px 5px 5px 5px;\n box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\n transition: .2s ease-in-out;\n}\n\n.instagram {\n margin-top: 1.5em;\n margin-left: 1.2em;\n fill: #cc39a4;\n}\n\n.card2 {\n width: 90px;\n height: 90px;\n outline: none;\n border: none;\n background: white;\n border-radius: 5px 90px 5px 5px;\n box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\n transition: .2s ease-in-out;\n}\n\n.facebook {\n margin-top: 1.5em;\n margin-left: -.9em;\n fill: #03A9F4;\n}\n\n.card3 {\n width: 90px;\n height: 90px;\n outline: none;\n border: none;\n background: white;\n border-radius: 5px 5px 5px 90px;\n box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\n transition: .2s ease-in-out;\n}\n\n.whatsapp {\n margin-top: -.6em;\n margin-left: 1.2em;\n fill: #00ff00;\n}\n\n.card4 {\n width: 90px;\n height: 90px;\n outline: none;\n border: none;\n background: white;\n border-radius: 5px 5px 90px 5px;\n box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\n transition: .2s ease-in-out;\n}\n\n.gmail {\n margin-top: -.9em;\n margin-left: -1.2em;\n fill: #f14336;\n}\n\n.card1:hover {\n cursor: pointer;\n scale: 1.1;\n background-color: #cc39a4;\n}\n\n.card1:hover .instagram {\n fill: white;\n}\n\n.card2:hover {\n cursor: pointer;\n scale: 1.1;\n background-color: #1877f2;\n}\n\n.card2:hover .facebook {\n fill: white;\n}\n\n.card3:hover {\n cursor: pointer;\n scale: 1.1;\n background-color: #00ff00;\n}\n\n.card3:hover .whatsapp {\n fill: white;\n}\n\n.card4:hover {\n cursor: pointer;\n scale: 1.1;\n background-color: #FF0004;\n}\n\n.card4:hover .gmail {\n fill: white;\n}"},{"created":"2024-01-22T17:00:05.000Z","isPrivate":0,"projectId":"836ca2","snapshot":null,"tags":null,"title":"button by vishalparajuli","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":116,"cssLen":646,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

rocket

roll

","css":".button {\n width: 100px;\n height: 50px;\n position: relative;\n perspective: 800px;\n}\n\n.button__front,\n .button__back {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n font-weight: bold;\n text-transform: uppercase;\n color: #fff;\n background-color: #3498db;\n border-radius: 5px;\n position: absolute;\n backface-visibility: hidden;\n transition: transform 0.5s ease;\n}\n\n.button__back {\n background-color: #e74c3c;\n transform: rotateY(180deg);\n}\n\n.button:hover .button__front {\n transform: rotateY(-180deg);\n}\n\n.button:hover .button__back {\n transform: rotateY(0);\n}"},{"created":"2024-01-22T17:00:05.000Z","isPrivate":0,"projectId":"3c4b01","snapshot":null,"tags":null,"title":"button by bhaveshxrawat","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":608,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background-color: #fff;\n border-radius: 24px;\n border-style: none;\n box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0;\n box-sizing: border-box;\n color: #3c4043;\n font-size: 14px;\n font-weight: 500;\n font-family: inherit;\n letter-spacing: .25px;\n line-height: normal;\n padding: 11px 24px;\n transition: background box-shadow 280ms ease;\n}\n\nbutton:hover {\n background: #F6F9FE;\n color: #174ea6;\n}\n\nbutton:active {\n box-shadow: 0 4px 4px 0 rgb(60 64 67 / 30%), 0 8px 12px 6px rgb(60 64 67 / 15%);\n outline: none;\n border: 2px solid #4285f4;\n}\n"},{"created":"2024-01-22T17:00:05.000Z","isPrivate":0,"projectId":"344810","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":381,"cssLen":844,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n","css":".signupBtn {\n width: 120px;\n height: 40px;\n border-radius: 30px;\n border: none;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding-left: 20px;\n gap: 9px;\n color: white;\n background: linear-gradient(to right,rgb(128, 128, 255),rgb(183, 128, 255));\n position: relative;\n cursor: pointer;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.212);\n}\n\n.arrow {\n position: absolute;\n right: 7.5px;\n background-color: rgb(255, 255, 255);\n width: 25px;\n height: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n}\n\n.signupBtn:hover .arrow {\n animation: slide-in-left 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;\n}\n\n@keyframes slide-in-left {\n 0% {\n transform: translateX(-10px);\n opacity: 0;\n }\n\n 100% {\n transform: translateX(0);\n opacity: 1;\n }\n}"},{"created":"2024-01-22T17:00:05.000Z","isPrivate":0,"projectId":"4b24a3","snapshot":null,"tags":null,"title":"button by Kemboi-Dun","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":55,"cssLen":698,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" ","css":".btn {\n font-size: 17px;\n background: transparent;\n border: none;\n padding: 1em 1.5em;\n color: #f8f8f8;\n text-transform: uppercase;\n position: relative;\n transition: .5s ease;\n cursor: pointer;\n}\n\n.btn::before {\n content: '';\n position: absolute;\n right: 0;\n top: 0;\n height: 2px;\n width: 0;\n background-color: #f8f8f8;\n transition: .5s ease;\n}\n\n.btn:hover {\n color: #181818;\n transition-delay: .5s;\n}\n\n.btn:hover::before {\n width: 100%;\n}\n\n.btn::after {\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n height: 0;\n width: 100%;\n background-color: #f8f8f8;\n transition: .4s ease;\n z-index: -1;\n}\n\n.btn:hover::after {\n height: 100%;\n transition-delay: 0.4s;\n}"},{"created":"2024-01-22T17:00:05.000Z","isPrivate":0,"projectId":"f0a91e","snapshot":null,"tags":null,"title":"button by KhaledMatalkah","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":725,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n background: transparent;\n color: #fff;\n padding: 10px 20px;\n font-size: 18px;\n border-radius: 5px;\n cursor: pointer;\n border: 2px solid rgba(255, 255, 255, 0.5);\n backdrop-filter: blur(5px);\n transition: background-color 0.3s ease-in-out;\n position: relative;\n overflow: hidden;\n}\n\n.button:before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);\n transform: translateX(-100%);\n transition: transform 0.3s ease-in-out;\n pointer-events: none;\n}\n\n.button:hover {\n background-color: rgba(255, 255, 255, 0.2);\n}\n\n.button:hover:before {\n transform: translateX(0);\n}\n"},{"created":"2024-01-22T17:00:05.000Z","isPrivate":0,"projectId":"4df1dc","snapshot":null,"tags":null,"title":"button by sahilxkhadka","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":41,"cssLen":961,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n all: unset;\n position: relative;\n height: 4em;\n width: 10em;\n padding: 8px 24px;\n border-radius: 10px;\n background: linear-gradient(180deg, #282828, #202020);\n box-shadow: inset -8px 0 8px rgba(0, 0, 0, 0.15),\n inset 0 -8px 8px rgba(0, 0, 0, 0.25),\n 0 0 0 2px rgba(0, 0, 0, 0.75),\n 10px 20px 25px rgba(0, 0, 0, 0.4);\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n}\n\nbutton::before {\n content: \"\";\n position: absolute;\n top: 3px;\n left: 4px;\n bottom: 14px;\n right: 12px;\n background: linear-gradient(90deg, #232323, #4a4a4a);\n border-radius: 10px;\n box-shadow: -10px -10px 10px rgba(255, 255, 255, 0.25),\n 10px 5px 10px rgba(0, 0, 0, 0.15);\n border-left: 1px solid #0004;\n border-bottom: 1px solid #0004;\n border-top: 1px solid #0009;\n}\n\nbutton span {\n font-size: 1.5rem;\n color: white;\n position: relative;\n margin-top: -8px;\n}"},{"created":"2024-01-22T17:00:05.000Z","isPrivate":0,"projectId":"1a4fc9","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":906,"cssLen":506,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n width: 100px;\n height: 32px;\n background-color: #55acee;\n border-radius: 4px;\n border: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n padding: 0 8px;\n justify-content: space-between;\n transition: all 0.3s;\n}\n\nbutton:hover {\n opacity: 0.85;\n transform: translateY(-4px);\n}\n\nbutton .label {\n font-size: 12px;\n line-height: 32px;\n color: #fff;\n font-weight: 700;\n letter-spacing: 1px;\n margin: 0 auto;\n}\n\nbutton svg {\n fill: #fff;\n width: 30px;\n height: 30px;\n}"},{"created":"2024-01-22T17:00:05.000Z","isPrivate":0,"projectId":"019193","snapshot":null,"tags":null,"title":"button by sarra-thabet","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1748,"cssLen":807,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n background: transparent;\n position: relative;\n padding: 5px 15px;\n display: flex;\n align-items: center;\n font-size: 17px;\n font-weight: 600;\n text-decoration: none;\n cursor: pointer;\n border: 1px solid black;\n border-radius: 25px;\n outline: none;\n overflow: hidden;\n color: black;\n transition: color 0.3s 0.1s ease-out;\n text-align: center;\n}\n\nbutton span {\n margin: 10px;\n}\n\nbutton::before {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n content: \"\";\n border-radius: 50%;\n display: block;\n width: 20em;\n height: 20em;\n left: -5em;\n text-align: center;\n transition: box-shadow 0.5s ease-out;\n z-index: -1;\n}\n\nbutton:hover {\n color: #fff;\n border: 1px solid black;\n}\n\nbutton:hover::before {\n box-shadow: inset 0 0 0 10em black;\n}\n"},{"created":"2024-01-22T17:00:05.000Z","isPrivate":0,"projectId":"b44d29","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":14904,"cssLen":7463,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".pointer-events-none {\n pointer-events: none\n}\n\n.absolute {\n position: absolute\n}\n\n.relative {\n position: relative\n}\n\n.left-1\\/2 {\n left: 50%\n}\n\n.top-1\\/2 {\n top: 50%\n}\n\n.z-10 {\n z-index: 10\n}\n\n.flex {\n display: flex\n}\n\n.h-\\[10px\\] {\n height: 10px\n}\n\n.h-\\[60px\\] {\n height: 60px\n}\n\n.w-\\[10px\\] {\n width: 10px\n}\n\n.w-\\[120px\\] {\n width: 120px\n}\n\n.-translate-x-1\\/2 {\n --tw-translate-x: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}\n\n.-translate-y-1\\/2 {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}\n\n.cursor-default {\n cursor: default\n}\n\n.cursor-pointer {\n cursor: pointer\n}\n\n.flex-wrap {\n flex-wrap: wrap\n}\n\n.overflow-hidden {\n overflow: hidden\n}\n\n.whitespace-nowrap {\n white-space: nowrap\n}\n\n.rounded-lg {\n border-radius: 0.5rem\n}\n\n.bg-\\[rgb\\(30\\2c 41\\2c 59\\)\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(30 41 59 / var(--tw-bg-opacity))\n}\n\n.bg-\\[linear-gradient\\(144deg\\2c _\\#af40ff\\2c _\\#5b42f3_50\\%\\2c _\\#00ddeb\\)\\] {\n background-image: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb)\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}\n\n.blur-\\[5px\\] {\n --tw-blur: blur(5px);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)\n}\n\n.delay-0 {\n transition-delay: 0s\n}\n\n.delay-\\[0\\.2s\\] {\n transition-delay: 0.2s\n}\n\n.duration-\\[0\\.4s\\] {\n transition-duration: 0.4s\n}\n\n.hover\\:bg-transparent:hover {\n background-color: transparent\n}\n\n.hover\\:delay-0:hover {\n transition-delay: 0s\n}\n\n.hover\\:duration-0:hover {\n transition-duration: 0s\n}\n\n.group:focus .group-focus\\:bg-transparent {\n background-color: transparent\n}\n\n.group:focus .group-focus\\:blur-none {\n --tw-blur: blur(0);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)\n}\n\n.group:focus .group-focus\\:delay-\\[0\\.05s\\] {\n transition-delay: 0.05s\n}\n\n.group:focus .group-focus\\:delay-\\[0\\.15s\\] {\n transition-delay: 0.15s\n}\n\n.group:focus .group-focus\\:delay-\\[0\\.1s\\] {\n transition-delay: 0.1s\n}\n\n.group:focus .group-focus\\:delay-\\[0\\.25s\\] {\n transition-delay: 0.25s\n}\n\n.group:focus .group-focus\\:delay-\\[0\\.2s\\] {\n transition-delay: 0.2s\n}\n\n.group:focus .group-focus\\:delay-\\[0\\.35s\\] {\n transition-delay: 0.35s\n}\n\n.group:focus .group-focus\\:delay-\\[0\\.3s\\] {\n transition-delay: 0.3s\n}\n\n.group:focus .group-focus\\:delay-\\[0\\.45s\\] {\n transition-delay: 0.45s\n}\n\n.group:focus .group-focus\\:delay-\\[0\\.4s\\] {\n transition-delay: 0.4s\n}\n\n.group:focus .group-focus\\:delay-\\[0\\.55s\\] {\n transition-delay: 0.55s\n}\n\n.group:focus .group-focus\\:delay-\\[0\\.5s\\] {\n transition-delay: 0.5s\n}\n\n.group:focus .group-focus\\:delay-\\[0\\.65s\\] {\n transition-delay: 0.65s\n}\n\n.group:focus .group-focus\\:delay-\\[0\\.6s\\] {\n transition-delay: 0.6s\n}\n\n.group:focus .group-focus\\:delay-\\[0\\.75s\\] {\n transition-delay: 0.75s\n}\n\n.group:focus .group-focus\\:delay-\\[0\\.7s\\] {\n transition-delay: 0.7s\n}\n\n.group:focus .group-focus\\:delay-\\[0\\.85s\\] {\n transition-delay: 0.85s\n}\n\n.group:focus .group-focus\\:delay-\\[0\\.8s\\] {\n transition-delay: 0.8s\n}\n\n.group:focus .group-focus\\:delay-\\[0\\.9s\\] {\n transition-delay: 0.9s\n}\n\n.group:focus .group-focus\\:delay-\\[1\\.05s\\] {\n transition-delay: 1.05s\n}\n\n.group:focus .group-focus\\:delay-\\[1\\.15s\\] {\n transition-delay: 1.15s\n}\n\n.group:focus .group-focus\\:delay-\\[1\\.1s\\] {\n transition-delay: 1.1s\n}\n\n.group:focus .group-focus\\:delay-\\[1\\.25s\\] {\n transition-delay: 1.25s\n}\n\n.group:focus .group-focus\\:delay-\\[1\\.2s\\] {\n transition-delay: 1.2s\n}\n\n.group:focus .group-focus\\:delay-\\[1\\.35s\\] {\n transition-delay: 1.35s\n}\n\n.group:focus .group-focus\\:delay-\\[1\\.3s\\] {\n transition-delay: 1.3s\n}\n\n.group:focus .group-focus\\:delay-\\[1\\.45s\\] {\n transition-delay: 1.45s\n}\n\n.group:focus .group-focus\\:delay-\\[1\\.4s\\] {\n transition-delay: 1.4s\n}\n\n.group:focus .group-focus\\:delay-\\[1\\.55s\\] {\n transition-delay: 1.55s\n}\n\n.group:focus .group-focus\\:delay-\\[1\\.5s\\] {\n transition-delay: 1.5s\n}\n\n.group:focus .group-focus\\:delay-\\[1\\.65s\\] {\n transition-delay: 1.65s\n}\n\n.group:focus .group-focus\\:delay-\\[1\\.6s\\] {\n transition-delay: 1.6s\n}\n\n.group:focus .group-focus\\:delay-\\[1\\.75s\\] {\n transition-delay: 1.75s\n}\n\n.group:focus .group-focus\\:delay-\\[1\\.7s\\] {\n transition-delay: 1.7s\n}\n\n.group:focus .group-focus\\:delay-\\[1\\.85s\\] {\n transition-delay: 1.85s\n}\n\n.group:focus .group-focus\\:delay-\\[1\\.8s\\] {\n transition-delay: 1.8s\n}\n\n.group:focus .group-focus\\:delay-\\[1\\.9s\\] {\n transition-delay: 1.9s\n}\n\n.group:focus .group-focus\\:delay-\\[1s\\] {\n transition-delay: 1s\n}\n\n.group:focus .group-focus\\:delay-\\[2\\.05s\\] {\n transition-delay: 2.05s\n}\n\n.group:focus .group-focus\\:delay-\\[2\\.15s\\] {\n transition-delay: 2.15s\n}\n\n.group:focus .group-focus\\:delay-\\[2\\.1s\\] {\n transition-delay: 2.1s\n}\n\n.group:focus .group-focus\\:delay-\\[2\\.25s\\] {\n transition-delay: 2.25s\n}\n\n.group:focus .group-focus\\:delay-\\[2\\.2s\\] {\n transition-delay: 2.2s\n}\n\n.group:focus .group-focus\\:delay-\\[2\\.35s\\] {\n transition-delay: 2.35s\n}\n\n.group:focus .group-focus\\:delay-\\[2\\.3s\\] {\n transition-delay: 2.3s\n}\n\n.group:focus .group-focus\\:delay-\\[2\\.45s\\] {\n transition-delay: 2.45s\n}\n\n.group:focus .group-focus\\:delay-\\[2\\.4s\\] {\n transition-delay: 2.4s\n}\n\n.group:focus .group-focus\\:delay-\\[2\\.55s\\] {\n transition-delay: 2.55s\n}\n\n.group:focus .group-focus\\:delay-\\[2\\.5s\\] {\n transition-delay: 2.5s\n}\n\n.group:focus .group-focus\\:delay-\\[2\\.65s\\] {\n transition-delay: 2.65s\n}\n\n.group:focus .group-focus\\:delay-\\[2\\.6s\\] {\n transition-delay: 2.6s\n}\n\n.group:focus .group-focus\\:delay-\\[2\\.75s\\] {\n transition-delay: 2.75s\n}\n\n.group:focus .group-focus\\:delay-\\[2\\.7s\\] {\n transition-delay: 2.7s\n}\n\n.group:focus .group-focus\\:delay-\\[2\\.85s\\] {\n transition-delay: 2.85s\n}\n\n.group:focus .group-focus\\:delay-\\[2\\.8s\\] {\n transition-delay: 2.8s\n}\n\n.group:focus .group-focus\\:delay-\\[2\\.9s\\] {\n transition-delay: 2.9s\n}\n\n.group:focus .group-focus\\:delay-\\[2s\\] {\n transition-delay: 2s\n}\n\n.group:focus .group-focus\\:delay-\\[3\\.05s\\] {\n transition-delay: 3.05s\n}\n\n.group:focus .group-focus\\:delay-\\[3\\.15s\\] {\n transition-delay: 3.15s\n}\n\n.group:focus .group-focus\\:delay-\\[3\\.1s\\] {\n transition-delay: 3.1s\n}\n\n.group:focus .group-focus\\:delay-\\[3\\.25s\\] {\n transition-delay: 3.25s\n}\n\n.group:focus .group-focus\\:delay-\\[3\\.2s\\] {\n transition-delay: 3.2s\n}\n\n.group:focus .group-focus\\:delay-\\[3\\.35s\\] {\n transition-delay: 3.35s\n}\n\n.group:focus .group-focus\\:delay-\\[3\\.3s\\] {\n transition-delay: 3.3s\n}\n\n.group:focus .group-focus\\:delay-\\[3\\.45s\\] {\n transition-delay: 3.45s\n}\n\n.group:focus .group-focus\\:delay-\\[3\\.4s\\] {\n transition-delay: 3.4s\n}\n\n.group:focus .group-focus\\:delay-\\[3\\.55s\\] {\n transition-delay: 3.55s\n}\n\n.group:focus .group-focus\\:delay-\\[3\\.5s\\] {\n transition-delay: 3.5s\n}\n\n.group:focus .group-focus\\:delay-\\[3\\.65s\\] {\n transition-delay: 3.65s\n}\n\n.group:focus .group-focus\\:delay-\\[3\\.6s\\] {\n transition-delay: 3.6s\n}\n\n.group:focus .group-focus\\:delay-\\[3s\\] {\n transition-delay: 3s\n}"},{"created":"2024-01-22T17:00:05.000Z","isPrivate":0,"projectId":"002d3e","snapshot":null,"tags":null,"title":"button by gharsh11032000","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":55,"cssLen":1022,"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 font-size: 24px;\n font-weight: 600;\n padding: 15px 30px;\n color: #cfef00;\n background-color: transparent;\n border: 2px solid #cfef00;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);\n overflow: hidden;\n}\n\n.button::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n background: #cfef00;\n top: 0%;\n left: -100%;\n scale: 1;\n border-radius: inherit;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.button span {\n transition: all 0.7s;\n position: relative;\n overflow: hidden;\n}\n\n.button span::before {\n position: absolute;\n content: 'Hover!';\n top: 0;\n left: 0;\n color: #212121;\n width: 0;\n overflow: hidden;\n}\n\n.button:hover span::before {\n width: 100%;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\n transition-delay: 0.4s;\n}\n\n.button:hover::before {\n scale: 1;\n top: 0%;\n left: 0%;\n}\n\n.button:hover {\n border-color: transparent;\n}\n\n.button:active {\n scale: 0.9;\n}\n"},{"created":"2024-01-22T17:00:05.000Z","isPrivate":0,"projectId":"239375","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":634,"cssLen":753,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n \n \n\n","css":".cursor-pointer {\n cursor: pointer;\n}\n.fill-none {\n fill: none;\n}\n.stroke-green-400 {\n stroke: #4ade80;\n}\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.hover\\:rotate-90:hover {\n --tw-rotate: 90deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.group:hover .group-hover\\:fill-green-800 {\n fill: #166534;\n}\n.group:active .group-active\\:fill-green-600 {\n fill: #16a34a;\n}\n.group:active .group-active\\:stroke-green-200 {\n stroke: #bbf7d0;\n}\n.group:active .group-active\\:duration-0 {\n transition-duration: 0s;\n}\n"}]}},"actionData":null,"errors":null}