{"loaderData":{"0":null,"0-2":{"total":7095,"projects":[{"created":"2024-01-22T16:59:52.000Z","isPrivate":0,"projectId":"d7e746","snapshot":null,"tags":null,"title":"button by ArturCodeCraft","updated":"2024-01-22T16:59:52.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":44,"cssLen":469,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"Hover me!","css":"/* ============================ */\na {\n text-decoration: none;\n}\n/* ============================ */\n.menu__link {\n color: #fff;\n line-height: 2;\n position: relative;\n}\n\n.menu__link::before {\n content: '';\n width: 0;\n height: 2px;\n border-radius: 2px;\n background-color: #fff;\n position: absolute;\n bottom: -.25rem;\n right: 0;\n transition: right .4s, width .4s, left .4s;\n}\n\n.menu__link:hover::before {\n width: 100%;\n left: 0;\n}"},{"created":"2024-01-22T16:59:52.000Z","isPrivate":0,"projectId":"29f5c6","snapshot":null,"tags":null,"title":"button by abbos97","updated":"2024-01-22T16:59:52.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":47,"cssLen":896,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".moves-button {\n padding: 10px 20px;\n color: #000;\n font-weight: 900;\n border-radius: 4px;\n font-size: 16px;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n background-color: #fff;\n border: 3px solid transparent;\n border-image: linear-gradient(90deg, #f3f 20%, rgb(49, 18, 187) 60%);\n border-image-slice: 1;\n}\n\n.moves-button::after {\n content: 'Button';\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n top: 0;\n left: 100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, rgb(245, 108, 245) 20%, rgb(119, 91, 245) 60%);\n transition: transform 0.3s ease-out;\n pointer-events: none;\n color: #fff;\n}\n\n.moves-button:hover::after {\n transform: translateX(-100%);\n}\n\n.moves-button:focus {\n outline: none;\n}\n\n/* Optional styling for the button on click */\n.moves-button:active {\n transform: translateY(2px);\n}\n"},{"created":"2024-01-22T16:59:51.000Z","isPrivate":0,"projectId":"001213","snapshot":null,"tags":null,"title":"button by Cornerstone-04","updated":"2024-01-22T16:59:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":68,"cssLen":1248,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".box {\n width: 140px;\n height: auto;\n float: left;\n transition: .5s linear;\n position: relative;\n display: block;\n overflow: hidden;\n padding: 15px;\n text-align: center;\n margin: 0 5px;\n background: transparent;\n text-transform: uppercase;\n font-weight: 900;\n}\n\n.box:before {\n position: absolute;\n content: '';\n left: 0;\n bottom: 0;\n height: 4px;\n width: 100%;\n border-bottom: 4px solid transparent;\n border-left: 4px solid transparent;\n box-sizing: border-box;\n transform: translateX(100%);\n}\n\n.box:after {\n position: absolute;\n content: '';\n top: 0;\n left: 0;\n width: 100%;\n height: 4px;\n border-top: 4px solid transparent;\n border-right: 4px solid transparent;\n box-sizing: border-box;\n transform: translateX(-100%);\n}\n\n.box:hover {\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);\n}\n\n.box:hover:before {\n border-color: #262626;\n height: 100%;\n transform: translateX(0);\n transition: .3s transform linear, .3s height linear .3s;\n}\n\n.box:hover:after {\n border-color: #262626;\n height: 100%;\n transform: translateX(0);\n transition: .3s transform linear, .3s height linear .5s;\n}\n\nbutton {\n color: black;\n text-decoration: none;\n cursor: pointer;\n outline: none;\n border: none;\n background: transparent;\n}"},{"created":"2024-01-22T16:59:51.000Z","isPrivate":0,"projectId":"fc1656","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T16:59:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":543,"cssLen":608,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".cssbuttons-io-button {\n display: flex;\n align-items: center;\n font-family: inherit;\n font-weight: 500;\n font-size: 17px;\n padding: 0.8em 1.5em 0.8em 1.2em;\n color: white;\n background: #ad5389;\n background: linear-gradient(0deg, rgba(77,54,208,1) 0%, rgba(132,116,254,1) 100%);\n border: none;\n box-shadow: 0 0.7em 1.5em -0.5em #4d36d0be;\n letter-spacing: 0.05em;\n border-radius: 20em;\n}\n\n.cssbuttons-io-button svg {\n margin-right: 8px;\n}\n\n.cssbuttons-io-button:hover {\n box-shadow: 0 0.5em 1.5em -0.5em #4d36d0be;\n}\n\n.cssbuttons-io-button:active {\n box-shadow: 0 0.3em 1em -0.5em #4d36d0be;\n}"},{"created":"2024-01-22T16:59:51.000Z","isPrivate":0,"projectId":"5b1089","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T16:59:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":960,"cssLen":723,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".flex{display:flex}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.rounded-md{border-radius:0.375rem}.bg-lime-950{--tw-bg-opacity:1;background-color:rgb(26 46 5 / var(--tw-bg-opacity))}.fill-lime-400{fill:#a3e635}.p-2{padding:0.5rem}.pr-1{padding-right:0.25rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-bold{font-weight:700}.text-lime-400{--tw-text-opacity:1;color:rgb(163 230 53 / var(--tw-text-opacity))}.duration-100{transition-duration:100ms}.hover\\:bg-lime-900:hover{--tw-bg-opacity:1;background-color:rgb(54 83 20 / var(--tw-bg-opacity))}.active\\:border:active{border-width:1px}.active\\:border-lime-400:active{--tw-border-opacity:1;border-color:rgb(163 230 53 / var(--tw-border-opacity))}"},{"created":"2024-01-22T16:59:51.000Z","isPrivate":0,"projectId":"950f9d","snapshot":null,"tags":null,"title":"button by mrhyddenn","updated":"2024-01-22T16:59:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":111,"cssLen":1303,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n uiverse.io\n \n Tooltip\n \n

","css":".uiverse {\n position: relative;\n background: #ffffff;\n color: #000;\n padding: 15px;\n margin: 10px;\n border-radius: 10px;\n width: 150px;\n height: 50px;\n font-size: 17px;\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.tooltip {\n position: absolute;\n top: 0;\n font-size: 14px;\n background: #ffffff;\n color: #ffffff;\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.tooltip::before {\n position: absolute;\n content: \"\";\n height: 8px;\n width: 8px;\n background: #ffffff;\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.uiverse:hover .tooltip {\n top: -45px;\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n}\n\nsvg:hover span,\nsvg:hover .tooltip {\n text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);\n}\n\n.uiverse:hover,\n.uiverse:hover .tooltip,\n.uiverse:hover .tooltip::before {\n background: linear-gradient(320deg, rgb(3, 77, 146), rgb(0, 60, 255));\n color: #ffffff;\n}"},{"created":"2024-01-22T16:59:51.000Z","isPrivate":0,"projectId":"bd8c3c","snapshot":null,"tags":null,"title":"button by Navarog21","updated":"2024-01-22T16:59:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":356,"cssLen":2672,"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 width: 11em;\n height: 4em;\n outline: none;\n transition: 0.1s;\n background-color: transparent;\n border: none;\n font-size: 13px;\n font-weight: bold;\n color: #ddebf0;\n}\n\n#clip {\n --color: #2761c3;\n position: absolute;\n top: 0;\n overflow: hidden;\n width: 100%;\n height: 100%;\n border: 5px double var(--color);\n box-shadow: inset 0px 0px 15px #195480;\n -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);\n}\n\n.arrow {\n position: absolute;\n transition: 0.2s;\n background-color: #2761c3;\n top: 35%;\n width: 11%;\n height: 30%;\n}\n\n#leftArrow {\n left: -13.5%;\n -webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);\n}\n\n#rightArrow {\n -webkit-clip-path: polygon(100% 49%, 0 0, 0 100%);\n left: 102%;\n}\n\nbutton:hover #rightArrow {\n background-color: #27c39f;\n left: -15%;\n animation: 0.6s ease-in-out both infinite alternate rightArrow8;\n}\n\nbutton:hover #leftArrow {\n background-color: #27c39f;\n left: 103%;\n animation: 0.6s ease-in-out both infinite alternate leftArrow8;\n}\n\n.corner {\n position: absolute;\n width: 4em;\n height: 4em;\n background-color: #2761c3;\n box-shadow: inset 1px 1px 8px #2781c3;\n transform: scale(1) rotate(45deg);\n transition: 0.2s;\n}\n\n#rightTop {\n top: -1.98em;\n left: 91%;\n}\n\n#leftTop {\n top: -1.96em;\n left: -3.0em;\n}\n\n#leftBottom {\n top: 2.10em;\n left: -2.15em;\n}\n\n#rightBottom {\n top: 45%;\n left: 88%;\n}\n\nbutton:hover #leftTop {\n animation: 0.1s ease-in-out 0.05s both changeColor8,\n 0.2s linear 0.4s both lightEffect8;\n}\n\nbutton:hover #rightTop {\n animation: 0.1s ease-in-out 0.15s both changeColor8,\n 0.2s linear 0.4s both lightEffect8;\n}\n\nbutton:hover #rightBottom {\n animation: 0.1s ease-in-out 0.25s both changeColor8,\n 0.2s linear 0.4s both lightEffect8;\n}\n\nbutton:hover #leftBottom {\n animation: 0.1s ease-in-out 0.35s both changeColor8,\n 0.2s linear 0.4s both lightEffect8;\n}\n\nbutton:hover .corner {\n transform: scale(1.25) rotate(45deg);\n}\n\nbutton:hover #clip {\n animation: 0.2s ease-in-out 0.55s both greenLight8;\n --color: #27c39f;\n}\n\n@keyframes changeColor8 {\n from {\n background-color: #2781c3;\n }\n\n to {\n background-color: #27c39f;\n }\n}\n\n@keyframes lightEffect8 {\n from {\n box-shadow: 1px 1px 5px #27c39f;\n }\n\n to {\n box-shadow: 0 0 2px #27c39f;\n }\n}\n\n@keyframes greenLight8 {\n from {\n }\n\n to {\n box-shadow: inset 0px 0px 32px #27c39f;\n }\n}\n\n@keyframes leftArrow8 {\n from {\n transform: translate(0px);\n }\n\n to {\n transform: translateX(10px);\n }\n}\n\n@keyframes rightArrow8 {\n from {\n transform: translate(0px);\n }\n\n to {\n transform: translateX(-10px);\n }\n}\n\n\n"},{"created":"2024-01-22T16:59:51.000Z","isPrivate":0,"projectId":"cca482","snapshot":null,"tags":null,"title":"button by satyamchaudharydev","updated":"2024-01-22T16:59:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":506,"cssLen":1535,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n width: 140px;\n height: 56px;\n overflow: hidden;\n border: none;\n color: #fff;\n background: none;\n position: relative;\n padding-bottom: 2em;\n cursor: pointer;\n}\n\nbutton > div,\nbutton > svg {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n}\n\nbutton:before {\n content: \"\";\n position: absolute;\n height: 2px;\n bottom: 0;\n left: 0;\n width: 100%;\n transform: scaleX(0);\n transform-origin: bottom right;\n background: currentColor;\n transition: transform 0.25s ease-out;\n}\n\nbutton:hover:before {\n transform: scaleX(1);\n transform-origin: bottom left;\n}\n\nbutton .clone > *,\nbutton .text > * {\n opacity: 1;\n font-size: 1.3rem;\n transition: 0.2s;\n margin-left: 4px;\n}\n\nbutton .clone > * {\n transform: translateY(60px);\n}\n\nbutton:hover .clone > * {\n opacity: 1;\n transform: translateY(0px);\n transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;\n}\n\nbutton:hover .text > * {\n opacity: 1;\n transform: translateY(-60px);\n transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;\n}\n\nbutton:hover .clone > :nth-child(1) {\n transition-delay: 0.15s;\n}\n\nbutton:hover .clone > :nth-child(2) {\n transition-delay: 0.2s;\n}\n\nbutton:hover .clone > :nth-child(3) {\n transition-delay: 0.25s;\n}\n\nbutton:hover .clone > :nth-child(4) {\n transition-delay: 0.3s;\n}\n/* icon style and hover */\nbutton svg {\n width: 20px;\n right: 0;\n top: 50%;\n transform: translateY(-50%) rotate(-50deg);\n transition: 0.2s ease-out;\n}\n\nbutton:hover svg {\n transform: translateY(-50%) rotate(-90deg);\n}\n"},{"created":"2024-01-22T16:59:51.000Z","isPrivate":0,"projectId":"c671b7","snapshot":null,"tags":null,"title":"button by WhiteNervosa","updated":"2024-01-22T16:59:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":33,"cssLen":731,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n font-size: 18px;\n color: #e1e1e1;\n font-family: inherit;\n font-weight: 800;\n cursor: pointer;\n position: relative;\n border: none;\n background: none;\n text-transform: uppercase;\n transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);\n transition-duration: 400ms;\n transition-property: color;\n}\n\nbutton:focus,\nbutton:hover {\n color: #fff;\n}\n\nbutton:focus:after,\nbutton:hover:after {\n width: 100%;\n left: 0%;\n}\n\nbutton:after {\n content: \"\";\n pointer-events: none;\n bottom: -2px;\n left: 50%;\n position: absolute;\n width: 0%;\n height: 2px;\n background-color: #fff;\n transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);\n transition-duration: 400ms;\n transition-property: width, left;\n}"},{"created":"2024-01-22T16:59:51.000Z","isPrivate":0,"projectId":"418a4d","snapshot":null,"tags":null,"title":"button by Yaya12085","updated":"2024-01-22T16:59:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":424,"cssLen":666,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n border: none;\n display: flex;\n padding: 0.75rem 1.5rem;\n background-color: #488aec;\n color: #ffffff;\n font-size: 0.75rem;\n line-height: 1rem;\n font-weight: 700;\n cursor: pointer;\n text-align: center;\n text-transform: uppercase;\n vertical-align: middle;\n align-items: center;\n border-radius: 0.5rem;\n user-select: none;\n gap: 0.75rem;\n box-shadow: 0 4px 6px -1px #488aec31, 0 2px 4px -1px #488aec17;\n transition: all 0.6s ease;\n}\n\nbutton:hover {\n box-shadow: 0 10px 15px -3px #488aec4f, 0 4px 6px -2px #488aec17;\n}\n\nbutton:focus,\nbutton:active {\n opacity: 0.85;\n box-shadow: none;\n}\n\nbutton svg {\n width: 1.25rem;\n height: 1.25rem;\n}\n"},{"created":"2024-01-22T16:59:51.000Z","isPrivate":0,"projectId":"71c90e","snapshot":null,"tags":null,"title":"button by kamehame-ha","updated":"2024-01-22T16:59:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1395,"cssLen":551,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 10px 15px;\n gap: 15px;\n background-color: #007ACC;\n outline: 3px #007ACC solid;\n outline-offset: -3px;\n border-radius: 5px;\n border: none;\n cursor: pointer;\n transition: 400ms;\n}\n\n.button .text {\n color: white;\n font-weight: 700;\n font-size: 1em;\n transition: 400ms;\n}\n\n.button svg path {\n transition: 400ms;\n}\n\n.button:hover {\n background-color: transparent;\n}\n\n.button:hover .text {\n color: #007ACC;\n}\n\n.button:hover svg path {\n fill: #007ACC;\n}"},{"created":"2024-01-22T16:59:51.000Z","isPrivate":0,"projectId":"d8ef7b","snapshot":null,"tags":null,"title":"button by flxderdev","updated":"2024-01-22T16:59:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":45,"cssLen":1368,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n height: 55px;\n width: 175px;\n margin: auto;\n align-items: center;\n border-radius: 50px;\n border: none;\n text-align: center;\n color: transparent;\n text-shadow: 0 0 0 rgb(255, 255, 255);\n font-size: 17px;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n box-sizing: border-box;\n cursor: pointer;\n transition: transform 50ms ease;\n background: linear-gradient(90deg, #5f03f4, #f441a5, #b81fff, #5f03f4);\n color: #ffffff;\n text-shadow: rgba(140, 0, 255, 0.9) 0px 0px 20px;\n background-size: 400%;\n display: block;\n margin-right: auto;\n margin-left: auto;\n font-family: \"Montserrat\", sans-serif;\n}\n\n.button:hover {\n -webkit-box-shadow: 0px 0px 15px 0px rgba(155, 0, 194, 0.9);\n -moz-box-shadow: 0px 0px 15px 0px rgba(155, 0, 194, 0.9);\n box-shadow: 0px 0px 15px 0px rgba(155, 0, 194, 0.9);\n animation: animate 8s ease infinite;\n transition: box-shadow, 0.4s;\n border: none;\n font-size: 19px;\n transform: scale(1.05, 1.05);\n background: linear-gradient(90deg, #5f03f4, #f441a5, #b81fff, #5f03f4);\n background-size: 400%;\n animation: animate 7s cubic-bezier(0.75, 0.75, 0.75, 0.75) infinite,\n}\n\n.button:hover:before {\n filter: blur(20px);\n opacity: 1;\n animation: animate 8s linear infinite;\n}\n\n@keyframes animate {\n 0% {\n background-position: 0%;\n }\n\n 100% {\n background-position: 400%;\n }\n}\n"}]}},"actionData":null,"errors":null}