{"loaderData":{"0":null,"0-2":{"total":7070,"projects":[{"created":"2024-01-22T17:00:47.000Z","isPrivate":0,"projectId":"4fe1b2","snapshot":null,"tags":null,"title":"button by faxriddin20","updated":"2024-01-22T17:00:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1243,"cssLen":2856,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn {\n height: 4em;\n width: 12em;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border: 0px solid black;\n cursor: pointer;\n font-family: sans-serif;\n font-weight: bold;\n}\n\n.wrapper {\n height: 2em;\n width: 8em;\n position: relative;\n background: transparent;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.text {\n font-size: 17px;\n z-index: 1;\n color: #000;\n padding: 4px 12px;\n border-radius: 4px;\n background: rgba(255, 255, 255, 0.7);\n transition: none 0.5s;\n}\n\n.flower {\n display: grid;\n grid-template-columns: 1em 1em;\n position: absolute;\n transition: none 0.5s;\n}\n\n.flower1 {\n top: -12px;\n left: -13px;\n transform: rotate(5deg);\n}\n\n.flower2 {\n bottom: -5px;\n left: 8px;\n transform: rotate(35deg);\n}\n\n.flower3 {\n bottom: -15px;\n transform: rotate(0deg);\n}\n\n.flower4 {\n top: -14px;\n transform: rotate(15deg);\n}\n\n.flower5 {\n right: 11px;\n top: -3px;\n transform: rotate(25deg);\n}\n\n.flower6 {\n right: -15px;\n bottom: -15px;\n transform: rotate(30deg);\n}\n\n.petal {\n height: 1em;\n width: 1em;\n border-radius: 40% 70% / 7% 90%;\n background: violet;\n border: 0.5px solid purple;\n z-index: 0;\n transition: width 0.4s, height 0.4s step-start;\n}\n\n.two {\n transform: rotate(90deg);\n}\n\n.three {\n transform: rotate(270deg);\n}\n\n.four {\n transform: rotate(180deg);\n}\n\n.btn:hover .petal {\n background: violet;\n border: 0.5px solid purple;\n}\n\n.btn:hover .flower {\n grid-template-columns: 1.5em 1.5em;\n}\n\n.btn:hover .flower .petal {\n width: 1.5em;\n height: 1.5em;\n}\n\n.btn:hover .text {\n background: rgba(255, 255, 255, 0.4);\n}\n\n.btn:hover div.flower1 {\n animation: 15s linear 0s normal none infinite running flower1;\n}\n\n@keyframes flower1 {\n 0% {\n transform: rotate(5deg);\n }\n\n 100% {\n transform: rotate(365deg);\n }\n}\n\n.btn:hover div.flower2 {\n animation: 13s linear 1s normal none infinite running flower2;\n}\n\n@keyframes flower2 {\n 0% {\n transform: rotate(35deg);\n }\n\n 100% {\n transform: rotate(-325deg);\n }\n}\n\n.btn:hover div.flower3 {\n animation: 16s linear 1s normal none infinite running flower3;\n}\n\n@keyframes flower3 {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.btn:hover div.flower4 {\n animation: 17s linear 1s normal none infinite running flower4;\n}\n\n@keyframes flower4 {\n 0% {\n transform: rotate(15deg);\n }\n\n 100% {\n transform: rotate(375deg);\n }\n}\n\n.btn:hover div.flower5 {\n animation: 20s linear 1s normal none infinite running flower5;\n}\n\n@keyframes flower5 {\n 0% {\n transform: rotate(25deg);\n }\n\n 100% {\n transform: rotate(-335deg);\n }\n}\n\n.btn:hover div.flower6 {\n animation: 15s linear 1s normal none infinite running flower6;\n}\n\n@keyframes flower6 {\n 0% {\n transform: rotate(30deg);\n }\n\n 100% {\n transform: rotate(390deg);\n }\n}\n"},{"created":"2024-01-22T17:00:47.000Z","isPrivate":0,"projectId":"89c4b6","snapshot":null,"tags":null,"title":"button by Lealdos","updated":"2024-01-22T17:00:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":627,"cssLen":1111,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".Btn {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: 45px;\n height: 45px;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n transition-duration: 0.3s;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);\n background-color: RGB(29, 185, 84);\n}\n\n/* plus sign */\n.sign {\n width: 100%;\n transition-duration: 0.3s;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.sign svg {\n width: 18px;\n}\n\n.sign svg path {\n fill: black;\n}\n/* text */\n.text {\n position: absolute;\n right: 0%;\n width: 0%;\n opacity: 0;\n color: black;\n font-size: 1.2em;\n font-weight: 600;\n transition-duration: 0.3s;\n}\n/* hover effect on button width */\n.Btn:hover {\n width: 125px;\n border-radius: 40px;\n transition-duration: 0.3s;\n}\n\n.Btn:hover .sign {\n width: 30%;\n transition-duration: 0.3s;\n padding-left: 20px;\n}\n/* hover effect button's text */\n.Btn:hover .text {\n opacity: 1;\n width: 70%;\n transition-duration: 0.3s;\n padding-right: 10px;\n}\n/* button click effect*/\n.Btn:active {\n transform: translate(2px, 2px);\n}\n"},{"created":"2024-01-22T17:00:47.000Z","isPrivate":0,"projectId":"f4ac1f","snapshot":null,"tags":null,"title":"button by LightAndy1","updated":"2024-01-22T17:00:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1180,"cssLen":620,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".signin {\n float: right;\n max-width: 320px;\n display: flex;\n padding: 0.5rem 1.4rem;\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 700;\n text-align: center;\n font-family: \"Montserrat\", sans-serif;\n vertical-align: middle;\n align-items: center;\n border-radius: 0.5rem;\n border: 1px solid rgba(255, 255, 255, 0.25);\n gap: 0.75rem;\n color: #c4d2dc;\n background-color: #19242b;\n cursor: pointer;\n transition: all 0.25s cubic-bezier(0, 0.87, 0.12, 1);\n}\n\n.signin:hover {\n transform: scale(1.025);\n}\n\n.signin:active {\n transform: scale(0.975);\n}\n\nbutton svg {\n height: 24px;\n width: auto;\n}\n"},{"created":"2024-01-22T17:00:47.000Z","isPrivate":0,"projectId":"030fd1","snapshot":null,"tags":null,"title":"button by seyed-mohsen-mousavi","updated":"2024-01-22T17:00:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":604,"cssLen":2050,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n\n Delete\n\n","css":".mr-2 {\n margin-right: 0.5rem;\n}\n.inline-flex {\n display: inline-flex;\n}\n.h-5 {\n height: 1.25rem;\n}\n.w-5 {\n width: 1.25rem;\n}\n.items-center {\n align-items: center;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.bg-red-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(220 38 38 / var(--tw-bg-opacity));\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.font-medium {\n font-weight: 500;\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / 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.delay-75 {\n transition-delay: 75ms;\n}\n.ease-in-out {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.hover\\:-translate-y-1:hover {\n --tw-translate-y: -0.25rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.hover\\:scale-110:hover {\n --tw-scale-x: 1.1;\n --tw-scale-y: 1.1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.hover\\:bg-red-700:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(185 28 28 / var(--tw-bg-opacity));\n}\n"},{"created":"2024-01-22T17:00:47.000Z","isPrivate":0,"projectId":"7a7bb3","snapshot":null,"tags":null,"title":"button by Javierrocadev","updated":"2024-01-22T17:00:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":931,"cssLen":3029,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n Hover me!\n \n \n \n Explore!\n\n","css":".absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.-left-2 {\n left: -0.5rem;\n}\n.-top-8 {\n top: -2rem;\n}\n.left-6 {\n left: 1.5rem;\n}\n.top-2 {\n top: 0.5rem;\n}\n.top-2\\.5 {\n top: 0.625rem;\n}\n.z-10 {\n z-index: 10;\n}\n.h-12 {\n height: 3rem;\n}\n.h-32 {\n height: 8rem;\n}\n.w-32 {\n width: 8rem;\n}\n.w-36 {\n width: 9rem;\n}\n.origin-left {\n transform-origin: left;\n}\n.rotate-12 {\n --tw-rotate: 12deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.scale-x-0 {\n --tw-scale-x: 0;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.border-none {\n border-style: none;\n}\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity));\n}\n.bg-indigo-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(129 140 248 / var(--tw-bg-opacity));\n}\n.bg-indigo-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(79 70 229 / var(--tw-bg-opacity));\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.p-2 {\n padding: 0.5rem;\n}\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.opacity-0 {\n opacity: 0;\n}\n.transition-transform {\n transition-property: transform;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-100 {\n transition-duration: 100ms;\n}\n.duration-1000 {\n transition-duration: 1000ms;\n}\n.duration-500 {\n transition-duration: 500ms;\n}\n.duration-700 {\n transition-duration: 700ms;\n}\n.group:hover .group-hover\\:scale-x-100 {\n --tw-scale-x: 1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.group:hover .group-hover\\:scale-x-50 {\n --tw-scale-x: 0.5;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.group:hover .group-hover\\:opacity-100 {\n opacity: 1;\n}\n.group:hover .group-hover\\:duration-1000 {\n transition-duration: 1000ms;\n}\n.group:hover .group-hover\\:duration-500 {\n transition-duration: 500ms;\n}\n.group:hover .group-hover\\:duration-700 {\n transition-duration: 700ms;\n}\n"},{"created":"2024-01-22T17:00:47.000Z","isPrivate":0,"projectId":"e98a7a","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T17:00:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":628,"cssLen":944,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n --color: #ffcd39;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all .5s;\n border: none;\n background-color: transparent;\n}\n\n.btn div {\n letter-spacing: 2px;\n font-weight: bold;\n background: var(--color);\n border-radius: 2rem;\n color: black;\n padding: 1rem;\n}\n\n.btn::before {\n content: '';\n z-index: -1;\n background-color: var(--color);\n border: 2px solid black;\n border-radius: 2rem;\n width: 110%;\n height: 100%;\n position: absolute;\n transform: rotate(10deg);\n transition: .5s;\n opacity: 0.2;\n}\n\n.btn:hover {\n cursor: pointer;\n filter: brightness(1.2);\n transform: scale(1.1);\n}\n\n.btn:hover::before {\n transform: rotate(0deg);\n opacity: 1;\n}\n\n.btn svg {\n transform: translateX(-200%);\n transition: .5s;\n width: 0;\n opacity: 0;\n}\n\n.btn:hover svg {\n width: 25px;\n transform: translateX(0%);\n opacity: 1;\n}\n\n.btn:active {\n filter: brightness(1.4);\n}"},{"created":"2024-01-22T17:00:46.000Z","isPrivate":0,"projectId":"12848a","snapshot":null,"tags":null,"title":"button by ercnersoy","updated":"2024-01-22T17:00:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":43,"cssLen":831,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n cursor: pointer;\n padding: 1rem 4rem;\n border: 0;\n background-color: rebeccapurple;\n color: white;\n box-shadow: 0px 10px 0px 0px rgb(68, 37, 99);\n transition: all 0.9s ease-in-out;\n font-weight: 600;\n font-family: \"Lucida Sans\", \"Lucida Sans Regular\", \"Lucida Grande\",\n \"Lucida Sans Unicode\", Geneva, Verdana, sans-serif;\n font-size: 1rem;\n position: relative;\n}\n.button:hover {\n box-shadow: 0px 10px 0px 0px rgb(122, 71, 173);\n background-color: rgb(80, 31, 129);\n}\n.button:active {\n box-shadow: 0px 5px 0px 0px rgb(122, 71, 173);\n text-shadow: 0 0px 0px #000;\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n left: 0;\n bottom: 0px;\n box-shadow: 0px 10px 0px 0px rgb(229, 104, 9);\n width: 0;\n height: 10px;\n transition: all 0.9s ease-in-out;\n}\n.button:hover::before {\n width: 100%;\n}\n"},{"created":"2024-01-22T17:00:46.000Z","isPrivate":0,"projectId":"6b0a0b","snapshot":null,"tags":null,"title":"button by Sujanthapast0","updated":"2024-01-22T17:00:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":444,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n border: 1px solid black;\n padding: 12px 30px 12px 30px;\n border-radius: 30px;\n background-color: #fa70fa;\n font-weight: bolder;\n font-size: 15px;\n box-shadow: 0px 0px 1px;\n transform: all 2s esase;\n transition-duration: .3s;\n}\n\nbutton:hover {\n transform: translateY(-10px);\n box-shadow: 0px 7px 1px rgb(0, 0, 0);\n border: 1px solid black;\n}\n\nbutton:active {\n transform: translateY(10px);\n box-shadow: 0px 0px 1px;\n}\n \n\n"},{"created":"2024-01-22T17:00:46.000Z","isPrivate":0,"projectId":"b463fa","snapshot":null,"tags":null,"title":"button by Laurits123456","updated":"2024-01-22T17:00:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":176,"cssLen":1122,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n \n","css":"/*pushing a hamburger menu into a pillow texture like background*/\n\n.menuButton {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n gap: 13%;\n color: #090909;\n width: 3.5em;\n height: 3.5em;\n border-radius: 0.5em;\n background: #171717;\n border: 1px solid #171717;\n transition: all .3s;\n box-shadow: inset 4px 4px 12px #3a3a3a,\n inset -4px -4px 12px #000000;\n}\n\n.menuButton:hover {\n border: 1px solid black;\n}\n\n.menuButton:active {\n color: #666;\n box-shadow: 6px 6px 12px #3a3a3a,\n -6px -6px 12px #000000;\n}\n\ninput[type = \"checkbox\"] {\n -webkit-appearance: none;\n display: none;\n visibility: hidden;\n}\n\n.menuButton span {\n width: 30px;\n height: 4px;\n background: rgb(200,200,200);\n border-radius: 100px;\n transition: 0.3s ease;\n}\n\ninput[type]:checked ~ span.top {\n transform: translateY(290%)rotate(45deg);\n width: 40px;\n}\n\ninput[type]:checked ~ span.bot {\n transform: translateY(-270%) rotate(-45deg);\n width: 40px;\n box-shadow: 0 0 10px #495057;\n}\n\ninput[type]:checked ~ span.mid {\n transform: translateX(-20px);\n opacity: 0;\n}"},{"created":"2024-01-22T17:00:46.000Z","isPrivate":0,"projectId":"eb30da","snapshot":null,"tags":null,"title":"button by RaspberryBee","updated":"2024-01-22T17:00:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":40,"cssLen":716,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n height: 2em;\n width: 5em;\n border-radius: 1em;\n border: 0.1rem solid transparent;\n background-color: rgb(64, 146, 239);\n transition: 0.3s;\n font-size: 1em;\n}\n\n.button:hover {\n cursor: pointer;\n transform: scale(1.05) rotate(3deg);\n}\n\n.button:active {\n animation: borderMove 0.5s forwards;\n transform: scale(0.9) rotate(-3deg);\n background-color: rgb(0, 0, 0);\n color: rgb(64, 146, 239);\n border: 0.1rem solid rgb(38, 103, 224);\n}\n\n@keyframes borderMove {\n 0% {\n border-width: 0.1rem;\n transform: scale(1) rotate(0deg);\n }\n\n 50% {\n border-width: 0.4rem;\n transform: scale(0.9) rotate(-3deg);\n }\n\n 100% {\n border-width: 0.15rem;\n transform: scale(1) rotate(0deg);\n }\n}\n"},{"created":"2024-01-22T17:00:46.000Z","isPrivate":0,"projectId":"b810b2","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":50,"cssLen":471,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".cyberpunk-button {\n background-color: #2f3640;\n color: #fff;\n border: 2px solid #ff7979;\n border-radius: 5px;\n padding: 10px 15px;\n font-size: 18px;\n text-transform: uppercase;\n letter-spacing: 2px;\n font-weight: bold;\n box-shadow: 2px 2px 10px #ff7979;\n transition: all 0.2s ease-in-out;\n}\n\n.cyberpunk-button:hover {\n background-color: #ff7979;\n color: #2f3640;\n border-color: #2f3640;\n box-shadow: 2px 2px 20px #2f3640;\n transform: translateY(-2px);\n}\n"},{"created":"2024-01-22T17:00:46.000Z","isPrivate":0,"projectId":"cb67f4","snapshot":null,"tags":null,"title":"button by ahmed150up2","updated":"2024-01-22T17:00:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":48,"cssLen":2634,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".delete-button {\n background-color: #000;\n color: #fff;\n font-size: 24px;\n border: 0.5px solid rgba(0, 0, 0, 0.1);\n padding-bottom: 8px;\n width: 300px;\n height: 65px;\n border-radius: 15px 15px 12px 12px;\n cursor: pointer;\n position: relative;\n will-change: transform;\n transition: all .1s ease-in-out 0s;\n user-select: none;\n background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)),\n linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n background-position: bottom right, bottom right;\n background-size: 100% 100%, 100% 100%;\n background-repeat: no-repeat;\n box-shadow: inset -4px -10px 0px rgba(255, 255, 255, 0.4),\n inset -4px -8px 0px rgba(0, 0, 0, 0.3),\n 0px 2px 1px rgba(0, 0, 0, 0.3),\n 0px 2px 1px rgba(255, 255, 255, 0.1);\n transform: perspective(70px) rotateX(5deg) rotateY(0deg);\n}\n\n.delete-button::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.5));\n z-index: -1;\n border-radius: 15px;\n box-shadow: inset 4px 0px 0px rgba(255, 255, 255, 0.1),\n inset 4px -8px 0px rgba(0, 0, 0, 0.3);\n transition: all .1s ease-in-out 0s;\n}\n\n.delete-button::before {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)),\n linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n background-position: bottom right, bottom right;\n background-size: 100% 100%, 100% 100%;\n background-repeat: no-repeat;\n z-index: -1;\n border-radius: 15px;\n transition: all .1s ease-in-out 0s;\n}\n\n.delete-button:active {\n will-change: transform;\n transform: perspective(80px) rotateX(5deg) rotateY(1deg) translateY(3px) scale(0.96);\n height: 64px;\n border: 0.25px solid rgba(0, 0, 0, 0.2);\n box-shadow: inset -4px -8px 0px rgba(255, 255, 255, 0.2),\n inset -4px -6px 0px rgba(0, 0, 0, 0.8),\n 0px 1px 0px rgba(0, 0, 0, 0.9),\n 0px 1px 0px rgba(255, 255, 255, 0.2);\n transition: all .1s ease-in-out 0s;\n}\n\n.delete-button::after:active {\n background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.2));\n}\n\n.delete-button:active::before {\n content: \"\";\n display: block;\n position: absolute;\n top: 5%;\n left: 20%;\n width: 50%;\n height: 80%;\n background-color: rgba(255, 255, 255, 0.1);\n animation: overlay 0.1s ease-in-out 0s;\n pointer-events: none;\n}\n\n@keyframes overlay {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.delete-button:focus {\n outline: none;\n}"}]}},"actionData":null,"errors":null}