{"loaderData":{"0":null,"0-2":{"total":7091,"projects":[{"created":"2024-01-22T17:00:05.000Z","isPrivate":0,"projectId":"834cd8","snapshot":null,"tags":null,"title":"button by boryanakrasteva","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":62,"cssLen":780,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n width: 30px;\n height: 50px;\n border-radius: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n border: none;\n outline: 2px solid rgb(105, 127, 255);\n box-shadow: 0px 0px 10px rgb(105, 127, 255);\n position: relative;\n}\n\n.scroll {\n width: 5px;\n height: 10px;\n border-radius: 10px;\n background-color: rgb(105, 127, 255);\n box-shadow: 0px 0px 10px rgb(105, 127, 255);\n animation: scroll_4013 2s linear infinite;\n transform: translateY(40%);\n}\n\n.btn:after {\n content: 'scroll';\n position: absolute;\n top: 140%;\n color: whitesmoke;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n}\n\n@keyframes scroll_4013 {\n 0% {\n transform: translateY(40%);\n }\n\n 50% {\n transform: translateY(90%);\n }\n};"},{"created":"2024-01-22T17:00:05.000Z","isPrivate":0,"projectId":"3f3d9d","snapshot":null,"tags":null,"title":"button by Javierrocadev","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":931,"cssLen":2760,"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-right {\n transform-origin: right;\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-sky-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(186 230 253 / var(--tw-bg-opacity));\n}\n.bg-sky-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(56 189 248 / var(--tw-bg-opacity));\n}\n.bg-sky-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(2 132 199 / 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\\: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:05.000Z","isPrivate":0,"projectId":"f24433","snapshot":null,"tags":null,"title":"button by NguyenHaiNam24082000","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":91,"cssLen":1657,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n","css":".background-button {\n background: repeating-linear-gradient(\n 45deg,\n #3c2209 0 20px,\n #ff9c00 20px 40px\n );\n width: 10em;\n height: 10em;\n -webkit-box-shadow: 15px 15px 50px 5px #5f5f5f;\n box-shadow: 15px 15px 50px 5px #5f5f5f;\n position: relative;\n display: inline-block;\n outline: 2px solid black;\n}\n\n.background-button::before {\n content: \"\";\n display: inline-block;\n position: absolute;\n top: 15%;\n left: 15%;\n width: 70%;\n height: 70%;\n background: #a0b8c4;\n border: 2px solid #3c2209;\n}\n\n.button {\n background: #cc2a1f;\n width: 65%;\n height: 65%;\n border-radius: 50%;\n position: absolute;\n top: 7.5%;\n left: 18.25%;\n color: white;\n font-size: 1em;\n font-weight: 900;\n font-family: 'Courier New', Courier, monospace;\n -webkit-box-shadow: 0 15px 0 0 #842a2a;\n box-shadow: 0 15px 0 0 #842a2a;\n -webkit-transition: all .5s ease;\n transition: all .5s ease;\n border: 2px solid black;\n}\n\n.button:active {\n -webkit-box-shadow: 0 1px 1px 1px #8C0606;\n box-shadow: 0 1px 1px 1px #8C0606;\n top: 15%;\n}\n\n.background-button:has(.button:active) + .emergency {\n display: block;\n -webkit-transform: rotate(0deg) scaleY(1);\n -ms-transform: rotate(0deg) scaleY(1);\n transform: rotate(0deg) scaleY(1);\n -webkit-animation: anims 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);\n animation: anims 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);\n}\n\n@keyframes anims {\n 0% {\n -webkit-transform: rotate(-30deg) scaleY(0.25);\n transform: rotate(-30deg) scaleY(0.25);\n }\n\n 100% {\n -webkit-transform: rotate(0deg) scaleY(1);\n transform: rotate(0deg) scaleY(1);\n }\n}\n\n.emergency {\n position: absolute;\n display: none;\n}\n"},{"created":"2024-01-22T17:00:05.000Z","isPrivate":0,"projectId":"9a344b","snapshot":null,"tags":null,"title":"button by mRcOol7","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":377,"cssLen":1150,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background: linear-gradient(\n to bottom right,\n rgb(69, 120, 255),\n rgb(255, 69, 69)\n );\n border: none;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.164);\n cursor: pointer;\n transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;\n overflow: hidden;\n position: relative;\n}\n\n.svgIcon {\n width: 12px;\n transition: transform 0.3s ease-in-out;\n}\n\n.svgIcon path {\n fill: white;\n}\n\n.button:hover {\n width: 140px;\n border-radius: 50px;\n transform: scale(1.1);\n color: rgba(255, 255, 255, 0.9);\n box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);\n}\n\n.button:hover .svgIcon {\n width: 50px;\n transform: translateY(60%);\n}\n\n.button::before {\n position: absolute;\n top: -20px;\n content: \"Delete\";\n color: white;\n transition: font-size 0.3s ease-in-out, opacity 0.3s ease-in-out,\n transform 0.3s ease-in-out, color 0.3s ease-in-out;\n font-size: 2px;\n}\n\n.button:hover::before {\n font-size: 13px;\n opacity: 1;\n transform: translateY(30px);\n color: rgba(255, 255, 255, 0.9);\n}\n"},{"created":"2024-01-22T17:00:05.000Z","isPrivate":0,"projectId":"f39991","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1466,"cssLen":970,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".bin-button {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 55px;\n height: 55px;\n border-radius: 50%;\n background-color: rgb(255, 95, 95);\n cursor: pointer;\n border: 2px solid rgb(255, 201, 201);\n transition-duration: 0.3s;\n position: relative;\n overflow: hidden;\n}\n.bin-bottom {\n width: 15px;\n z-index: 2;\n}\n.bin-top {\n width: 17px;\n transform-origin: right;\n transition-duration: 0.3s;\n z-index: 2;\n}\n.bin-button:hover .bin-top {\n transform: rotate(45deg);\n}\n.bin-button:hover {\n background-color: rgb(255, 0, 0);\n}\n.bin-button:active {\n transform: scale(0.9);\n}\n.garbage {\n position: absolute;\n width: 14px;\n height: auto;\n z-index: 1;\n opacity: 0;\n transition: all 0.3s;\n}\n.bin-button:hover .garbage {\n animation: throw 0.4s linear;\n}\n@keyframes throw {\n from {\n transform: translate(-400%, -700%);\n opacity: 0;\n }\n to {\n transform: translate(0%, 0%);\n opacity: 1;\n }\n}\n"},{"created":"2024-01-22T17:00:05.000Z","isPrivate":0,"projectId":"582bd4","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":455,"cssLen":1961,"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-sky-400 {\n --tw-border-opacity: 1;\n border-color: rgb(56 189 248 / var(--tw-border-opacity))\n}\n\n.bg-sky-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(56 189 248 / var(--tw-bg-opacity))\n}\n\n.bg-sky-950 {\n --tw-bg-opacity: 1;\n background-color: rgb(8 47 73 / 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-sky-400 {\n --tw-text-opacity: 1;\n color: rgb(56 189 248 / 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-sky-400 {\n --tw-shadow-color: #38bdf8;\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:05.000Z","isPrivate":0,"projectId":"1fa45e","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":576,"cssLen":5523,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".uiverse {\n --duration: 7s;\n --easing: linear;\n --c-color-1: #ff5252;\n /* Changed to red */\n --c-color-2: #00bcd4;\n /* Changed to cyan */\n --c-color-3: #9c27b0;\n /* Changed to purple */\n --c-color-4: #ffeb3b;\n /* Changed to yellow */\n --c-shadow: rgba(0, 0, 0, 0.3);\n /* Changed shadow color */\n --c-shadow-inset-top: rgba(0, 0, 0, 0.5);\n /* Changed shadow color */\n --c-shadow-inset-bottom: rgba(0, 0, 0, 0.4);\n /* Changed shadow color */\n --c-radial-inner: #ff4081;\n /* Changed to pink */\n --c-radial-outer: #2196f3;\n /* Changed to blue */\n --c-color: #fff;\n -webkit-tap-highlight-color: transparent;\n -webkit-appearance: none;\n outline: none;\n position: relative;\n cursor: pointer;\n border: none;\n display: table;\n border-radius: 24px;\n padding: 0;\n margin: 0;\n text-align: center;\n font-weight: 600;\n font-size: 16px;\n letter-spacing: 0.02em;\n line-height: 1.5;\n color: var(--c-color);\n background: radial-gradient(circle, var(--c-radial-inner), var(--c-radial-outer) 80%);\n box-shadow: 0 0 14px var(--c-shadow);\n}\n\n.uiverse:before {\n content: '';\n pointer-events: none;\n position: absolute;\n z-index: 3;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n border-radius: 24px;\n box-shadow: inset 0 3px 12px var(--c-shadow-inset-top), inset 0 -3px 4px var(--c-shadow-inset-bottom);\n}\n\n.uiverse .wrapper {\n -webkit-mask-image: -webkit-radial-gradient(white, black);\n overflow: hidden;\n border-radius: 24px;\n min-width: 132px;\n padding: 12px 0;\n}\n\n.uiverse .wrapper span {\n display: inline-block;\n position: relative;\n z-index: 1;\n}\n\n.uiverse .wrapper .circle {\n position: absolute;\n left: 0;\n top: 0;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n filter: blur(var(--blur, 8px));\n background: var(--background, transparent);\n transform: translate(var(--x, 0), var(--y, 0)) translateZ(0);\n animation: var(--animation, none) var(--duration) var(--easing) infinite;\n}\n\n.uiverse .wrapper .circle.circle-1, .uiverse .wrapper .circle.circle-9, .uiverse .wrapper .circle.circle-10 {\n --background: var(--c-color-4);\n}\n\n.uiverse .wrapper .circle.circle-3, .uiverse .wrapper .circle.circle-4 {\n --background: var(--c-color-2);\n --blur: 14px;\n}\n\n.uiverse .wrapper .circle.circle-5, .uiverse .wrapper .circle.circle-6 {\n --background: var(--c-color-3);\n --blur: 16px;\n}\n\n.uiverse .wrapper .circle.circle-2, .uiverse .wrapper .circle.circle-7, .uiverse .wrapper .circle.circle-8, .uiverse .wrapper .circle.circle-11, .uiverse .wrapper .circle.circle-12 {\n --background: var(--c-color-1);\n --blur: 12px;\n}\n\n.uiverse .wrapper .circle.circle-1 {\n --x: 0;\n --y: -40px;\n --animation: circle-1;\n}\n\n.uiverse .wrapper .circle.circle-2 {\n --x: 92px;\n --y: 8px;\n --animation: circle-2;\n}\n\n.uiverse .wrapper .circle.circle-3 {\n --x: -12px;\n --y: -12px;\n --animation: circle-3;\n}\n\n.uiverse .wrapper .circle.circle-4 {\n --x: 80px;\n --y: -12px;\n --animation: circle-4;\n}\n\n.uiverse .wrapper .circle.circle-5 {\n --x: 12px;\n --y: -4px;\n --animation: circle-5;\n}\n\n.uiverse .wrapper .circle.circle-6 {\n --x: 56px;\n --y: 16px;\n --animation: circle-6;\n}\n\n.uiverse .wrapper .circle.circle-7 {\n --x: 8px;\n --y: 28px;\n --animation: circle-7;\n}\n\n.uiverse .wrapper .circle.circle-8 {\n --x: 28px;\n --y: -4px;\n --animation: circle-8;\n}\n\n.uiverse .wrapper .circle.circle-9 {\n --x: 20px;\n --y: -12px;\n --animation: circle-9;\n}\n\n.uiverse .wrapper .circle.circle-10 {\n --x: 64px;\n --y: 16px;\n --animation: circle-10;\n}\n\n.uiverse .wrapper .circle.circle-11 {\n --x: 4px;\n --y: 4px;\n --animation: circle-11;\n}\n\n.uiverse .wrapper .circle.circle-12 {\n --blur: 14px;\n --x: 52px;\n --y: 4px;\n --animation: circle-12;\n}\n\n@keyframes circle-1 {\n 33% {\n transform: translate(0px, 16px) translateZ(0);\n }\n\n 66% {\n transform: translate(12px, 64px) translateZ(0);\n }\n}\n\n@keyframes circle-2 {\n 33% {\n transform: translate(80px, -10px) translateZ(0);\n }\n\n 66% {\n transform: translate(72px, -48px) translateZ(0);\n }\n}\n\n@keyframes circle-3 {\n 33% {\n transform: translate(20px, 12px) translateZ(0);\n }\n\n 66% {\n transform: translate(12px, 4px) translateZ(0);\n }\n}\n\n@keyframes circle-4 {\n 33% {\n transform: translate(76px, -12px) translateZ(0);\n }\n\n 66% {\n transform: translate(112px, -8px) translateZ(0);\n }\n}\n\n@keyframes circle-5 {\n 33% {\n transform: translate(84px, 28px) translateZ(0);\n }\n\n 66% {\n transform: translate(40px, -32px) translateZ(0);\n }\n}\n\n@keyframes circle-6 {\n 33% {\n transform: translate(28px, -16px) translateZ(0);\n }\n\n 66% {\n transform: translate(76px, -56px) translateZ(0);\n }\n}\n\n@keyframes circle-7 {\n 33% {\n transform: translate(8px, 28px) translateZ(0);\n }\n\n 66% {\n transform: translate(20px, -60px) translateZ(0);\n }\n}\n\n@keyframes circle-8 {\n 33% {\n transform: translate(32px, -4px) translateZ(0);\n }\n\n 66% {\n transform: translate(56px, -20px) translateZ(0);\n }\n}\n\n@keyframes circle-9 {\n 33% {\n transform: translate(20px, -12px) translateZ(0);\n }\n\n 66% {\n transform: translate(80px, -8px) translateZ(0);\n }\n}\n\n@keyframes circle-10 {\n 33% {\n transform: translate(68px, 20px) translateZ(0);\n }\n\n 66% {\n transform: translate(100px, 28px) translateZ(0);\n }\n}\n\n@keyframes circle-11 {\n 33% {\n transform: translate(4px, 4px) translateZ(0);\n }\n\n 66% {\n transform: translate(68px, 20px) translateZ(0);\n }\n}\n\n@keyframes circle-12 {\n 33% {\n transform: translate(56px, 0px) translateZ(0);\n }\n\n 66% {\n transform: translate(60px, -32px) translateZ(0);\n }\n}"},{"created":"2024-01-22T17:00:05.000Z","isPrivate":0,"projectId":"184e61","snapshot":null,"tags":null,"title":"button by SteveBloX","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":43,"cssLen":944,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n border-radius: 8px;\n height: 40px;\n border: none;\n background: #222;\n color: white;\n padding: 15px;\n box-shadow: 0 0.7065919983928324px 0.7065919983928324px -0.625px #00000026,\n 0 1.8065619053231785px 1.8065619053231785px -1.25px #00000025,\n 0 3.6217592146567767px 3.6217592146567767px -1.875px #00000023,\n 0 6.8655999097303715px 6.8655999097303715px -2.5px #00000020,\n 0 13.646761411524492px 13.646761411524492px -3.125px #0000001b,\n 0 30px 30px -3.75px #0000000d;\n font-weight: bold;\n font-family: Montserrat;\n cursor: pointer;\n display: flex;\n align-items: center;\n transition: 150ms ease-in-out;\n}\n\n.button:active {\n scale: 0.95;\n background: #fff;\n color: black;\n box-shadow: rgba(0, 0, 0, 0.26) 0px 0.637473px 1.14745px -1.125px,\n rgba(0, 0, 0, 0.24) 0px 1.93094px 3.4757px -2.25px,\n rgba(0, 0, 0, 0.192) 0px 5.10423px 9.18761px -3.375px,\n rgba(0, 0, 0, 0.03) 0px 16px 28.8px -4.5px;\n}\n"},{"created":"2024-01-22T17:00:05.000Z","isPrivate":0,"projectId":"9a4813","snapshot":null,"tags":null,"title":"button by aadium","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":727,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".morph-button {\n display: relative;\n background-color: #66DA43;\n color: #66DA43;\n width: 85px;\n height: 40px;\n border: 2px solid transparent;\n cursor: pointer;\n transition: all 0.3s ease-in-out;\n}\n\n.morph-button:hover {\n transform: scale(1.5);\n}\n\n.morph-button:active {\n transform: scale(0.8);\n background-color: #212121;\n border: 2px solid #66DA43;\n}\n\n.morph-button:before {\n content: \"Twist\";\n display: block;\n position: absolute;\n margin-top: -22px;\n margin-left: -2px;\n padding: 12px 25px;\n transform-origin: center;\n transition: transform 0.3s ease-in-out;\n z-index: 1;\n background-color: #212121;\n border: 2px solid #66DA43;\n}\n\n.morph-button:hover:before {\n transform: rotate(45deg) scale(1.2);\n}\n"},{"created":"2024-01-22T17:00:05.000Z","isPrivate":0,"projectId":"44f725","snapshot":null,"tags":null,"title":"button by Yaya12085","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":382,"cssLen":699,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n","css":".signupBtn {\n width: 120px;\n height: 40px;\n border-radius: 30px;\n border: none;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding-left: 13px;\n gap: 9px;\n color: white;\n background: linear-gradient(to right,rgb(255, 128, 187),rgb(198, 128, 255));\n position: relative;\n cursor: pointer;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.212);\n font-weight: 600;\n}\n\n.arrow {\n position: absolute;\n right: 7.5px;\n background-color: rgb(255, 255, 255);\n width: 30px;\n height: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 30px;\n transition: all .5s ease;\n}\n\n.signupBtn:hover .arrow {\n width: calc(120px - (7.5px)*2);\n}\n\n"},{"created":"2024-01-22T17:00:05.000Z","isPrivate":0,"projectId":"7397ed","snapshot":null,"tags":null,"title":"button by csemszepp","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":86,"cssLen":1974,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\t

\n\t\t

\n\t

\t\n","css":".container {\n width: 1000px;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-around;\n}\n\n.container .btn {\n position: relative;\n top: 0;\n left: 0;\n width: 250px;\n height: 50px;\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.container .btn a {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n background: rgba(255, 255, 255, 0.05);\n box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 30px;\n padding: 10px;\n letter-spacing: 1px;\n text-decoration: none;\n overflow: hidden;\n color: #fff;\n font-weight: 400px;\n z-index: 1;\n transition: 0.5s;\n backdrop-filter: blur(15px);\n}\n\n.container .btn:hover a {\n letter-spacing: 3px;\n}\n\n.container .btn a::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 50%;\n height: 100%;\n background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);\n transform: skewX(45deg) translate(0);\n transition: 0.5s;\n filter: blur(0px);\n}\n\n.container .btn:hover a::before {\n transform: skewX(45deg) translate(200px);\n}\n\n.container .btn::before {\n content: \"\";\n position: absolute;\n left: 50%;\n transform: translatex(-50%);\n bottom: -5px;\n width: 30px;\n height: 10px;\n background: #f00;\n border-radius: 10px;\n transition: 0.5s;\n transition-delay: 0.5;\n}\n\n.container .btn:hover::before /*lightup button*/ {\n bottom: 0;\n height: 50%;\n width: 80%;\n border-radius: 30px;\n}\n\n.container .btn::after {\n content: \"\";\n position: absolute;\n left: 50%;\n transform: translatex(-50%);\n top: -5px;\n width: 30px;\n height: 10px;\n background: #f00;\n border-radius: 10px;\n transition: 0.5s;\n transition-delay: 0.5;\n}\n\n.container .btn:hover::after /*lightup button*/ {\n top: 0;\n height: 50%;\n width: 80%;\n border-radius: 30px;\n}\n"},{"created":"2024-01-22T17:00:04.000Z","isPrivate":0,"projectId":"40c97e","snapshot":null,"tags":null,"title":"button by boryanakrasteva","updated":"2024-01-22T17:00:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":385,"cssLen":969,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n width: 140px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: space-evenly;\n text-transform: uppercase;\n letter-spacing: 1px;\n border: none;\n position: relative;\n background-color: transparent;\n transition: .2s cubic-bezier(0.19, 1, 0.22, 1);\n opacity: 0.6;\n}\n\n.btn::after {\n content: '';\n border-bottom: 3px double rgb(214, 207, 113);\n width: 0;\n height: 100%;\n position: absolute;\n margin-top: -5px;\n top: 0;\n left: 5px;\n visibility: hidden;\n opacity: 1;\n transition: .2s linear;\n}\n\n.btn .icon {\n transform: translateX(0%);\n transition: .2s linear;\n animation: attention 1.2s linear infinite;\n}\n\n.btn:hover::after {\n visibility: visible;\n opacity: 0.7;\n width: 90%;\n}\n\n.btn:hover {\n letter-spacing: 2px;\n opacity: 1;\n}\n\n.btn:hover > .icon {\n transform: translateX(30%);\n animation: none;\n}\n\n@keyframes attention {\n 0% {\n transform: translateX(0%);\n }\n\n 50% {\n transform: translateX(30%);\n }\n}\n"}]}},"actionData":null,"errors":null}