{"loaderData":{"0":null,"0-3":{"total":7509,"projects":[{"created":"2024-01-22T17:00:01.000Z","isPrivate":0,"projectId":"7fa4b5","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":992,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n --purple: #9B7EDA;\n font-size: 18px;\n padding: 0.8em 3em;\n letter-spacing: 0.08em;\n position: relative;\n font-family: inherit;\n border-radius: 0.6em;\n overflow: hidden;\n transition: all 0.3s;\n line-height: 1.4em;\n border: 2px solid var(--purple);\n background: linear-gradient(to right, rgba(155, 126, 218, 0.1) 1%, transparent 40%, transparent 60%, rgba(155, 126, 218, 0.1) 100%);\n color: var(--purple);\n box-shadow: inset 0 0 10px rgba(155, 126, 218, 0.4), 0 0 9px 3px rgba(155, 126, 218, 0.1);\n}\n\nbutton:hover {\n color: #BFA3F3;\n box-shadow: inset 0 0 10px rgba(155, 126, 218, 0.6), 0 0 9px 3px rgba(155, 126, 218, 0.2);\n}\n\nbutton:before {\n content: \"\";\n position: absolute;\n left: -4em;\n width: 4em;\n height: 100%;\n top: 0;\n transition: transform .4s ease-in-out;\n background: linear-gradient(to right, transparent 1%, rgba(155, 126, 218, 0.1) 40%, rgba(155, 126, 218, 0.1) 60%, transparent 100%);\n}\n\nbutton:hover:before {\n transform: translateX(15em);\n}"},{"created":"2024-01-22T17:00:01.000Z","isPrivate":0,"projectId":"666d77","snapshot":null,"tags":null,"title":"button by ArturCodeCraft","updated":"2024-01-22T17:00:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":64,"cssLen":801,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"/* ============================ */\nbutton {\n border: none;\n background: none;\n padding: 0;\n margin: 0;\n cursor: pointer;\n font-family: inherit;\n}\n/* ============================ */\n.menu__button {\n min-width: 62px;\n height: 36px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 8px 16px;\n border: 1px solid #fff;\n background-color: transparent;\n position: relative;\n}\n\n.menu__button::before {\n content: '';\n width: 100%;\n height: 0;\n background-color: #fff;\n position: absolute;\n bottom: 0;\n left: 0;\n z-index: -1;\n transition: all .4s;\n}\n\n.menu__button:hover::before {\n height: 100%;\n top: 0;\n}\n\n.menu__button span {\n color: #fff;\n line-height: 1;\n transition: color .4s;\n}\n\n.menu__button:hover span {\n color: #000;\n}"},{"created":"2024-01-22T17:00:01.000Z","isPrivate":0,"projectId":"361094","snapshot":null,"tags":null,"title":"button by Prayag321","updated":"2024-01-22T17:00:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":47,"cssLen":570,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".comic-button {\n display: inline-block;\n padding: 10px 20px;\n font-size: 24px;\n font-weight: bold;\n text-align: center;\n text-decoration: none;\n color: #fff;\n background-color: #ff5252;\n border: 2px solid #000;\n border-radius: 10px;\n box-shadow: 5px 5px 0px #000;\n transition: all 0.3s ease;\n scale: 0.9;\n}\n\n.comic-button:hover {\n background-color: #fff;\n color: #ff5252;\n border: 2px solid #ff5252;\n box-shadow: 5px 5px 0px #ff5252;\n scale: 1;\n}\n\n.comic-button:active {\n background-color: #fcf414;\n box-shadow: none;\n transform: translateY(4px);\n}\n"},{"created":"2024-01-22T17:00:01.000Z","isPrivate":0,"projectId":"157463","snapshot":null,"tags":null,"title":"button by ArturCodeCraft","updated":"2024-01-22T17:00:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":37,"cssLen":674,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"/* ============================ */\nbutton {\n border: none;\n background: none;\n padding: 0;\n margin: 0;\n cursor: pointer;\n font-family: inherit;\n}\n/* ============================ */\n.menu__icon {\n width: 2rem;\n height: 2rem;\n padding: .25rem;\n backdrop-filter: saturate(180%) blur(20px);\n background-color: rgb(29, 29, 31, .7);\n border: solid 1px rgba(66,66,69,0.7);\n}\n\n.menu__icon::before {\n display: block;\n content: \"+\";\n color: rgb(245, 245, 247);\n font-size: 1.125rem;\n font-weight: 400;\n transition: transform .3s ease-out;\n transform-origin: center;\n}\n\n.menu__icon:hover::before {\n transform: rotate(45deg) scale(1.08);\n}"},{"created":"2024-01-22T17:00:01.000Z","isPrivate":0,"projectId":"27ed50","snapshot":null,"tags":null,"title":"button by KhaledMatalkah","updated":"2024-01-22T17:00:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":45,"cssLen":825,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n display: inline-block;\n padding: 15px 32px;\n font-size: 17px;\n font-weight: bold;\n color: rgb(53, 53, 53);\n background: transparent;\n border-radius: 50px;\n text-align: center;\n text-decoration: none;\n cursor: pointer;\n position: relative;\n border: none;\n z-index: 1;\n overflow: hidden;\n}\n\n.button:before {\n content: \"\";\n position: absolute;\n top: 0%;\n left: -100%;\n width: 100%;\n height: 100%;\n background-color: blanchedalmond;\n transition: left 0.8s ease-in-out;\n z-index: -1;\n}\n\n.button:hover:before {\n left: 0%;\n}\n\n.button:after {\n content: \"\";\n position: absolute;\n top: 0%;\n left: 0%;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.2);\n transition: background-color 0.8s ease-in-out;\n z-index: -1;\n}\n\n.button:hover:after {\n background-color: transparent;\n}\n"},{"created":"2024-01-22T17:00:01.000Z","isPrivate":0,"projectId":"b331c8","snapshot":null,"tags":null,"title":"button by Rodrypaladin","updated":"2024-01-22T17:00:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":115,"cssLen":1399,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n background-image: linear-gradient(to right bottom, #e300ff, #ff00aa, #ff5956, #ffb900, #fffe00);\n border: none;\n font-size: 1.2em;\n border-radius: 0;\n padding: 4px;\n transition: border-top-left-radius 0.2s ease-in, \n border-top-right-radius 0.2s ease-in 0.15s, \n border-bottom-right-radius 0.2s ease-in 0.3s,\n border-bottom-left-radius 0.2s ease-in 0.45s, \n padding 0.2s ease-in;\n position: relative;\n}\n\n.button__int {\n background-color: #212121;\n color: white;\n border-radius: 0;\n padding: 10px 40px;\n transition: all 0.2s ease-in,\n border-top-left-radius 0.2s ease-in, \n border-top-right-radius 0.2s ease-in 0.15s, \n border-bottom-right-radius 0.2s ease-in 0.3s,\n border-bottom-left-radius 0.2s ease-in 0.45s,\n padding 0.2s ease-in;\n font-weight: 600;\n z-index: -1;\n box-shadow: -25px -10px 30px -5px rgba(225, 0, 255, 0.7),\n 25px -10px 30px -5px rgba(255, 0, 212, 0.7),\n 25px 10px 30px -5px rgba(255, 174, 0, 0.7),\n -25px 10px 30px -5px rgba(255, 230, 0, 0.7);\n}\n\n.button:active .button__int {\n padding: 10px 30px;\n}\n\n.button:hover {\n border-radius: 1.5em;\n}\n\n.button:hover .button__int {\n border-radius: 1.3em;\n}\n\n.button:hover .button__int {\n box-shadow: -15px -10px 30px -5px rgba(225, 0, 255, 0.8),\n 15px -10px 30px -5px rgba(255, 0, 212, 0.8),\n 15px 10px 30px -5px rgba(255, 174, 0, 0.8),\n -15px 10px 30px -5px rgba(255, 230, 0.8);\n}\n"},{"created":"2024-01-22T17:00:01.000Z","isPrivate":0,"projectId":"5cebc5","snapshot":null,"tags":null,"title":"button by ercnersoy","updated":"2024-01-22T17:00:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":17,"cssLen":3388,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n padding: 5px;\n border-radius: 100%;\n box-shadow: 0px 0px 5px 7px #1475ec73;\n background-color: #1474ec;\n color: white;\n font-size: 17px;\n border: none;\n display: flex;\n align-items: center;\n}\n\nbutton::before {\n content: \"fac\";\n background-image: url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNzUycHQiIGhlaWdodD0iNzUycHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDc1MiA3NTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8cGF0aCBkPSJtNTQ4Ljg2IDM4Mi4xNmMwIDM1LjUyLTMuMzE2NCA3MC4wOS05LjQ3MjcgMTAzLjI0LTAuOTQ1MzEgNC43MzQ0LTQuNzM0NCA3LjU3ODEtOS40NzI3IDcuNTc4MWgtMS44OTQ1Yy01LjIxMDktMC45NDUzMS04LjUyMzQtNi4xNTYyLTcuNTc4MS0xMC44OTEgNi4xNTYyLTMyLjIwMyA5LjQ3MjctNjUuODI4IDkuNDcyNy05OS45MjZzLTMuMzE2NC02OC42NjgtOS40NzI3LTEwMi43N2MtMC45NDUzMS01LjIxMDkgMi4zNjcyLTkuOTQ1MyA3LjU3ODEtMTAuODkxIDUuMjEwOS0wLjk0NTMxIDkuOTQ1MyAyLjM2NzIgMTAuODkxIDcuNTc4MSA2LjYzMjggMzUuMDM5IDkuOTQ5MiA3MC41NTkgOS45NDkyIDEwNi4wN3ptLTE0NC45Mi0xMzguNzZjMTAuODkxIDQ1LjkzOCAxNi41NzQgOTIuMzQ4IDE2LjU3NCAxMzguMjkgMCA0NS40NjUtNS4yMTA5IDg5Ljk4LTE2LjEwMiAxMzIuMTMtMC45NDUzMSAzLjMxNjQtMi4zNjcyIDYuMTU2Mi00LjI2MTcgOC41MjM0LTMuNzg5MSA1LjIxMDktOS40NzI3IDguMDUwOC0xNS42MjkgOC45OTYxaC0yLjgzOThjLTUuMjEwOSAwLTEwLjQxOC0xLjg5NDUtMTQuMjA3LTQuNzM0NGwtNzIuOTMtNTUuNDA2Yy0wLjk0NTMxLTAuNDcyNjYtMS44OTQ1LTAuOTQ1MzEtMi44Mzk4LTAuOTQ1MzFoLTUyLjA5NGMtOC41MjM0IDAtMTYuMTAyLTQuNzM0NC0yMC4zNjMtMTEuODQtMTIuMzEyLTIwLjgzNi0xOC40NjktNDYuODgzLTE4LjQ2OS03Ni4yNDYgMC0yOS44MzYgNi4xNTYyLTU3LjMwNSAxOC40NjktODEuOTMgMy43ODkxLTguMDUwOCAxMi4zMTItMTMuMjYyIDIxLjMxMi0xMy4yNjJoNTEuNjIxYzAuOTQ1MzEgMCAxLjg5NDUtMC40NzI2NiAyLjgzOTgtMC45NDUzMWw3MS41MDgtNTUuODg3YzIuODM5OC0xLjg5NDUgNS42ODM2LTMuMzE2NCA4Ljk5NjEtNC4yNjE3IDYuMTU2Mi0xLjQyMTkgMTIuMzEyLTAuNDcyNjYgMTcuOTk2IDIuODM5OCA1LjIxMDkgMy4zMTY0IDkgOC41MjczIDEwLjQxOCAxNC42ODR6bS0yLjgzOTggMTM4Ljc2YzAtNDQuNTE2LTUuMjEwOS04OS41MDgtMTUuNjI5LTEzNC4wMi0wLjQ3MjY2LTEuODk0NS0xLjQyMTktMi4zNjcyLTEuODk0NS0yLjgzOTgtMC40NzI2Ni0wLjQ3MjY2LTEuODk0NS0wLjk0NTMxLTMuNzg5MS0wLjQ3MjY2LTAuNDcyNjYgMC0xLjQyMTkgMC40NzI2Ni0xLjg5NDUgMC45NDUzMWwtNzEuNTA4IDU0LjkzOGMtNC4yNjE3IDMuMzE2NC05LjQ3MjcgNC43MzQ0LTE0LjY4IDQuNzM0NGgtNTEuMTQ4Yy0xLjg5NDUgMC0zLjMxNjQgMC45NDUzMS00LjI2MTcgMi44Mzk4LTEwLjg5MSAyMi4yNTgtMTYuNTc0IDQ2Ljg4My0xNi41NzQgNzMuODc5IDAgMjYuMDQ3IDUuMjEwOSA0OC43NzcgMTUuNjI5IDY2Ljc3MyAwLjk0NTMxIDEuNDIxOSAyLjM2NzIgMi4zNjcyIDQuMjYxNyAyLjM2NzJoNTIuMDk0YzUuMjEwOSAwIDEwLjQxOCAxLjg5NDUgMTQuNjggNC43MzQ0bDcxLjk4NCA1NS44ODNjMS40MjE5IDAuOTQ1MzEgMi44Mzk4IDAuOTQ1MzEgMy4zMTY0IDAuOTQ1MzEgMC45NDUzMSAwIDEuODk0NS0wLjQ3MjY2IDMuMzE2NC0xLjg5NDUgMC40NzI2Ni0wLjQ3MjY2IDAuNDcyNjYtMC45NDUzMSAwLjk0NTMxLTEuODk0NSA5Ljk0MTQtNDAuMjQ2IDE1LjE1Mi04My4zNDQgMTUuMTUyLTEyNi45MXptODIuODc1LTc5LjA4NmMtNS4yMTA5IDAuNDcyNjYtOC45OTYxIDUuMjEwOS04LjA1MDggMTAuNDE4IDIuODM5OCAyMi43MyA0LjI2MTcgNDUuOTM4IDQuMjYxNyA2OC42NjhzLTEuNDIxOSA0NS40NjUtNC4yNjE3IDY3LjI1Yy0wLjQ3MjY2IDUuMjEwOSAyLjgzOTggOS45NDUzIDguMDUwOCAxMC40MThoMS40MjE5YzQuNzM0NCAwIDguOTk2MS0zLjMxNjQgOS40NzI3LTguNTIzNCAyLjgzOTgtMjIuNzMgNC4yNjE3LTQ1LjkzOCA0LjI2MTctNjkuNjE3IDAtMjMuNjgtMS40MjE5LTQ3LjM1OS00LjI2MTctNzAuNTYyLTAuOTQ5MjItNS4yMTA5LTUuNjgzNi05LTEwLjg5NS04LjA1MDh6IiBmaWxsPSIjZmZmIi8+Cjwvc3ZnPgo=\");\n background-size: 100%;\n background-repeat: no-repeat;\n color: transparent;\n position: relative;\n width: 50px;\n height: 50px;\n display: block;\n}\n\nbutton:active {\n border-radius: 100%;\n box-shadow: inset 0px 0px 10px 0px rgb(240, 237, 237);\n}"},{"created":"2024-01-22T17:00:01.000Z","isPrivate":0,"projectId":"814d93","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":368,"cssLen":871,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".contactButton {\n background: #3cb371;\n color: white;\n font-family: inherit;\n padding: 0.5em;\n padding-left: 1.2em;\n font-size: 18px;\n font-weight: 600;\n border-radius: 1em;\n border: none;\n letter-spacing: 0.05em;\n display: flex;\n align-items: center;\n box-shadow: inset 0 0 1.8em -0.7em #2e8b57;\n overflow: hidden;\n position: relative;\n height: 3em;\n padding-right: 3.5em;\n}\n\n.iconButton {\n margin-left: 1.2em;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 2.4em;\n width: 2.4em;\n border-radius: 1.2em;\n box-shadow: 0.15em 0.15em 0.8em 0.3em #32cd32;\n right: 0.4em;\n transition: all 0.3s;\n}\n\n.contactButton:hover {\n transform: translate(-0.05em, -0.05em);\n box-shadow: 0.2em 0.2em #228b22;\n}\n\n.contactButton:active {\n transform: translate(0.05em, 0.05em);\n box-shadow: 0.1em 0.1em #228b22;\n}"},{"created":"2024-01-22T17:00:01.000Z","isPrivate":0,"projectId":"2097d5","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T17:00:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":470,"cssLen":1981,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".absolute {\n position: absolute\n}\n\n.relative {\n position: relative\n}\n\n.-top-\\[150\\%\\] {\n top: -150%\n}\n\n.left-0 {\n left: 0px\n}\n\n.inline-flex {\n display: inline-flex\n}\n\n.h-\\[5px\\] {\n height: 5px\n}\n\n.w-80 {\n width: 20rem\n}\n\n.overflow-hidden {\n overflow: hidden\n}\n\n.rounded-md {\n border-radius: 0.375rem\n}\n\n.border {\n border-width: 1px\n}\n\n.border-b-4 {\n border-bottom-width: 4px\n}\n\n.border-violet-400 {\n --tw-border-opacity: 1;\n border-color: rgb(167 139 250 / var(--tw-border-opacity))\n}\n\n.bg-violet-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(167 139 250 / var(--tw-bg-opacity))\n}\n\n.bg-violet-950 {\n --tw-bg-opacity: 1;\n background-color: rgb(46 16 101 / var(--tw-bg-opacity))\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n\n.font-medium {\n font-weight: 500\n}\n\n.text-violet-400 {\n --tw-text-opacity: 1;\n color: rgb(167 139 250 / var(--tw-text-opacity))\n}\n\n.opacity-50 {\n opacity: 0.5\n}\n\n.shadow-\\[0_0_10px_10px_rgba\\(0\\2c 0\\2c 0\\2c 0\\.3\\)\\] {\n --tw-shadow: 0 0 10px 10px rgba(0,0,0,0.3);\n --tw-shadow-colored: 0 0 10px 10px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n.shadow-violet-400 {\n --tw-shadow-color: #a78bfa;\n --tw-shadow: var(--tw-shadow-colored)\n}\n\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.duration-300 {\n transition-duration: 300ms\n}\n\n.duration-500 {\n transition-duration: 500ms\n}\n\n.hover\\:border-b:hover {\n border-bottom-width: 1px\n}\n\n.hover\\:border-t-4:hover {\n border-top-width: 4px\n}\n\n.hover\\:brightness-150:hover {\n --tw-brightness: brightness(1.5);\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.active\\:opacity-75:active {\n opacity: 0.75\n}\n\n.group:hover .group-hover\\:top-\\[150\\%\\] {\n top: 150%\n}"},{"created":"2024-01-22T17:00:01.000Z","isPrivate":0,"projectId":"4d688c","snapshot":null,"tags":null,"title":"button by hamoode-taha-04","updated":"2024-01-22T17:00:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":40,"cssLen":806,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".ui-btn {\n cursor: pointer;\n border-radius: 5px;\n color: rgb(219, 218, 218);\n border-style: solid;\n background-color: transparent;\n border-color: rgb(219, 218, 218);\n width: 120px;\n height: 40px;\n transition: 0.2s ease;\n text-transform: uppercase;\n border-width: 2px;\n font-weight: 500;\n font-size: 18px;\n letter-spacing: 2px;\n}\n.ui-btn:hover {\n color: rgb(247, 247, 247);\n background-color: rgb(201, 147, 31);\n border-color: rgb(201, 147, 31);\n text-shadow: 0 0 50px white, 0 0 20px white, 0 0 15px white;\n box-shadow: 0 0 50px rgb(201, 147, 31), 0 0 30px rgb(201, 147, 31),\n 0 0 60px rgb(201, 147, 31), 0 0 120px rgb(201, 147, 31);\n font-size: 20px;\n width: 130px;\n height: 50px;\n letter-spacing: 3px;\n}\n.ui-btn:active {\n width: 115px;\n height: 38px;\n letter-spacing: 0px;\n}\n"},{"created":"2024-01-22T17:00:01.000Z","isPrivate":0,"projectId":"0f871b","snapshot":null,"tags":null,"title":"button by ArnavK-09","updated":"2024-01-22T17:00:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1532,"cssLen":4858,"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 Premium\n \n \n\n","css":".inline{display:inline}.flex{display:flex}.h-6{height:1.5rem}.h-full{height:100%}.w-6{width:1.5rem}.w-full{width:100%}.gap-1{gap:0.25rem}.rounded-xl{border-radius:0.75rem}.bg-black\\/80{background-color:rgb(0 0 0 / 0.8)}.bg-gradient-to-br{background-image:linear-gradient(to bottom right, var(--tw-gradient-stops))}.from-yellow-800{--tw-gradient-from:#854d0e var(--tw-gradient-from-position);--tw-gradient-to:rgb(133 77 14 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-yellow-600{--tw-gradient-to:rgb(202 138 4 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #ca8a04 var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-yellow-800{--tw-gradient-to:#854d0e var(--tw-gradient-to-position)}.stroke-yellow-600{stroke:#ca8a04}.p-1{padding:0.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.font-bold{font-weight:700}.text-yellow-600{--tw-text-opacity:1;color:rgb(202 138 4 / var(--tw-text-opacity))}.brightness-150{--tw-brightness:brightness(1.5);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)}.invert{--tw-invert:invert(100%);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)}.backdrop-blur-xl{--tw-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.hover\\:rotate-2:hover{--tw-rotate:2deg;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\\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;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\\:from-yellow-700:hover{--tw-gradient-from:#a16207 var(--tw-gradient-from-position);--tw-gradient-to:rgb(161 98 7 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.hover\\:via-yellow-800:hover{--tw-gradient-to:rgb(133 77 14 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #854d0e var(--tw-gradient-via-position), var(--tw-gradient-to)}.hover\\:to-yellow-600:hover{--tw-gradient-to:#ca8a04 var(--tw-gradient-to-position)}.hover\\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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-yellow-700\\/60:hover{--tw-shadow-color:rgb(161 98 7 / 0.6);--tw-shadow:var(--tw-shadow-colored)}.group:hover .group-hover\\:scale-100{--tw-scale-x:1;--tw-scale-y:1;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))}.group:hover .group-hover\\:stroke-yellow-500{stroke:#eab308}.group:hover .group-hover\\:text-yellow-500{--tw-text-opacity:1;color:rgb(234 179 8 / var(--tw-text-opacity))}@media (prefers-color-scheme: dark){.dark\\:brightness-100{--tw-brightness:brightness(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)}}"},{"created":"2024-01-22T17:00:01.000Z","isPrivate":0,"projectId":"7807ad","snapshot":null,"tags":null,"title":"button by Wlidha09","updated":"2024-01-22T17:00:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":92,"cssLen":1105,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".box {\n height: 66.66%;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.btn {\n line-height: 50px;\n height: 50px;\n text-align: center;\n width: 150px;\n cursor: pointer;\n color: #FFF;\n transition: all 0.3s;\n position: relative;\n}\n\n.btn button {\n z-index: 2;\n display: block;\n position: absolute;\n width: 100%;\n height: 100%;\n color: #fff;\n font-size: 17px;\n border: none;\n background-color: transparent;\n}\n\n.btn::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n transition: all 0.5s;\n border: 1px solid rgba(255,255,255,0.2);\n background-color: rgba(255,255,255,0.1);\n}\n\n.btn::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n transition: all 0.5s;\n border: 1px solid rgba(255,255,255,0.2);\n background-color: rgba(255,255,255,0.1);\n}\n\n.btn:hover::before {\n transform: rotate(-45deg);\n background-color: rgba(255,255,255,0);\n}\n\n.btn:hover::after {\n transform: rotate(45deg);\n background-color: rgba(255,255,255,0);\n}"}]}},"actionData":null,"errors":null}