{"loaderData":{"0":null,"0-2":{"total":7089,"projects":[{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"7fa697","snapshot":null,"tags":null,"title":"button by gharsh11032000","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":56,"cssLen":1434,"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 text-decoration: none;\n color: #e8e8e8;\n padding: 15px 30px;\n width: 170px;\n height: 60px;\n font-weight: 600;\n font-size: 18px;\n cursor: pointer;\n border: none;\n overflow: hidden;\n background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );\n transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);\n}\n\n.button span , .button span::before {\n position: absolute;\n top: 0%;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n pointer-events: none;\n justify-content: center;\n transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);\n}\n\n.button span::before {\n content: 'Hello!';\n top: -100%;\n}\n\n.button:before {\n top: 0;\n left: 0;\n border-top: 2px solid #e8e8e8;\n border-left: 2px solid #e8e8e8;\n}\n\n.button:after {\n bottom: 0;\n right: 0;\n border-bottom: 2px solid #e8e8e8;\n border-right: 2px solid #e8e8e8;\n}\n\n.button:after,\n.button:before {\n content: \"\";\n position: absolute;\n width: 24px;\n height: 24px;\n pointer-events: none;\n transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);\n}\n\n.button:hover {\n box-shadow: 0 0 30px rgba(248 ,155, 41,0.4),\n 0 0 30px rgba(255, 15, 123,0.4);\n ;\n}\n\n.button:hover:before,\n.button:hover:after {\n width: 100%;\n height: 100%;\n}\n\n.button:hover span {\n top: 100%;\n}\n\n.button:active {\n scale: 0.95;\n box-shadow: 0 0 10px rgba(248 ,155, 41,0.4),\n 0 0 10px rgba(255, 15, 123,0.4);\n ;\n}\n\n"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"57427d","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":40,"cssLen":916,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n --color: rgba(88, 101, 242, 1);\n padding: 0.8em 1.7em;\n background-color: transparent;\n border-radius: .3em;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n transition: .5s;\n font-weight: 400;\n font-size: 17px;\n border: 1px solid;\n font-family: inherit;\n text-transform: uppercase;\n color: var(--color);\n z-index: 1;\n}\n\n.button::before, .button::after {\n content: '';\n display: block;\n width: 50px;\n height: 50px;\n transform: translate(-50%, -50%);\n position: absolute;\n border-radius: 50%;\n z-index: -1;\n background-color: var(--color);\n transition: 1s ease;\n}\n\n.button::before {\n top: -1em;\n left: -1em;\n}\n\n.button::after {\n left: calc(100% + 1em);\n top: calc(100% + 1em);\n}\n\n.button:hover::before, .button:hover::after {\n height: 410px;\n width: 410px;\n}\n\n.button:hover {\n color: rgb(10, 25, 30);\n color: #fff;\n}\n\n.button:active {\n filter: brightness(.8);\n}\n"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"3a2f4b","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2241,"cssLen":1542,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n UP\n \n
\n Down\n \n
\n Left\n \n
\n Right\n \n

","css":".wrapper {\n display: inline-flex;\n list-style: none;\n height: 120px;\n width: 100%;\n padding-top: 40px;\n font-family: \"Poppins\", sans-serif;\n justify-content: center;\n}\n\n.wrapper .icon {\n position: relative;\n background: #fff;\n border-radius: 50%;\n margin: 10px;\n width: 50px;\n height: 50px;\n font-size: 18px;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n.wrapper .tooltip {\n position: absolute;\n top: 0;\n font-size: 14px;\n background: #fff;\n color: #fff;\n padding: 5px 8px;\n border-radius: 5px;\n box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);\n opacity: 0;\n pointer-events: none;\n transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n.wrapper .tooltip::before {\n position: absolute;\n content: \"\";\n height: 8px;\n width: 8px;\n background: #fff;\n bottom: -3px;\n left: 50%;\n transform: translate(-50%) rotate(45deg);\n transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n.wrapper .icon:hover .tooltip {\n top: -45px;\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n}\n\n.wrapper .icon:hover span,\n.wrapper .icon:hover .tooltip {\n text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);\n}\n\n.wrapper svg {\n fill: green;\n}\n\n.wrapper span:hover,\n.wrapper svg:hover,\n.wrapper .black:hover,\n.wrapper .black:hover .tooltip,\n.wrapper .black:hover .tooltip::before {\n background: #222;\n color: white;\n fill: white;\n}\n\n"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"089565","snapshot":null,"tags":null,"title":"button by Dashrath-Sharma","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":1312,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n border-right: 1px solid #ff758f;\n border-bottom: 1px solid #ff758f;\n border-top: 1px solid transparent;\n border-left: 1px solid transparent;\n outline: none;\n background: #f8f9fa;\n font-size: 17px;\n padding: 1em 2em;\n border-radius: .5em;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n transition: all .5s;\n z-index: 1;\n}\n\n.btn:hover {\n color: #212529;\n border-right: 1px solid transparent;\n border-bottom: 1px solid transparent;\n border-top: 1px solid #ff758f;\n border-left: 1px solid #ff758f;\n box-shadow: 1px 1px 0 #f8f9fa,\n 2px 2px 0 #e9ecef,\n 3px 3px 0 #fff0f3,\n 4px 4px 0 #ffb3c1,\n 5px 5px 0 #ff4d6d,\n 6px 6px 0 #6c757d,\n 7px 7px 0 #a4133c,\n 8px 8px 0 #800f2f,\n 9px 9px 0 #212529;\n}\n\n.btn:active {\n transition: 0s;\n transform: scale(.93);\n}\n\n.btn::before,\n.btn::after {\n left: 0;\n content: '';\n position: absolute;\n background: #ffccd5;\n z-index: -1;\n}\n\n.btn::before {\n width: 0;\n height: 10%;\n transition: width .5s;\n}\n\n.btn:hover::before {\n width: 100%;\n}\n\n.btn::after {\n width: 100%;\n height: 0;\n border-radius: 100%;\n transition: all .5s .2s;\n}\n\n.btn:hover::after {\n height: 100%;\n border-radius: 0;\n}\n"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"b8adf8","snapshot":null,"tags":null,"title":"button by themrsami","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":874,"cssLen":4233,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n Loading...\n \n \n Loading\n\n","css":".\\!absolute {\n position: absolute !important;\n}\n.\\!-m-px {\n margin: -1px !important;\n}\n.mr-2 {\n margin-right: 0.5rem;\n}\n.inline-block {\n display: inline-block;\n}\n.\\!h-px {\n height: 1px !important;\n}\n.h-3 {\n height: 0.75rem;\n}\n.\\!w-px {\n width: 1px !important;\n}\n.w-3 {\n width: 0.75rem;\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n.animate-spin {\n animation: spin 1s linear infinite;\n}\n.\\!overflow-hidden {\n overflow: hidden !important;\n}\n.\\!whitespace-nowrap {\n white-space: nowrap !important;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.\\!border-0 {\n border-width: 0px !important;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-solid {\n border-style: solid;\n}\n.border-current {\n border-color: currentColor;\n}\n.border-rose-500 {\n --tw-border-opacity: 1;\n border-color: rgb(244 63 94 / var(--tw-border-opacity));\n}\n.border-r-transparent {\n border-right-color: transparent;\n}\n.\\!p-0 {\n padding: 0px !important;\n}\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n.pt-2 {\n padding-top: 0.5rem;\n}\n.pt-2\\.5 {\n padding-top: 0.625rem;\n}\n.align-\\[-0\\.125em\\] {\n vertical-align: -0.125em;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.font-medium {\n font-weight: 500;\n}\n.uppercase {\n text-transform: uppercase;\n}\n.leading-normal {\n line-height: 1.5;\n}\n.text-rose-500 {\n --tw-text-opacity: 1;\n color: rgb(244 63 94 / var(--tw-text-opacity));\n}\n.transition {\n transition-property: color, background-color, border-color, fill, stroke,\n opacity, box-shadow, transform, filter, -webkit-text-decoration-color,\n -webkit-backdrop-filter;\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,\n backdrop-filter;\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,\n backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-150 {\n transition-duration: 150ms;\n}\n.ease-in-out {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.\\!\\[clip\\:rect\\(0\\2c 0\\2c 0\\2c 0\\)\\] {\n clip: rect(0, 0, 0, 0) !important;\n}\n.hover\\:border-rose-600:hover {\n --tw-border-opacity: 1;\n border-color: rgb(225 29 72 / var(--tw-border-opacity));\n}\n.hover\\:bg-rose-400:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(251 113 133 / var(--tw-bg-opacity));\n}\n.hover\\:bg-opacity-10:hover {\n --tw-bg-opacity: 0.1;\n}\n.hover\\:text-rose-600:hover {\n --tw-text-opacity: 1;\n color: rgb(225 29 72 / var(--tw-text-opacity));\n}\n.focus\\:border-rose-700:focus {\n --tw-border-opacity: 1;\n border-color: rgb(190 18 60 / var(--tw-border-opacity));\n}\n.focus\\:text-rose-700:focus {\n --tw-text-opacity: 1;\n color: rgb(190 18 60 / var(--tw-text-opacity));\n}\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.focus\\:ring-0:focus {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0\n var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0\n calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),\n var(--tw-shadow, 0 0 #0000);\n}\n.active\\:border-rose-800:active {\n --tw-border-opacity: 1;\n border-color: rgb(159 18 57 / var(--tw-border-opacity));\n}\n.active\\:text-rose-800:active {\n --tw-text-opacity: 1;\n color: rgb(159 18 57 / var(--tw-text-opacity));\n}\n@media (prefers-reduced-motion: reduce) {\n @keyframes spin {\n to {\n transform: rotate(360deg);\n }\n }\n .motion-reduce\\:animate-\\[spin_1\\.5s_linear_infinite\\] {\n animation: spin 1.5s linear infinite;\n }\n}\n@media (prefers-color-scheme: dark) {\n .dark\\:border-rose-300 {\n --tw-border-opacity: 1;\n border-color: rgb(253 164 175 / var(--tw-border-opacity));\n }\n .dark\\:text-rose-300 {\n --tw-text-opacity: 1;\n color: rgb(253 164 175 / var(--tw-text-opacity));\n }\n .dark\\:hover\\:hover\\:bg-rose-300:hover:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(253 164 175 / var(--tw-bg-opacity));\n }\n}\n"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"3e42f0","snapshot":null,"tags":null,"title":"button by ozgeozkaraa01","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":695,"cssLen":442,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n border: none;\n border-radius: 1rem;\n transition: all 0.5s linear;\n padding: 1.2em;\n background-color: #ACB1D6;\n}\n\n.tooltip {\n position: relative;\n display: inline-block;\n}\n\n.tooltip .tooltiptext {\n visibility: hidden;\n background-color: #AAAAAA;\n color: white;\n border-radius: 10px;\n padding: 5px;\n position: absolute;\n z-index: 1;\n left: 62px;\n width: 60px;\n}\n\n.tooltip:hover .tooltiptext {\n visibility: visible;\n}"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"6b17e2","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":140,"cssLen":1045,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n","css":".button {\n width: 160px;\n height: 55px;\n transition: all 0.2s;\n position: relative;\n cursor: pointer;\n background: none;\n outline: none;\n border: none;\n}\n\n.button-inner {\n width: inherit;\n height: inherit;\n background: rgba(255,255,255,.05);\n box-shadow: 0 0 10px rgba(0,0,0,0.25);\n backdrop-filter: blur(10px);\n border-radius: 8px;\n display: flex;\n text-align: center;\n justify-content: center;\n align-items: center;\n font-size: 20px;\n font-weight: 900;\n letter-spacing: .1em;\n color: blue;\n}\n\n.button:hover {\n transform: scale(1.04) rotate(1deg);\n}\n\n.circle {\n width: 20px;\n height: 20px;\n background: radial-gradient(blue,darkblue);\n border-radius: 50%;\n position: absolute;\n animation: move-up6 2s ease-in infinite alternate-reverse;\n}\n\n.circle:nth-child(1) {\n top: 0px;\n left: 0px;\n}\n\n.circle:nth-child(2) {\n bottom: 0px;\n right: 0px;\n animation-name: move-down1;\n}\n\n@keyframes move-up6 {\n to {\n transform: translateY(-5px);\n }\n}\n\n@keyframes move-down1 {\n to {\n transform: translateY(5px);\n }\n}\n\n"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"fed9d6","snapshot":null,"tags":null,"title":"button by zjssun","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1439,"cssLen":521,"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 list-style: none;\n border: none;\n background-color: transparent;\n border-radius: 50%;\n cursor: grab;\n}\n\n.button .svg {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%,-50%);\n transition: all 0.3s;\n}\n\n.button .svg2 {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%,-50%);\n fill: #f4af03;\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n.button:hover .svg {\n fill: #f4af03;\n}\n\n.button:hover .svg2 {\n opacity: 1;\n fill: #f4af03;\n}"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"b5cb8f","snapshot":null,"tags":null,"title":"button by Tsiangana","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":6474,"cssLen":2510,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n position: relative;\n padding: 12px 35px;\n background: #fec195;\n font-size: 17px;\n font-weight: 600;\n color: #fff;\n border: 3px solid #fec195;\n border-radius: 19px;\n box-shadow: 0 0 0 #fec1958c;\n transition: all 0.3s ease-in-out;\n cursor: pointer;\n}\n\n.star-1 {\n position: absolute;\n top: 20%;\n left: 20%;\n width: 25px;\n height: auto;\n filter: drop-shadow(0 0 0 #fffdef);\n z-index: -5;\n transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);\n}\n\n.star-2 {\n position: absolute;\n top: 45%;\n left: 45%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 0 #fffdef);\n z-index: -5;\n transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);\n}\n\n.star-3 {\n position: absolute;\n top: 40%;\n left: 40%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 0 #fffdef);\n z-index: -5;\n transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);\n}\n\n.star-4 {\n position: absolute;\n top: 20%;\n left: 40%;\n width: 8px;\n height: auto;\n filter: drop-shadow(0 0 0 #fffdef);\n z-index: -5;\n transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01);\n}\n\n.star-5 {\n position: absolute;\n top: 25%;\n left: 45%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 0 #fffdef);\n z-index: -5;\n transition: all 0.6s cubic-bezier(0, 0.4, 0, 1.01);\n}\n\n.star-6 {\n position: absolute;\n top: 5%;\n left: 50%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 0 #fffdef);\n z-index: -5;\n transition: all 0.8s ease;\n}\n\nbutton:hover {\n background: transparent;\n color: #fec195;\n box-shadow: 0 0 25px #fec1958c;\n}\n\nbutton:hover .star-1 {\n position: absolute;\n top: -80%;\n left: -30%;\n width: 25px;\n height: auto;\n filter: drop-shadow(0 0 10px #fffdef);\n z-index: 2;\n}\n\nbutton:hover .star-2 {\n position: absolute;\n top: -40%;\n left: 16%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 10px #fffdef);\n z-index: 2;\n}\n\nbutton:hover .star-3 {\n position: absolute;\n top: 95%;\n left: 2%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 10px #fffdef);\n z-index: 2;\n}\n\nbutton:hover .star-4 {\n position: absolute;\n top: -70%;\n left: 75%;\n width: 8px;\n height: auto;\n filter: drop-shadow(0 0 10px #fffdef);\n z-index: 2;\n}\n\nbutton:hover .star-5 {\n position: absolute;\n top: 35%;\n left: 115%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 10px #fffdef);\n z-index: 2;\n}\n\nbutton:hover .star-6 {\n position: absolute;\n top: 75%;\n left: 60%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 10px #fffdef);\n z-index: 2;\n}\n\n.fil0 {\n fill: #fffdef;\n}\n"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"53e5a3","snapshot":null,"tags":null,"title":"button by themarcBlanchard","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":40,"cssLen":443,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n padding: .5rem 2rem;\n border-radius: 5px;\n font-weight: 600;\n border: 1px solid black;\n}\n\nbutton:hover {\n background-color: #1a5cff;\n color: white;\n transform: scale(1.1);\n font-weight: 700;\n -webkit-box-shadow: 7px 7px 23px -12px rgba(26,91,255,1);\n -moz-box-shadow: 7px 7px 23px -12px rgba(26,91,255,1);\n box-shadow: 7px 7px 23px -12px rgba(26,91,255,1);\n border: none;\n}\n\nbutton:active {\n background-color: #1752e5;\n}"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"cce8d5","snapshot":null,"tags":null,"title":"button by mrhyddenn","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":117,"cssLen":1550,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".icon-btn {\n width: 50px;\n height: 50px;\n border: 1px solid #cdcdcd;\n background: white;\n border-radius: 25px;\n overflow: hidden;\n position: relative;\n transition: width 0.2s ease-in-out;\n font-weight: 500;\n font-family: inherit;\n}\n\n.add-btn:hover {\n width: 120px;\n}\n\n.add-btn::before,\n.add-btn::after {\n transition: width 0.2s ease-in-out, border-radius 0.2s ease-in-out;\n content: \"\";\n position: absolute;\n height: 4px;\n width: 10px;\n top: calc(50% - 2px);\n background: seagreen;\n}\n\n.add-btn::after {\n right: 14px;\n overflow: hidden;\n border-top-right-radius: 2px;\n border-bottom-right-radius: 2px;\n}\n\n.add-btn::before {\n left: 14px;\n border-top-left-radius: 2px;\n border-bottom-left-radius: 2px;\n}\n\n.icon-btn:focus {\n outline: none;\n}\n\n.btn-txt {\n opacity: 0;\n transition: opacity 0.2s;\n}\n\n.add-btn:hover::before,\n.add-btn:hover::after {\n width: 4px;\n border-radius: 2px;\n}\n\n.add-btn:hover .btn-txt {\n opacity: 1;\n}\n\n.add-icon::after,\n.add-icon::before {\n transition: all 0.2s ease-in-out;\n content: \"\";\n position: absolute;\n height: 20px;\n width: 2px;\n top: calc(50% - 10px);\n background: seagreen;\n overflow: hidden;\n}\n\n.add-icon::before {\n left: 22px;\n border-top-left-radius: 2px;\n border-bottom-left-radius: 2px;\n}\n\n.add-icon::after {\n right: 22px;\n border-top-right-radius: 2px;\n border-bottom-right-radius: 2px;\n}\n\n.add-btn:hover .add-icon::before {\n left: 15px;\n height: 4px;\n top: calc(50% - 2px);\n}\n\n.add-btn:hover .add-icon::after {\n right: 15px;\n height: 4px;\n top: calc(50% - 2px);\n}"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"5ca051","snapshot":null,"tags":null,"title":"button by SelfMadeSystem","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1199,"cssLen":1561,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n border-radius: 0.5em;\n font-size: larger;\n height: 3em;\n width: 6em;\n position: relative;\n border: none;\n background-color: hsl(218, 68%, 52%);\n overflow: hidden;\n isolation: isolate;\n color: white;\n box-shadow: 1px 2px 4px #0007;\n transition: background-color 0.2s;\n}\n\n.btn:hover {\n background-color: hsl(218, 68%, 47%);\n}\n\n.btn > span {\n position: relative;\n pointer-events: none;\n z-index: 10;\n}\n\n.ripple-container {\n position: absolute;\n inset: 0;\n display: grid;\n grid-template-columns: repeat(12, 0.5em);\n}\n\n.ripple-container > span {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.ripple-container > span::after {\n content: \"\";\n pointer-events: none;\n position: absolute;\n background-color: hsl(218, 68%, 65%);\n transition: width 0.5s ease-out, height 0.5s ease-out, opacity 1s;\n width: 13em;\n height: 13em;\n opacity: 0;\n border-radius: 999em;\n}\n\n.ripple-container > span:active::after {\n transition: 0s;\n width: 0em;\n height: 0em;\n opacity: 1;\n}\n\n/*\nUse this instead if you want the ripple to start\nimmediately on click but end abruptly on unclick:\n\n.ripple-container > span::after {\n content: \"\";\n pointer-events: none;\n position: absolute;\n background-color: hsl(218, 68%, 65%);\n width: 0em;\n height: 0em;\n border-radius: 999em;\n opacity: 1;\n}\n\n.ripple-container > span:active::after {\n transition: width 0.25s ease-out, height 0.25s ease-out, opacity 0.75s;\n width: 13em;\n height: 13em;\n opacity: 0;\n}\n\nYour Global selectors gets triggered by this:\n*/"}]}},"actionData":null,"errors":null}