{"loaderData":{"0":null,"0-3":{"total":7367,"projects":[{"created":"2024-01-22T17:00:26.000Z","isPrivate":0,"projectId":"9f79ea","snapshot":null,"tags":null,"title":"button by cssbuttons-io","updated":"2024-01-22T17:00:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":393,"cssLen":667,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n font-size: 17px;\n font-family: inherit;\n font-weight: 700;\n padding: 4px;\n border-radius: 20px;\n border: none;\n color: black;\n box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;\n background: linear-gradient(0deg, rgba(255,213,0,1) 0%, rgba(255,213,0,1) 47%, rgba(0,91,187,1) 47%, rgba(0,91,187,1) 100%);\n}\n\nbutton .button-content {\n display: flex;\n align-items: center;\n background: white;\n padding: 0.7em 1.5em;\n padding-left: 1.2em;\n border-radius: 16px;\n}\n\nbutton svg {\n width: 22px;\n height: 22px;\n margin-right: 6px;\n color: #ff0000;\n transition: transform 0.3s;\n}\n\nbutton:hover svg {\n transform: scale(1.2);\n}\n\n"},{"created":"2024-01-22T17:00:26.000Z","isPrivate":0,"projectId":"a5d48c","snapshot":null,"tags":null,"title":"button by Abdalrazaq3","updated":"2024-01-22T17:00:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1026,"cssLen":863,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n Save Post\n\n","css":".flex {\n display: flex;\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.items-center {\n align-items: center;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.bg-lime-950 {\n --tw-bg-opacity: 1;\n background-color: rgb(26 46 5 / var(--tw-bg-opacity));\n}\n.fill-lime-400 {\n fill: #a3e635;\n}\n.p-2 {\n padding: 0.5rem;\n}\n.pr-1 {\n padding-right: 0.25rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.text-lime-400 {\n --tw-text-opacity: 1;\n color: rgb(163 230 53 / var(--tw-text-opacity));\n}\n.duration-100 {\n transition-duration: 100ms;\n}\n.hover\\:bg-lime-900:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(54 83 20 / var(--tw-bg-opacity));\n}\n.active\\:border:active {\n border-width: 1px;\n}\n.active\\:border-lime-400:active {\n --tw-border-opacity: 1;\n border-color: rgb(163 230 53 / var(--tw-border-opacity));\n}\n"},{"created":"2024-01-22T17:00:26.000Z","isPrivate":0,"projectId":"aa2dc3","snapshot":null,"tags":null,"title":"button by abdul12commando","updated":"2024-01-22T17:00:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":185,"cssLen":989,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"/* === removing default button style ===*/\n.button {\n margin: 0;\n height: auto;\n background: transparent;\n padding: 0;\n border: none;\n}\n\n/* button styling */\n.button {\n --border-right: 6px;\n --text-stroke-color: rgba(201, 187, 187, 0.6);\n --animation-color: #8806df;\n --fs-size: 2em;\n letter-spacing: 3px;\n text-decoration: none;\n font-size: var(--fs-size);\n font-family: \"Arial\";\n position: relative;\n text-transform: uppercase;\n color: transparent;\n -webkit-text-stroke: 1px var(--text-stroke-color);\n}\n/* this is the text, when you hover on button */\n.hover-text {\n position: absolute;\n box-sizing: border-box;\n content: attr(data-text);\n color: var(--animation-color);\n width: 0%;\n inset: 0;\n border-right: var(--border-right) solid var(--animation-color);\n overflow: hidden;\n transition: 0.5s;\n -webkit-text-stroke: 1px var(--animation-color);\n}\n/* hover */\n.button:hover .hover-text {\n width: 100%;\n filter: drop-shadow(0 0 23px var(--animation-color))\n}"},{"created":"2024-01-22T17:00:26.000Z","isPrivate":0,"projectId":"032381","snapshot":null,"tags":null,"title":"button by JkHuger","updated":"2024-01-22T17:00:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":440,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".click {\n margin: 2rem auto;\n display: flex;\n background-color: #7A5FFF;\n color: white;\n cursor: pointer;\n border: none;\n font-size: 1.2rem;\n padding: 10px 15px;\n border-radius: .25rem\n}\n\n.click {\n transition: background .8s ease-out;\n background: #7A5FFF radial-gradient(circle, transparent 1%, #7A5FFF 1%) center/15000%;\n}\n\n.click:active {\n background-color: #c1b4ff;\n background-size: 100%;\n transition: background 0s;\n}\n "},{"created":"2024-01-22T17:00:26.000Z","isPrivate":0,"projectId":"f8517b","snapshot":null,"tags":null,"title":"button by sunnyshaikh","updated":"2024-01-22T17:00:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":275,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n padding: 15px 40px;\n background: linear-gradient(145deg, lightblue, blue);\n font-size: 1rem;\n border: 0;\n border-radius: 30px;\n color: #fff;\n text-shadow: 0 1px 2px rgba(0,0,0,.5);\n box-shadow: inset 0 -2px 10px rgba(0,0,0,.3),\n 0 2px 5px rgba(0,0,0,.3);\n}"},{"created":"2024-01-22T17:00:26.000Z","isPrivate":0,"projectId":"f9d7c6","snapshot":null,"tags":null,"title":"button by reshades","updated":"2024-01-22T17:00:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":339,"cssLen":467,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n background-color: #ffffff00;\n color: #fff;\n width: 8.5em;\n height: 2.9em;\n border: #ffffff 0.2em solid;\n border-radius: 11px;\n text-align: right;\n transition: all 0.6s ease;\n}\n\n.button:hover {\n background-color: #ffffff;\n color: #000\n}\n\n.button svg {\n width: 1.6em;\n margin: -0.2em 0.8em 1em;\n position: absolute;\n display: flex;\n transition: all 0.6s ease;\n}\n\n.button:hover svg {\n transform: translateX(5px);\n}\n\n.text {\n margin: 0 1.5em\n}"},{"created":"2024-01-22T17:00:25.000Z","isPrivate":0,"projectId":"92565f","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T17:00:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":465,"cssLen":1973,"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-slate-400 {\n --tw-border-opacity: 1;\n border-color: rgb(148 163 184 / var(--tw-border-opacity))\n}\n\n.bg-slate-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(148 163 184 / var(--tw-bg-opacity))\n}\n\n.bg-slate-950 {\n --tw-bg-opacity: 1;\n background-color: rgb(2 6 23 / 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-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / 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-slate-400 {\n --tw-shadow-color: #94a3b8;\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:25.000Z","isPrivate":0,"projectId":"53d1ee","snapshot":null,"tags":null,"title":"button by santhoshsj-dev","updated":"2024-01-22T17:00:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":619,"cssLen":7842,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".button {\n display: flex;\n position: relative;\n width: 200px;\n height: 60px;\n text-decoration: none;\n perspective: 600px;\n background: linear-gradient(#ffffff1a 0%, #ffffff00 30%, #ffffff00 70%, #ffffff1a);\n box-shadow: 0 0 32px #000000;\n}\n\n.button::before,\n.button::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n margin: 0 auto;\n width: 100%;\n height: 100%;\n}\n\n.button::before {\n top: 0;\n transform-origin: top center;\n transform: rotateX(70deg);\n background: linear-gradient(135deg, #ffffff4d 10%, #ffffff00 60%);\n}\n\n.button::after {\n bottom: 0;\n transform-origin: bottom center;\n transform: rotateX(-110deg);\n background: radial-gradient(#ffffff00 40%, #ffffff1a);\n}\n\n.button__wrapper {\n position: relative;\n z-index: 2;\n width: 100%;\n height: 100%;\n background: linear-gradient(#ffffff66 0%, #ffffff00 30%, #ffffff00 70%, #ffffff33);\n transform: translate3d(0, 27px, 74px);\n perspective: 600px;\n}\n\n.button__text {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n font-size: 32px;\n font-weight: 900;\n color: #ffffff33;\n transition: all ease-in-out 1s;\n}\n\n.button__text::before {\n content: '';\n position: absolute;\n z-index: 1;\n top: 0;\n left: 0;\n width: 200px;\n height: 60px;\n background: linear-gradient(25deg, #ffffff1a, #ffffff00);\n clip-path: path('M230,0H0V80H146.96c0-35.33,33.95-65.83,83.04-80Z');\n}\n\n.button__text::after {\n content: '';\n position: absolute;\n z-index: 2;\n top: 4px;\n left: 4px;\n width: 272px;\n height: 40px;\n background: linear-gradient(25deg, #ffffff4d, #ffffff00);\n clip-path: path('M272,9.22V0H0V40H.32C48.19,22.59,151.14,10.26,272,9.22Z');\n}\n\n.button__wrapper::before,\n.button__wrapper::after {\n content: '';\n position: absolute;\n top: 0;\n width: 84px;\n height: 100%;\n background: linear-gradient(90deg, #ffffff33 0%, #ffffff00 30%, #ffffff00 70%, #ffffff33);\n background: radial-gradient(#ffffff00 40%, #ffffff1a);\n}\n\n.button__wrapper::before {\n left: 0;\n transform-origin: left center;\n transform: rotateY(90deg) skewY(-20deg);\n}\n\n.button__wrapper::after {\n right: 0;\n transform-origin: right center;\n transform: rotateY(-90deg) skewY(20deg);\n}\n\n.button__box {\n position: absolute;\n top: 0;\n left: 8px;\n bottom: 0;\n margin: auto 0;\n width: 180px;\n height: 49px;\n transform: translate3d(0, 4px, 10px);\n perspective: 600px;\n}\n\n.inner {\n transition: all ease-in-out 1s;\n}\n\n.inner__back {\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n background: #64646433;\n perspective: 600px;\n}\n\n.inner__top {\n position: absolute;\n z-index: 3;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n transform-origin: top left;\n transform: rotateX(70deg);\n background: #646464cc;\n}\n\n.inner__front {\n position: absolute;\n z-index: 3;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n transform-origin: top left;\n transform: translate3d(0, 24px, 68px);\n background: #646464cc;\n}\n\n.inner__bottom {\n position: absolute;\n z-index: 2;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n transform-origin: bottom left;\n transform: rotateX(-110deg);\n background: #64646433;\n}\n\n.inner__left {\n position: absolute;\n z-index: 2;\n top: 0;\n left: 0;\n width: 68px;\n height: 100%;\n transform-origin: center left;\n transform: rotateY(-90deg) skewY(20deg);\n background: rgba(255, 0, 0, 0);\n transition: all linear .01s;\n}\n\n.inner__right {\n position: absolute;\n z-index: 2;\n top: 0;\n left: 0;\n width: 68px;\n height: 100%;\n transform-origin: center left;\n transform: rotateY(-90deg) skewY(20deg);\n background: rgba(255, 0, 0, 0);\n}\n\n.button:hover .inner__top,\n.button:hover .inner__front,\n.button:hover .inner__bottom,\n.button:hover .inner__back {\n width: 100%;\n}\n\n.button:hover .inner__left {\n background: #64646480;\n}\n\n.button:hover .inner__right {\n left: 100%;\n background: #64646480;\n}\n\n.button:hover .button__text {\n color: #ffffff;\n}\n\n.plate {\n position: absolute;\n z-index: 10;\n top: 0;\n left: -20px;\n width: 320px;\n height: 120px;\n animation-duration: 3s;\n animation-iteration-count: infinite;\n}\n\n.plate:nth-child(1) {\n animation-name: plate_1;\n}\n\n.plate:nth-child(2) {\n animation-name: plate_2;\n}\n\n.plate:nth-child(3) {\n animation-name: plate_3;\n}\n\n.plate:nth-child(4) {\n animation-name: plate_4;\n}\n\n.plate:nth-child(5) {\n animation-name: plate_5;\n}\n\n.button:hover .plate {\n animation-play-state: paused;\n}\n\n.plate:nth-child(1):hover~.button__box .inner__top,\n.plate:nth-child(1):hover~.button__box .inner__front {\n background: #d8003ccc;\n}\n\n.plate:nth-child(1):hover~.button__box .inner__left,\n.plate:nth-child(1):hover~.button__box .inner__right {\n background: #d8003c80;\n}\n\n.plate:nth-child(1):hover~.button__box .inner__back,\n.plate:nth-child(1):hover~.button__box .inner__bottom {\n background: #d8003c33;\n}\n\n.plate:nth-child(2):hover~.button__box .inner__top,\n.plate:nth-child(2):hover~.button__box .inner__front {\n background: #0064becc;\n}\n\n.plate:nth-child(2):hover~.button__box .inner__left,\n.plate:nth-child(2):hover~.button__box .inner__right {\n background: #0064be80;\n}\n\n.plate:nth-child(2):hover~.button__box .inner__back,\n.plate:nth-child(2):hover~.button__box .inner__bottom {\n background: #0064be33;\n}\n\n.plate:nth-child(3):hover~.button__box .inner__top,\n.plate:nth-child(3):hover~.button__box .inner__front {\n background: #00aa64cc;\n}\n\n.plate:nth-child(3):hover~.button__box .inner__left,\n.plate:nth-child(3):hover~.button__box .inner__right {\n background: #00aa6480;\n}\n\n.plate:nth-child(3):hover~.button__box .inner__back,\n.plate:nth-child(3):hover~.button__box .inner__bottom {\n background: #00aa6433;\n}\n\n.plate:nth-child(4):hover~.button__box .inner__top,\n.plate:nth-child(4):hover~.button__box .inner__front {\n background: #ffe614cc;\n}\n\n.plate:nth-child(4):hover~.button__box .inner__left,\n.plate:nth-child(4):hover~.button__box .inner__right {\n background: #ffe61480;\n}\n\n.plate:nth-child(4):hover~.button__box .inner__back,\n.plate:nth-child(4):hover~.button__box .inner__bottom {\n background: #ffe61433;\n}\n\n.plate:nth-child(5):hover~.button__box .inner__top,\n.plate:nth-child(5):hover~.button__box .inner__front {\n background: #9b32ffcc;\n}\n\n.plate:nth-child(5):hover~.button__box .inner__left,\n.plate:nth-child(5):hover~.button__box .inner__right {\n background: #9b32ff80;\n}\n\n.plate:nth-child(5):hover~.button__box .inner__back,\n.plate:nth-child(5):hover~.button__box .inner__bottom {\n background: #9b32ff33;\n}\n\n@keyframes plate_1 {\n 0% {\n transform: scale(1);\n }\n\n 19.9% {\n transform: scale(1);\n }\n\n 20% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(0);\n }\n}\n\n@keyframes plate_2 {\n 0% {\n transform: scale(0);\n }\n\n 19.9% {\n transform: scale(0);\n }\n\n 20% {\n transform: scale(1);\n }\n\n 39.9% {\n transform: scale(1);\n }\n\n 40% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(0);\n }\n}\n\n@keyframes plate_3 {\n 0% {\n transform: scale(0);\n }\n\n 39.9% {\n transform: scale(0);\n }\n\n 40% {\n transform: scale(1);\n }\n\n 59.9% {\n transform: scale(1);\n }\n\n 60% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(0);\n }\n}\n\n@keyframes plate_4 {\n 0% {\n transform: scale(0);\n }\n\n 59.9% {\n transform: scale(0);\n }\n\n 60% {\n transform: scale(1);\n }\n\n 79.9% {\n transform: scale(1);\n }\n\n 80% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(0);\n }\n}\n\n@keyframes plate_5 {\n 0% {\n transform: scale(0);\n }\n\n 79.9% {\n transform: scale(0);\n }\n\n 80% {\n transform: scale(1);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n.container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n background-color: #212121;\n padding: 50px 50px 80px 50px;\n border-radius: 10px;\n}"},{"created":"2024-01-22T17:00:25.000Z","isPrivate":0,"projectId":"4fd74d","snapshot":null,"tags":null,"title":"button by Yaseen549","updated":"2024-01-22T17:00:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":40,"cssLen":254,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n color: #8707ff;\n border: 2px solid #8707ff;\n border-radius: 10px;\n padding: 10px 25px;\n background: transparent;\n}\n\n.button:hover {\n box-shadow: 2px 2px 15px #8707ff inset;\n}\n\n.button:active {\n box-shadow: 2px 2px 20px #8707ff inset;\n}\n"},{"created":"2024-01-22T17:00:25.000Z","isPrivate":0,"projectId":"f34147","snapshot":null,"tags":null,"title":"button by MINOTAURO18","updated":"2024-01-22T17:00:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4060,"cssLen":570,"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

","css":".redes {\n width: 80px;\n height: auto;\n display: flex;\n flex-direction: column;\n}\n\n.redes a {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 40px;\n transition: all 0.3s ease-in-out;\n}\n\n.redes a svg {\n width: 30px;\n fill: #ffffff;\n}\n\n.redes .discord {\n background-color: rgb(0, 60, 255);\n}\n\n.redes .github {\n background-color: rgb(24, 22, 22);\n}\n\n.redes .twitter {\n background-color: #33BBFF;\n}\n\n.redes .instagram {\n background: linear-gradient(45deg, #833AB4, #FD1D1D, #F56040);\n}\n\n.redes a:hover {\n width: 90px;\n}"},{"created":"2024-01-22T17:00:25.000Z","isPrivate":0,"projectId":"dbf493","snapshot":null,"tags":null,"title":"button by Rodrypaladin","updated":"2024-01-22T17:00:25.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: 1.5em;\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: 1.3em;\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: -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\n.button:active .button__int {\n padding: 10px 30px;\n}\n\n.button:hover {\n border-radius: 0;\n}\n\n.button:hover .button__int {\n border-radius: 0;\n}\n\n.button:hover .button__int {\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"},{"created":"2024-01-22T17:00:25.000Z","isPrivate":0,"projectId":"ba4a01","snapshot":null,"tags":null,"title":"button by pamtbi","updated":"2024-01-22T17:00:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1340,"cssLen":1355,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" ","css":".button {\n display: grid;\n grid-template-columns: repeat(6, 1fr);\n grid-template-rows: repeat(4, 1fr);\n width: 70px;\n aspect-ratio: 3 / 2;\n border: none;\n border-radius: 0px;\n margin: 0 auto;\n padding: 0;\n box-shadow: 0px 5px 0px 0px rgb(102,102,102);\n transition: all .15s;\n position: relative;\n padding: 0\n}\n\n.button:hover {\n transform: translateY(-1px);\n}\n\n.button:active {\n box-shadow: none;\n transform: translateY(5px);\n}\n\n.button__bg {\n height: 100%;\n aspect-ratio: 1 / 1;\n align-self: stretch;\n}\n\n.button__bg-1, .button__bg-7, .button__bg-13, .button__bg-20, .button__bg-19, .button__bg-8, .button__bg-9, .button__bg-10, .button__bg-12 {\n background: #494949;\n}\n\n.button__bg-6, .button__bg-4, .button__bg-5, .button__bg-14, .button__bg-15, .button__bg-16, .button__bg-21 {\n background: #505050;\n}\n\n.button__bg-2, .button__bg-3, .button__bg-18, .button__bg-17 {\n background: #5a5a5a;\n}\n\n.button__bg-11, .button__bg-22 {\n background: #414141;\n}\n\n.button__bg-23, .button__bg-24 {\n background: #535353;\n}\n\n.span {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 9px;\n width: 100%;\n color: rgb(223, 217, 189);\n display: block;\n text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18;\n}\n"}]}},"actionData":null,"errors":null}