{"loaderData":{"0":null,"0-3":{"total":7307,"projects":[{"created":"2024-01-22T17:00:19.000Z","isPrivate":0,"projectId":"36d979","snapshot":null,"tags":null,"title":"button by Yashasewi","updated":"2024-01-22T17:00:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":305,"cssLen":1877,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":"button {\n background: transparent;\n color: #fff;\n border: 3px solid #fff;\n border-radius: 50px;\n padding: 0.8rem 2rem;\n font: 18px \"Margarine\", sans-serif;\n outline: none;\n cursor: pointer;\n position: relative;\n transition: 0.2s ease-in-out;\n letter-spacing: 2px;\n}\n\n.name {\n width: 100%;\n text-align: center;\n padding: 0 0 3rem;\n padding-top: 4rem;\n font: 500 14px \"Rubik\", sans-serif;\n letter-spacing: 0.5px;\n text-transform: uppercase;\n text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);\n}\n\n.button-parrot .parrot {\n position: absolute;\n width: 60px;\n text-align: center;\n animation: blink 0.8s infinite;\n color: transparent;\n}\n\n.button-parrot .parrot:before {\n content: \"Click Me!\";\n}\n\n.button-parrot .parrot:nth-child(1) {\n top: -30px;\n left: -40px;\n font: 12px/1 \"Margarine\", sans-serif;\n transform: rotate(-20deg);\n animation-duration: 0.5s;\n}\n\n.button-parrot .parrot:nth-child(2) {\n font: 12px/1 \"Margarine\", sans-serif;\n right: -40px;\n top: -20px;\n transform: rotate(15deg);\n animation-duration: 0.3s;\n}\n\n.button-parrot .parrot:nth-child(3) {\n font: 16px/1 \"Margarine\", sans-serif;\n top: -60px;\n left: 15px;\n transform: rotate(10deg);\n animation-duration: 1s;\n}\n\n.button-parrot .parrot:nth-child(4) {\n font: 18px/1 \"Margarine\", sans-serif;\n top: -70px;\n left: 95px;\n transform: rotate(2deg);\n animation-duration: 0.7s;\n}\n\n.button-parrot .parrot:nth-child(5) {\n font: 14px/1 \"Margarine\", sans-serif;\n top: 80px;\n left: 105px;\n transform: rotate(-20deg);\n animation-duration: 0.8s;\n}\n\n.button-parrot .parrot:nth-child(6) {\n font: 12px/1 \"Margarine\", sans-serif;\n top: 80px;\n left: 5px;\n transform: rotate(10deg);\n animation-duration: 1.2s;\n}\n\n.button-parrot button:hover .parrot:before {\n content: \"Do it!\";\n width: 70px;\n}\n\n@keyframes blink {\n 25%, 75% {\n color: transparent;\n }\n\n 40%, 60% {\n color: #fff;\n }\n}"},{"created":"2024-01-22T17:00:19.000Z","isPrivate":0,"projectId":"725a3f","snapshot":null,"tags":null,"title":"button by amirhoseinman2019","updated":"2024-01-22T17:00:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":11079,"cssLen":4715,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

HOVER

FOR

SOCIAL

","css":".main_back {\n position: absolute;\n border-radius: 10px;\n transform: rotate(90deg);\n width: 11em;\n height: 11em;\n background: linear-gradient(270deg, #03a9f4, #cc39a4, #ffb5d2);\n z-index: -2;\n box-shadow: inset 0px 0px 180px 5px #ffffff;\n}\n\n.main {\n display: flex;\n flex-wrap: wrap;\n width: 14em;\n align-items: center;\n justify-content: center;\n z-index: -1;\n}\n\n.card {\n width: 60px;\n height: 60px;\n border-top-left-radius: 10px;\n background: lightgrey;\n transition: .4s ease-in-out, .2s background-color ease-in-out, .2s background-image ease-in-out;\n background: rgba(255, 255, 255, 0.596);\n backdrop-filter: blur(5px);\n border: 1px solid transparent;\n -webkit-backdrop-filter: blur(5px);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.card .instagram {\n opacity: 0;\n transition: .2s ease-in-out;\n fill: #cc39a4;\n}\n\n.card:nth-child(2) {\n border-radius: 0px;\n}\n\n.card:nth-child(2) .twitter {\n opacity: 0;\n transition: .2s ease-in-out;\n fill: #03A9F4;\n}\n\n.card:nth-child(3) {\n border-top-right-radius: 10px;\n border-top-left-radius: 0px;\n}\n\n.card:nth-child(3) .dribble {\n opacity: 0;\n transition: .2s ease-in-out;\n fill: #ffb5d2;\n}\n\n.card:nth-child(4) {\n border-radius: 0px;\n}\n\n.card:nth-child(4) .codepen {\n opacity: 0;\n transition: .2s ease-in-out;\n fill: black;\n}\n\n.card:nth-child(5) {\n border-radius: 0px;\n}\n\n.card:nth-child(5) .uiverse {\n position: absolute;\n margin-left: 0.2em;\n margin-top: 0.2em;\n opacity: 0;\n transition: .2s ease-in-out;\n}\n\n.card:nth-child(6) {\n border-radius: 0px;\n}\n\n.card:nth-child(6) .discord {\n opacity: 0;\n transition: .2s ease-in-out;\n fill: #8c9eff;\n}\n\n.card:nth-child(7) {\n border-bottom-left-radius: 10px;\n border-top-left-radius: 0px;\n}\n\n.card:nth-child(7) .github {\n opacity: 0;\n transition: .2s ease-in-out;\n fill: black;\n}\n\n.card:nth-child(8) {\n border-radius: 0px;\n}\n\n.card:nth-child(8) .telegram {\n opacity: 0;\n transition: .2s ease-in-out;\n fill: #29b6f6;\n}\n\n.card:nth-child(9) {\n border-bottom-right-radius: 10px;\n border-top-left-radius: 0px;\n}\n\n.card:nth-child(9) .reddit {\n opacity: 0;\n transition: .2s ease-in-out;\n}\n\n.main:hover {\n width: 14em;\n cursor: pointer;\n}\n\n.main:hover .main_back {\n opacity: 0;\n}\n\n.main:hover .card {\n margin: .2em;\n border-radius: 10px;\n box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.3);\n background: rgba(255, 255, 255, 0.2);\n}\n\n.main:hover .card:nth-child(5) {\n border: transparent;\n}\n\n.main:hover .text {\n opacity: 0;\n z-index: -3;\n}\n\n.main:hover .instagram {\n opacity: 1;\n}\n\n.main:hover .twitter {\n opacity: 1;\n}\n\n.main:hover .dribble {\n opacity: 1;\n}\n\n.main:hover .codepen {\n opacity: 1;\n}\n\n.main:hover .uiverse {\n opacity: 1;\n}\n\n.main:hover .discord {\n opacity: 1;\n}\n\n.main:hover .github {\n opacity: 1;\n}\n\n.main:hover .telegram {\n opacity: 1;\n}\n\n.main:hover .reddit {\n opacity: 1;\n}\n\n.card:nth-child(1):hover {\n background-color: #cc39a4;\n}\n\n.card:nth-child(1):hover .instagram {\n fill: white;\n}\n\n.card:nth-child(2):hover {\n background-color: #03A9F4;\n}\n\n.card:nth-child(2):hover .twitter {\n fill: white;\n}\n\n.card:nth-child(3):hover {\n background-color: #ffb5d2;\n}\n\n.card:nth-child(3):hover .dribble {\n fill: white;\n}\n\n.card:nth-child(4):hover {\n background-color: #1E1F26;\n}\n\n.card:nth-child(4):hover .codepen {\n fill: white;\n}\n\n.card:nth-child(5):hover {\n animation: backgroundIMG .1s;\n animation-fill-mode: forwards;\n}\n\n.card:nth-child(5):hover .uiverse #paint0_linear_501_142 stop {\n stop-color: white;\n}\n\n.card:nth-child(5):hover .uiverse #paint1_linear_501_142 stop {\n stop-color: white;\n}\n\n.card:nth-child(5):hover .uiverse #paint2_linear_501_142 stop {\n stop-color: white;\n}\n\n@keyframes backgroundIMG {\n 100% {\n background-image: linear-gradient(#BF66FF,#6248FF,#00DDEB);\n }\n}\n\n.card:nth-child(6):hover {\n background-color: #8c9eff;\n}\n\n.card:nth-child(6):hover .discord {\n fill: white;\n}\n\n.card:nth-child(7):hover {\n background-color: black;\n}\n\n.card:nth-child(7):hover .github {\n fill: white;\n}\n\n.card:nth-child(8):hover {\n background-color: #29b6f6;\n}\n\n.card:nth-child(8):hover .telegram > path:nth-of-type(1) {\n fill: white;\n}\n\n.card:nth-child(8):hover .telegram > path:nth-of-type(2) {\n fill: #29b6f6;\n}\n\n.card:nth-child(8):hover .telegram > path:nth-of-type(3) {\n fill: #29b6f6;\n}\n\n.card:nth-child(9):hover {\n background-color: rgb(255,69,0);\n}\n\n.card:nth-child(9) .reddit > g circle {\n fill: rgb(255,69,0);\n}\n\n.card:nth-child(9) .reddit > g path {\n fill: white;\n}\n\n.text {\n position: absolute;\n font-size: 0.7em;\n transition: .4s ease-in-out;\n color: black;\n text-align: center;\n font-weight: bold;\n letter-spacing: 0.33em;\n z-index: 3;\n}"},{"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"}]}},"actionData":null,"errors":null}