{"loaderData":{"0":null,"0-2":{"total":7074,"projects":[{"created":"2024-01-22T17:00:19.000Z","isPrivate":0,"projectId":"61da42","snapshot":null,"tags":null,"title":"button by Kilian-DM","updated":"2024-01-22T17:00:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":756,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button-3d {\n display: inline-block;\n padding: 0.5em 1em;\n font-size: 1.06em;\n font-weight: bold;\n text-transform: uppercase;\n color: #fff;\n background-color: #8e44ad;\n border: none;\n border-radius: 0.25em;\n box-shadow: 0 0.15em 0.3em rgba(0, 0, 0, 0.3);\n transform: perspective(1em) rotateX(-1deg) rotateY(1deg);\n transition: all 0.2s ease-in-out;\n}\n\n.button-3d:hover {\n transform: perspective(1em) rotateX(-3deg) rotateY(3deg) translateY(-0.05em);\n background-color: #9b59b6;\n box-shadow: 0 0.3em 0.6em rgba(0, 0, 0, 0.3);\n}\n\n.button-3d:focus,\n.button-3d:active {\n transform: perspective(1em) rotateX(-3deg) rotateY(3deg) translateY(-0.05em);\n background-color: #e74c3c;\n box-shadow: 0 0.3em 0.6em rgba(0, 0, 0, 0.3);\n outline: none;\n}"},{"created":"2024-01-22T17:00:19.000Z","isPrivate":0,"projectId":"5284ad","snapshot":null,"tags":null,"title":"button by fcb4355","updated":"2024-01-22T17:00:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":387,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n padding: 7px 10px;\n border: 1px solid #bbb;\n color: #222;\n font-weight: 600;\n cursor: pointer;\n border-radius: 4px;\n box-shadow: 0 10px 20px rgba(0,0,0,0.2);\n transition: all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n.button:hover {\n background-color: #007ffe;\n color: #fff;\n box-shadow: -20px 50px 50px rgba(0,0,0,0.2);\n border: none;\n padding: 10px 20px;\n}"},{"created":"2024-01-22T17:00:19.000Z","isPrivate":0,"projectId":"50968e","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":580,"cssLen":1231,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".c-button {\n color: #000;\n font-weight: 700;\n font-size: 16px;\n text-decoration: none;\n padding: 0.9em 1.6em;\n cursor: pointer;\n display: inline-block;\n vertical-align: middle;\n position: relative;\n z-index: 1;\n}\n\n.c-button--gooey {\n color: black;\n text-transform: uppercase;\n letter-spacing: 2px;\n border: 4px solid black;\n border-radius: 0;\n position: relative;\n transition: all 700ms ease;\n}\n\n.c-button--gooey .c-button__blobs {\n height: 100%;\n filter: url(#goo);\n overflow: hidden;\n position: absolute;\n top: 0;\n left: 0;\n bottom: -3px;\n right: -1px;\n z-index: -1;\n}\n\n.c-button--gooey .c-button__blobs div {\n background-color: black;\n width: 34%;\n height: 100%;\n border-radius: 100%;\n position: absolute;\n transform: scale(1.4) translateY(125%) translateZ(0);\n transition: all 700ms ease;\n}\n\n.c-button--gooey .c-button__blobs div:nth-child(1) {\n left: -5%;\n}\n\n.c-button--gooey .c-button__blobs div:nth-child(2) {\n left: 30%;\n transition-delay: 60ms;\n}\n\n.c-button--gooey .c-button__blobs div:nth-child(3) {\n left: 66%;\n transition-delay: 25ms;\n}\n\n.c-button--gooey:hover {\n color: #fff;\n}\n\n.c-button--gooey:hover .c-button__blobs div {\n transform: scale(1.4) translateY(0) translateZ(0);\n}"},{"created":"2024-01-22T17:00:19.000Z","isPrivate":0,"projectId":"9d63df","snapshot":null,"tags":null,"title":"button by AKAspidey01","updated":"2024-01-22T17:00:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":464,"cssLen":764,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n","css":".first-button {\n background: rgb(115, 15, 209);\n color: #fff;\n border: none;\n font-weight: 700;\n font-size: 1em;\n min-height: 60px;\n width: 200px;\n gap: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition-duration: 0.6s;\n}\n\n.main-section {\n display: flex;\n flex-direction: column;\n height: 60px;\n overflow: hidden;\n align-items: flex-start;\n}\n\n.main-section:hover .second-button , .main-section:hover .first-button {\n transform: translateY(-60px);\n}\n\n.second-button {\n background: rgb(209, 15, 57);\n color: #fff;\n border: none;\n font-weight: 700;\n font-size: 1em;\n min-height: 60px;\n width: 200px;\n gap: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition-duration: 0.6s;\n}\n"},{"created":"2024-01-22T17:00:19.000Z","isPrivate":0,"projectId":"693e7a","snapshot":null,"tags":null,"title":"button by arshshaikh06","updated":"2024-01-22T17:00:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2840,"cssLen":1163,"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":"#button-container {\n position: relative;\n}\n\n.button {\n position: absolute;\n top: 50%;\n left: 50%;\n translate: -50% 50%;\n background: #F4F7F5;\n border: none;\n border-radius: 25px;\n height: 50px;\n width: 50px;\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: 0.3s ease-in;\n}\n\n#share {\n color: #DC0654;\n background: #fbe6ed;\n}\n\n#facebook {\n background: linear-gradient(-160deg, #00D2FF, #3A7BD5);\n}\n\n#instagram {\n background: linear-gradient(135deg, #833AB4, #FD1D1D, #FCB045);\n}\n\n#dribbble {\n background: linear-gradient(-70deg, #D70652, #FF025E);\n}\n\n#github {\n background: linear-gradient(-70deg, #171515, #FF025E);\n}\n\n#youtube {\n background: #FF0000;\n}\n\n#button-container:hover button {\n rotate: 360deg;\n}\n\n#button-container:hover #share {\n rotate: 270deg;\n}\n\n#button-container:hover > #facebook {\n translate: -300% 50%;\n}\n\n#button-container:hover > #instagram {\n translate: -226.78% -126.78%;\n}\n\n#button-container:hover > #dribbble {\n translate: -50% -200%;\n}\n\n#button-container:hover > #github {\n translate: 126.78% -126.78%;\n}\n\n#button-container:hover > #youtube {\n translate: 200% 50%;\n}"},{"created":"2024-01-22T17:00:19.000Z","isPrivate":0,"projectId":"af6ed6","snapshot":null,"tags":null,"title":"button by Philibert-JF","updated":"2024-01-22T17:00:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":225,"cssLen":4044,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n ENTRY\n

\n\n","css":".type--A {\n --line_color: #555555;\n --back_color: #ffecf6;\n}\n\n.button {\n position: relative;\n z-index: 0;\n width: 240px;\n height: 56px;\n text-decoration: none;\n font-size: 14px;\n font-weight: bold;\n color: var(--line_color);\n letter-spacing: 2px;\n transition: all 0.3s ease;\n}\n.button:not(:last-child) {\n margin-bottom: 64px;\n}\n.button__text {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n}\n.button::before,\n.button::after,\n.button__text::before,\n.button__text::after {\n content: \"\";\n position: absolute;\n height: 3px;\n border-radius: 2px;\n background: var(--line_color);\n transition: all 0.5s ease;\n}\n.button::before {\n top: 0;\n left: 54px;\n width: calc(100% - 56px * 2 - 16px);\n}\n.button::after {\n top: 0;\n right: 54px;\n width: 8px;\n}\n.button__text::before {\n bottom: 0;\n right: 54px;\n width: calc(100% - 56px * 2 - 16px);\n}\n.button__text::after {\n bottom: 0;\n left: 54px;\n width: 8px;\n}\n.button__line {\n position: absolute;\n top: 0;\n width: 56px;\n height: 100%;\n overflow: hidden;\n}\n.button__line::before {\n content: \"\";\n position: absolute;\n top: 0;\n width: 150%;\n height: 100%;\n box-sizing: border-box;\n border-radius: 300px;\n border: solid 3px var(--line_color);\n}\n.button__line:nth-child(1),\n.button__line:nth-child(1)::before {\n left: 0;\n}\n.button__line:nth-child(2),\n.button__line:nth-child(2)::before {\n right: 0;\n}\n.button:hover {\n letter-spacing: 6px;\n}\n.button:hover::before,\n.button:hover .button__text::before {\n width: 8px;\n}\n.button:hover::after,\n.button:hover .button__text::after {\n width: calc(100% - 56px * 2 - 16px);\n}\n.button__drow1,\n.button__drow2 {\n position: absolute;\n z-index: -1;\n border-radius: 16px;\n transform-origin: 16px 16px;\n}\n.button__drow1 {\n top: -16px;\n left: 40px;\n width: 32px;\n height: 0;\n transform: rotate(30deg);\n}\n.button__drow2 {\n top: 44px;\n left: 77px;\n width: 32px;\n height: 0;\n transform: rotate(-127deg);\n}\n.button__drow1::before,\n.button__drow1::after,\n.button__drow2::before,\n.button__drow2::after {\n content: \"\";\n position: absolute;\n}\n.button__drow1::before {\n bottom: 0;\n left: 0;\n width: 0;\n height: 32px;\n border-radius: 16px;\n transform-origin: 16px 16px;\n transform: rotate(-60deg);\n}\n.button__drow1::after {\n top: -10px;\n left: 45px;\n width: 0;\n height: 32px;\n border-radius: 16px;\n transform-origin: 16px 16px;\n transform: rotate(69deg);\n}\n.button__drow2::before {\n bottom: 0;\n left: 0;\n width: 0;\n height: 32px;\n border-radius: 16px;\n transform-origin: 16px 16px;\n transform: rotate(-146deg);\n}\n.button__drow2::after {\n bottom: 26px;\n left: -40px;\n width: 0;\n height: 32px;\n border-radius: 16px;\n transform-origin: 16px 16px;\n transform: rotate(-262deg);\n}\n.button__drow1,\n.button__drow1::before,\n.button__drow1::after,\n.button__drow2,\n.button__drow2::before,\n.button__drow2::after {\n background: var(--back_color);\n}\n.button:hover .button__drow1 {\n animation: drow1 ease-in 0.06s;\n animation-fill-mode: forwards;\n}\n.button:hover .button__drow1::before {\n animation: drow2 linear 0.08s 0.06s;\n animation-fill-mode: forwards;\n}\n.button:hover .button__drow1::after {\n animation: drow3 linear 0.03s 0.14s;\n animation-fill-mode: forwards;\n}\n.button:hover .button__drow2 {\n animation: drow4 linear 0.06s 0.2s;\n animation-fill-mode: forwards;\n}\n.button:hover .button__drow2::before {\n animation: drow3 linear 0.03s 0.26s;\n animation-fill-mode: forwards;\n}\n.button:hover .button__drow2::after {\n animation: drow5 linear 0.06s 0.32s;\n animation-fill-mode: forwards;\n}\n@keyframes drow1 {\n 0% {\n height: 0;\n }\n 100% {\n height: 100px;\n }\n}\n@keyframes drow2 {\n 0% {\n width: 0;\n opacity: 0;\n }\n 10% {\n opacity: 0;\n }\n 11% {\n opacity: 1;\n }\n 100% {\n width: 120px;\n }\n}\n@keyframes drow3 {\n 0% {\n width: 0;\n }\n 100% {\n width: 80px;\n }\n}\n@keyframes drow4 {\n 0% {\n height: 0;\n }\n 100% {\n height: 120px;\n }\n}\n@keyframes drow5 {\n 0% {\n width: 0;\n }\n 100% {\n width: 124px;\n }\n}\n"},{"created":"2024-01-22T17:00:19.000Z","isPrivate":0,"projectId":"62db56","snapshot":null,"tags":null,"title":"button by SelfMadeSystem","updated":"2024-01-22T17:00:20.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":678,"cssLen":1557,"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 \n \n \n \n \n \n \n \n \n

\n","css":".button {\n --background: #fefbff;\n --inner-shadow: #9faef9;\n --inner-outline: #34217d;\n --inner-outline-bottom: #fafcfe;\n --inner-outline-middle: #8880d5;\n --inner-outline-outer-top: #fefcff;\n --inner-outline-outer-bottom-1: #29107b;\n --inner-outline-outer-bottom-2: #5b42c4;\n --inner-outline-outer-bottom-3: #200265;\n --line-1: #8676c9;\n --line-2: #5c69ca;\n display: flex;\n gap: 0.4em;\n align-items: center;\n padding: 0.6em 0.8em;\n transition: all 0.3s;\n background: var(--background);\n border-radius: 0.7em;\n\n box-shadow: inset 0px 1px 8px 1px var(--inner-shadow),\n 0px 2px 0px 0px var(--inner-outline-bottom),\n 0px -2px 0px 0px var(--inner-outline),\n -2px -2px 0px 0px var(--inner-outline),\n 2px -2px 0px 0px var(--inner-outline),\n 0px 0px 0px 6px var(--inner-outline-middle),\n 0px -2px 0px 7px var(--inner-outline-outer-top),\n 0px 4px 0px 7px var(--inner-outline-outer-bottom-1),\n 0px 7px 0px 7px var(--inner-outline-outer-bottom-2),\n 0px 10px 0px 7px var(--inner-outline-outer-bottom-3);\n}\n\n.button-icon {\n display: inline-block;\n vertical-align: top;\n width: 1.5em;\n}\n\n.button-icon path {\n stroke-width: 2px;\n stroke: var(--inner-outline);\n stroke-linejoin: round;\n}\n\n.button-lines {\n display: flex;\n flex-direction: column;\n gap: 0.4em;\n}\n\n.button-line-1 {\n height: 0.2em;\n width: 4em;\n border-radius: 10em;\n display: inline-block;\n background: var(--line-1);\n}\n\n.button-line-2 {\n height: 0.2em;\n width: 3em;\n border-radius: 10em;\n display: inline-block;\n background: var(--line-2);\n}\n"},{"created":"2024-01-22T17:00:18.000Z","isPrivate":0,"projectId":"cd343c","snapshot":null,"tags":null,"title":"button by carlosepcc","updated":"2024-01-22T17:00:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":352,"cssLen":2332,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".cursor-pointer{cursor:pointer}.rounded-lg{border-radius:0.5rem}.border-b-\\[4px\\]{border-bottom-width:4px}.border-green-400{--tw-border-opacity:1;border-color:rgb(74 222 128 / var(--tw-border-opacity))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow-green-300{--tw-shadow-color:#86efac;--tw-shadow:var(--tw-shadow-colored)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.hover\\:-translate-y-\\[1px\\]:hover{--tw-translate-y:-1px;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))}.hover\\:border-b-\\[6px\\]:hover{border-bottom-width:6px}.hover\\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.hover\\:shadow-green-300:hover{--tw-shadow-color:#86efac;--tw-shadow:var(--tw-shadow-colored)}.hover\\:brightness-110:hover{--tw-brightness:brightness(1.1);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)}.active\\:translate-y-\\[2px\\]:active{--tw-translate-y:2px;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))}.active\\:border-b-\\[2px\\]:active{border-bottom-width:2px}.active\\:shadow-none:active{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.active\\:brightness-90:active{--tw-brightness:brightness(.9);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)}"},{"created":"2024-01-22T17:00:18.000Z","isPrivate":0,"projectId":"f47e42","snapshot":null,"tags":null,"title":"button by KhaledMatalkah","updated":"2024-01-22T17:00:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":43,"cssLen":1469,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n display: inline-block;\n padding: 12px 24px;\n font-size: 16px;\n font-weight: bold;\n text-transform: uppercase;\n color: #fff;\n background-color: #3dda5f;\n border: none;\n border-radius: 50px;\n transition: background-color 0.3s ease, transform 0.2s ease;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);\n cursor: pointer;\n position: relative;\n overflow: hidden;\n z-index: 1;\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background-color: rgba(64, 255, 105, 0.247);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n transition: all 0.4s ease;\n z-index: -1;\n}\n\n.button::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);\n background-size: 30px 30px;\n opacity: 0;\n transition: opacity 0.4s ease;\n}\n\n.button:hover {\n background-color: #17772f;\n transform: scale(1.1) rotate(5deg);\n box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);\n}\n\n.button:hover::before {\n top: 50%;\n left: 50%;\n width: 100%;\n height: 100%;\n transform: translate(-50%, -50%) rotate(45deg);\n}\n\n.button:hover::after {\n opacity: 1;\n}\n\n.button:active {\n background-color: #1c8f3e;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n transform: translateY(2px);\n}\n"},{"created":"2024-01-22T17:00:18.000Z","isPrivate":0,"projectId":"c3e9ab","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":144,"cssLen":536,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n height: 45px;\n width: 45px;\n border: none;\n border-radius: 10px;\n background-color: black;\n cursor: pointer;\n transition: all 0.3s;\n overflow: hidden;\n}\n.bracket {\n font-size: 18px;\n transition: all 0.3s;\n color: rgb(182, 104, 255);\n}\n.text {\n font-size: 15px;\n width: 0;\n transform: scale(0);\n transition: all 0.3s;\n color: white;\n}\n.button:hover {\n width: 100px;\n}\n.button:hover .text {\n transform: scale(1);\n width: 40px;\n}\n"},{"created":"2024-01-22T17:00:18.000Z","isPrivate":0,"projectId":"560e9e","snapshot":null,"tags":null,"title":"button by Sujanthapast0","updated":"2024-01-22T17:00:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":63,"cssLen":729,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n width: 90px;\n height: 40px;\n position: relative;\n font-family: var(--font);\n color: #3b82f6;\n font-weight: 600;\n background-color: #fff;\n border: none;\n overflow: hidden;\n border-radius: 5px;\n box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;\n transition: all ease 100ms;\n}\n\nbutton:hover {\n background-color: #cbdcf8;\n}\n\nbutton:focus {\n background-color: #cbdcf8;\n}\n\nbutton::before {\n content: 'done✅';\n position: absolute;\n color: #3b82f6;\n left: 0;\n top: -14px;\n right: 0;\n transition: all ease 300ms;\n opacity: 0%;\n}\n\nbutton:focus::before {\n opacity: 100%;\n transform: translatey(26px);\n}\n\n.submit {\n transition: all ease 100ms;\n opacity: 100%;\n}\n\nbutton:focus > .submit {\n opacity: 0%;\n}\n\n"},{"created":"2024-01-22T17:00:18.000Z","isPrivate":0,"projectId":"a67ef9","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":797,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n font-size: 18px;\n letter-spacing: 2px;\n text-transform: uppercase;\n display: inline-block;\n text-align: center;\n font-weight: bold;\n padding: 0.7em 2em;\n border: 3px solid black;\n border-radius: 2px;\n position: relative;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);\n color: black;\n text-decoration: none;\n transition: 0.3s ease all;\n z-index: 1;\n}\n\nbutton:before {\n transition: 0.5s all ease;\n position: absolute;\n top: 0;\n left: 50%;\n right: 50%;\n bottom: 0;\n opacity: 0;\n content: '';\n background-color: black;\n z-index: -1;\n}\n\nbutton:hover, button:focus {\n color: white;\n}\n\nbutton:hover:before, button:focus:before {\n transition: 0.5s all ease;\n left: 0;\n right: 0;\n opacity: 1;\n}\n\nbutton:active {\n transform: scale(0.9);\n}"}]}},"actionData":null,"errors":null}