{"loaderData":{"0":null,"0-3":{"total":7365,"projects":[{"created":"2024-01-22T17:00:36.000Z","isPrivate":0,"projectId":"8d7931","snapshot":null,"tags":null,"title":"button by e-coders","updated":"2024-01-22T17:00:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":57,"cssLen":377,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button.button-3d {\n margin: 10px;\n border-right: 0;\n border-left: 0;\n border-top: 0;\n font-family: inherit;\n font-size: 24px;\n padding: 8px;\n color: rgba(255, 255, 255, 0.788);\n}\n\nbutton.button-3d:active {\n border-bottom: 0;\n}\n\nbutton.button-3d {\n cursor: pointer;\n}\n\n/* RED */\n.button-3d-red {\n border-bottom: 3px solid rgb(117, 28, 28);\n background-color: rgb(248, 91, 91);\n}"},{"created":"2024-01-22T17:00:36.000Z","isPrivate":0,"projectId":"03bbf0","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1176,"cssLen":1136,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n --main-focus: #2d8cf0;\n --font-color: #323232;\n --bg-color-sub: #dedede;\n --bg-color: #eee;\n --main-color: #323232;\n position: relative;\n width: 150px;\n height: 40px;\n cursor: pointer;\n display: flex;\n align-items: center;\n border: 2px solid var(--main-color);\n box-shadow: 4px 4px var(--main-color);\n background-color: var(--bg-color);\n border-radius: 10px;\n overflow: hidden;\n}\n\n.button, .button__icon, .button__text {\n transition: all 0.3s;\n}\n\n.button .button__text {\n transform: translateX(33px);\n color: var(--font-color);\n font-weight: 600;\n}\n\n.button .button__icon {\n position: absolute;\n transform: translateX(109px);\n height: 100%;\n width: 39px;\n background-color: var(--bg-color-sub);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.button .svg {\n width: 20px;\n fill: var(--main-color);\n}\n\n.button:hover {\n background: var(--bg-color);\n}\n\n.button:hover .button__text {\n color: transparent;\n}\n\n.button:hover .button__icon {\n width: 148px;\n transform: translateX(0);\n}\n\n.button:active {\n transform: translate(3px, 3px);\n box-shadow: 0px 0px var(--main-color);\n}"},{"created":"2024-01-22T17:00:36.000Z","isPrivate":0,"projectId":"ea9244","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1454,"cssLen":520,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n --bg-color: #fff;\n --main-color: #323232;\n width: 40px;\n height: 40px;\n border-radius: 100%;\n border: 2px solid var(--main-color);\n background-color: var(--bg-color);\n box-shadow: 4px 4px var(--main-color);\n font-size: 25px;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.2s;\n cursor: pointer;\n}\n\n.button:active {\n box-shadow: 0px 0px var(--main-color);\n transform: translate(3px, 3px);\n}\n\n.icon {\n width: 24px;\n height: 24px;\n fill: var(--main-color);\n}"},{"created":"2024-01-22T17:00:36.000Z","isPrivate":0,"projectId":"1023d3","snapshot":null,"tags":null,"title":"button by louloudev59","updated":"2024-01-22T17:00:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":283,"cssLen":2412,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.bg-red-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(252 165 165 / var(--tw-bg-opacity))\n}\n\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem\n}\n\n.py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem\n}\n\n.font-bold {\n font-weight: 700\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}\n\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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-white {\n --tw-shadow-color: #fff;\n --tw-shadow: var(--tw-shadow-colored)\n}\n\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms\n}\n\n.duration-500 {\n transition-duration: 500ms\n}\n\n.ease-in-out {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)\n}\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)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}\n\n@keyframes pulse {\n 50% {\n opacity: .5\n }\n}\n\n.hover\\:animate-pulse:hover {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite\n}\n\n.hover\\:bg-red-500:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / var(--tw-bg-opacity))\n}\n\n.hover\\:text-white:hover {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}\n\n.hover\\:brightness-110:hover {\n --tw-brightness: brightness(1.1);\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@keyframes bounce {\n 0%, 100% {\n transform: translateY(-25%);\n animation-timing-function: cubic-bezier(0.8,0,1,1)\n }\n\n 50% {\n transform: none;\n animation-timing-function: cubic-bezier(0,0,0.2,1)\n }\n}\n\n.active\\:animate-bounce:active {\n animation: bounce 1s infinite\n}"},{"created":"2024-01-22T17:00:36.000Z","isPrivate":0,"projectId":"85fe47","snapshot":null,"tags":null,"title":"button by elijahwgummer-poc","updated":"2024-01-22T17:00:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":142,"cssLen":1196,"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 display: inline-block;\n padding: 12px 24px;\n border: none;\n outline: none;\n border-radius: 50px;\n background-color: #F06C9B;\n color: #fff;\n font-size: 16px;\n font-weight: bold;\n cursor: pointer;\n overflow: hidden;\n transition: background-color 0.3s ease;\n}\n\n.button:hover {\n background-color: #F26D5F;\n}\n\n.button .text {\n position: relative;\n z-index: 2;\n}\n\n.circle-container {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n.circle {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0;\n height: 0;\n background-color: #FAD779;\n border-radius: 50%;\n opacity: 0.5;\n transition: all 0.5s ease;\n}\n\n.button:hover .circle {\n width: 200%;\n height: 200%;\n transform: translate(-50%, -50%) scale(1);\n opacity: 0;\n}\n\n.button:focus {\n box-shadow: 0 0 0 2px #FF8D55;\n outline: none;\n}\n\n.button.animated .circle {\n animation: pulse 1s infinite;\n}\n\n@keyframes pulse {\n 0% {\n box-shadow: 0 0 0 0 rgba(250, 215, 121, 0.4);\n }\n\n 70% {\n box-shadow: 0 0 0 10px rgba(250, 215, 121, 0);\n }\n\n 100% {\n box-shadow: 0 0 0 0 rgba(250, 215, 121, 0);\n }\n}\n"},{"created":"2024-01-22T17:00:36.000Z","isPrivate":0,"projectId":"6b1592","snapshot":null,"tags":null,"title":"button by KhaledMatalkah","updated":"2024-01-22T17:00:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":43,"cssLen":1463,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n display: inline-block;\n padding: 12px 24px;\n font-size: 16px;\n font-weight: bold;\n text-transform: uppercase;\n color: #fff;\n background-color: #00ccff;\n border: none;\n border-radius: 50px;\n transition: background-color 0.3s ease, transform 0.2s ease;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);\n cursor: pointer;\n position: relative;\n overflow: hidden;\n z-index: 1;\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background-color: #57575700;\n border-radius: 50%;\n transform: translate(-50%, -50%);\n transition: all 0.4s ease;\n z-index: -1;\n}\n\n.button::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);\n background-size: 30px 30px;\n opacity: 0;\n transition: opacity 0.4s ease;\n}\n\n.button:hover {\n background-color: #239ccc;\n transform: scale(1.1) rotate(5deg);\n box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);\n}\n\n.button:hover::before {\n top: 50%;\n left: 50%;\n width: 100%;\n height: 100%;\n transform: translate(-50%, -50%) rotate(45deg);\n}\n\n.button:hover::after {\n opacity: 1;\n}\n\n.button:active {\n background-color: rgb(13, 130, 207);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n transform: translateY(2px);\n}\n"},{"created":"2024-01-22T17:00:36.000Z","isPrivate":0,"projectId":"99fb20","snapshot":null,"tags":null,"title":"button by gharsh11032000","updated":"2024-01-22T17:00:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":47,"cssLen":385,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n border-radius: 8px;\n border: 1px solid transparent;\n padding: 0.6em 1.2em;\n font-size: 1em;\n font-weight: 500;\n font-family: inherit;\n background-color: #1a1a1a;\n cursor: pointer;\n color: white;\n transition: border-color 0.25s;\n}\n\n.button:hover {\n border-color: #646cff;\n}\n\n.button:focus,\n.button:focus-visible {\n outline: 4px auto -webkit-focus-ring-color;\n}\n\n\n"},{"created":"2024-01-22T17:00:36.000Z","isPrivate":0,"projectId":"850b8c","snapshot":null,"tags":null,"title":"button by Bodyhc","updated":"2024-01-22T17:00:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":44,"cssLen":770,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n --color: #560bad;\n background-color: #fff;\n font-family: inherit;\n display: inline-block;\n width: 8em;\n height: 2.6em;\n line-height: 2.5em;\n margin: 20px;\n position: relative;\n overflow: hidden;\n border: 2px solid var(--color);\n transition: color .5s;\n z-index: 1;\n font-size: 17px;\n border-radius: 6px;\n font-weight: 500;\n cursor: pointer;\n color: var(--color);\n}\n\nbutton:before {\n content: \"\";\n position: absolute;\n z-index: -1;\n background: var(--color);\n height: 150px;\n width: 200px;\n border-radius: 50px;\n bottom: 100%;\n right: 100%;\n transition: .8s ease;\n}\n\nbutton:hover {\n color: #fff;\n}\n\nbutton:hover:before {\n bottom: -30px;\n left: -30px;\n}\n\nbutton:active:before {\n background: #3a0ca3;\n transition: background 2s;\n}"},{"created":"2024-01-22T17:00:36.000Z","isPrivate":0,"projectId":"17509d","snapshot":null,"tags":null,"title":"button by John-CFO","updated":"2024-01-22T17:00:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":65,"cssLen":949,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n height: 3.5rem;\n width: 13.2rem;\n border-radius: 5px;\n border: 5px solid rgb(255, 255, 255);\n cursor: pointer;\n filter: drop-shadow(0px 0px 10px rgb(255, 255, 255));\n animation: flickering 2s linear infinite both;\n text-transform: uppercase;\n background-color: rgb(83, 82, 82);\n color: rgb(234, 234, 234);\n font-weight: 700;\n transition: 0.6s;\n box-shadow: 0px 0px 60px #1f4c65;\n -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));\n}\n\n@keyframes flickering {\n 0%,\n 100% {\n opacity: 1;\n }\n\n 41.99% {\n opacity: 1;\n }\n\n 42% {\n opacity: 0;\n }\n\n 43% {\n opacity: 0;\n }\n\n 43.01% {\n opacity: 1;\n }\n\n 47.99% {\n opacity: 1;\n }\n\n 48% {\n opacity: 0;\n }\n\n 49% {\n opacity: 0;\n }\n\n 49.01% {\n opacity: 1;\n }\n}\n\n.text {\n font-size: 1.8rem;\n font-family: Arial, Helvetica, sans-serif;\n}\n\n.btn:hover {\n background-color: black;\n border-radius: 0;\n}\n\n\n\n\n\n"},{"created":"2024-01-22T17:00:36.000Z","isPrivate":0,"projectId":"45dc37","snapshot":null,"tags":null,"title":"button by Kemboi-Dun","updated":"2024-01-22T17:00:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":61,"cssLen":724,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" ","css":".button {\n text-decoration: none;\n padding: 14px 24px;\n color: #121212;\n border: 1px solid #181818;\n overflow: hidden;\n position: relative;\n transition: color .5s .25s;\n border-radius: 2px;\n background: transparent;\n}\n\n.button::before,\n.button::after {\n content: '';\n position: absolute;\n top: 0;\n width: 50%;\n height: 100%;\n background-color: #181818;\n z-index: -1;\n transform: scaleX(0);\n transition: transform .5s cubic-bezier(.785, .135, .15, .86);\n}\n\n.button::before {\n left: 0;\n transform-origin: left;\n}\n\n.button::after {\n right: 0;\n transform-origin: right;\n}\n\n.button:hover::before,\n.button:hover::after {\n transform: scaleX(1);\n}\n\n.button:hover {\n color: #f8f8f8;\n transition-delay: .5s;\n}"},{"created":"2024-01-22T17:00:36.000Z","isPrivate":0,"projectId":"6d82a2","snapshot":null,"tags":null,"title":"button by ArturCodeCraft","updated":"2024-01-22T17:00:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":127,"cssLen":2562,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":"/* ============================ */\nbutton {\n border: none;\n background: none;\n padding: 0;\n margin: 0;\n cursor: pointer;\n font-family: inherit;\n}\n/* ============================ */\n/*