{"loaderData":{"0":null,"0-3":{"total":7413,"projects":[{"created":"2024-01-21T09:16:47.000Z","isPrivate":0,"projectId":"e6d14e","snapshot":null,"tags":null,"title":"3D 正方体 Demo","updated":"2024-01-21T09:16:47.000Z","isTemplate":0,"htmlType":"html","pureCSS":0,"htmlLen":0,"cssLen":0,"jsLen":0,"nickname":"波~","avatar":"https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJABUFmgpjUxsfZaGg9oVibI5nhC44dicQnllCxSbV3ZwfV8wiat2LrmEXSlzeRcBgHWnEMl1uTp14ibw/132","username":"915444","editors":"0000"},{"created":"2024-01-20T13:50:42.000Z","isPrivate":0,"projectId":"bf8987","snapshot":null,"tags":null,"title":"Vue3 Template","updated":"2024-01-20T13:52:41.000Z","isTemplate":0,"htmlType":"html","pureCSS":0,"htmlLen":87,"cssLen":37,"jsLen":242,"nickname":"js","avatar":"https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIC7fq2t9PYyOJRKNmKMZETZEUdhKYWrwh9TSUAeOdiazQFeYbSTAr9yvxys47TMFbxoekl25nX9QQ/132","username":"1ae0be","editors":"1110"},{"created":"2024-01-20T13:48:43.000Z","isPrivate":0,"projectId":"a9782d","snapshot":"https://s1.qingting.work/runjs/a7bb6fdc9167.png?x-oss-process=style/webp-w-500","tags":"antd,vue","title":"Vue3 Template","updated":"2024-01-20T15:50:44.000Z","isTemplate":0,"htmlType":"html","pureCSS":0,"htmlLen":44,"cssLen":37,"jsLen":228,"nickname":"js","avatar":"https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIC7fq2t9PYyOJRKNmKMZETZEUdhKYWrwh9TSUAeOdiazQFeYbSTAr9yvxys47TMFbxoekl25nX9QQ/132","username":"1ae0be","editors":"1110"},{"created":"2024-01-20T09:28:55.000Z","isPrivate":0,"projectId":"fbb201","snapshot":"https://s1.qingting.work/runjs/974e495ffcb2.png?x-oss-process=style/webp-w-500","tags":null,"title":"Tooltip by Tsiangana","updated":"2024-01-20T11:30:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":8056,"cssLen":6961,"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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n","css":"/* This is an example, feel free to delete this code */\nhtml, body {\n height: 100%;\n}\nbody {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.tooltip-container {\n background: rgb(3, 169, 244);\n background: linear-gradient(\n 138deg,\n rgba(3, 169, 244, 1) 15%,\n rgba(63, 180, 233, 1) 65%\n );\n position: relative;\n cursor: pointer;\n font-size: 17px;\n padding: 0.7em 0.7em;\n border-radius: 50px;\n box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);\n}\n.tooltip-container:hover {\n background: #fff;\n transition: all 0.6s;\n}\n.tooltip-container .text {\n display: flex;\n align-items: center;\n justify-content: center;\n fill: #fff;\n transition: all 0.2s;\n}\n.tooltip-container:hover .text {\n fill: rgb(3, 169, 244);\n transition: all 0.6s;\n}\n\n/* Inicio do tooltip twitter */\n.tooltip1 {\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n opacity: 0;\n visibility: hidden;\n background: #fff;\n fill: #03a9f4;\n padding: 10px;\n border-radius: 50px;\n transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;\n z-index: 1;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.tooltip-container:hover .tooltip1 {\n top: 150%;\n opacity: 1;\n visibility: visible;\n background: #fff;\n border-radius: 50px;\n transform: translate(-50%, -5px);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.tooltip-container:hover .tooltip1:hover {\n background: #03a9f4;\n fill: #fff;\n}\n/* Fim do tooltip twitter */\n\n/* Inicio do tooltip facebook */\n.tooltip2 {\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n opacity: 0;\n visibility: hidden;\n background: #fff;\n fill: #0462df;\n padding: 10px;\n border-radius: 50px;\n transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;\n z-index: 1;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.tooltip-container:hover .tooltip2 {\n top: -120%;\n opacity: 1;\n visibility: visible;\n background: #fff;\n transform: translate(-50%, -5px);\n border-radius: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.tooltip-container:hover .tooltip2:hover {\n background: #0462df;\n fill: #fff;\n}\n/* Fim do tooltip facebook */\n\n/* Inicio do tooltip whatsApp */\n.tooltip3 {\n position: absolute;\n top: 100%;\n left: 60%;\n transform: translateX(80%);\n opacity: 0;\n visibility: hidden;\n background: #fff;\n fill: #1db954;\n padding: 10px;\n border-radius: 50px;\n transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;\n z-index: 1;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.tooltip-container:hover .tooltip3 {\n top: 10%;\n opacity: 1;\n visibility: visible;\n background: #fff;\n transform: translate(85%, -5px);\n border-radius: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.tooltip-container:hover .tooltip3:hover {\n background: #1db954;\n fill: #fff;\n}\n/* Fim do tooltip whatsApp */\n\n/* Inicio do tooltip Discord */\n.tooltip4 {\n position: absolute;\n top: 100%;\n left: -190%;\n transform: translateX(70%);\n opacity: 0;\n visibility: hidden;\n background: #fff;\n fill: #8c9eff;\n padding: 10px;\n border-radius: 50px;\n transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;\n z-index: 1;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.tooltip-container:hover .tooltip4 {\n top: 10%;\n opacity: 1;\n visibility: visible;\n background: #fff;\n transform: translate(70%, -5px);\n border-radius: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.tooltip-container:hover .tooltip4:hover {\n background: #8c9eff;\n fill: #fff;\n}\n/* Fim do tooltip Discord */\n\n/* Inicio do tooltip pinterest */\n.tooltip5 {\n position: absolute;\n top: 100%;\n left: -145%;\n transform: translateX(70%);\n opacity: 0;\n visibility: hidden;\n background: #fff;\n fill: #bd081c;\n padding: 10px;\n border-radius: 50px;\n transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;\n z-index: 1;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.tooltip-container:hover .tooltip5 {\n top: -78%;\n opacity: 1;\n visibility: visible;\n background: #fff;\n transform: translate(70%, -5px);\n border-radius: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.tooltip-container:hover .tooltip5:hover {\n background: #bd081c;\n fill: #fff;\n}\n/* Fim do tooltip pinterest */\n\n/* Inicio do tooltip dribbble */\n.tooltip6 {\n position: absolute;\n top: 100%;\n left: 35%;\n transform: translateX(70%);\n opacity: 0;\n visibility: hidden;\n background: #fff;\n fill: #ea4c89;\n padding: 10px;\n border-radius: 50px;\n transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;\n z-index: 1;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.tooltip-container:hover .tooltip6 {\n top: -79%;\n opacity: 1;\n visibility: visible;\n background: #fff;\n transform: translate(70%, -5px);\n border-radius: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.tooltip-container:hover .tooltip6:hover {\n background: #ea4c89;\n fill: #fff;\n}\n/* Fim do tooltip dribbble */\n\n/* Inicio do tooltip github */\n.tooltip7 {\n position: absolute;\n top: 100%;\n left: 39%;\n transform: translateX(70%);\n opacity: 0;\n visibility: hidden;\n background: #fff;\n fill: #000;\n padding: 10px;\n border-radius: 50px;\n transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;\n z-index: 1;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.tooltip-container:hover .tooltip7 {\n top: 104%;\n opacity: 1;\n visibility: visible;\n background: #fff;\n transform: translate(70%, -5px);\n border-radius: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.tooltip-container:hover .tooltip7:hover {\n background: #000;\n fill: #fff;\n}\n/* Fim do tooltip github */\n\n/* Inicio do tooltip reddit */\n.tooltip8 {\n position: absolute;\n top: 100%;\n left: -150%;\n transform: translateX(70%);\n opacity: 0;\n visibility: hidden;\n background: #fff;\n fill: #ff4500;\n padding: 10px;\n border-radius: 50px;\n transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;\n z-index: 1;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.tooltip-container:hover .tooltip8 {\n top: 101%;\n opacity: 1;\n visibility: visible;\n background: #fff;\n transform: translate(70%, -5px);\n border-radius: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.tooltip-container:hover .tooltip8:hover {\n background: #ff4500;\n fill: #fff;\n}\n/* Fim do tooltip reddit */\n\n/* Inicio do tooltip fixo */\n.tooltip9 {\n position: absolute;\n top: 0;\n left: -115%;\n opacity: 0;\n visibility: hidden;\n width: 150px;\n height: 150px;\n z-index: -1;\n}\n\n.tooltip-container:hover .tooltip9 {\n top: -110%;\n opacity: 1;\n visibility: visible;\n border-radius: 50%;\n z-index: -1;\n}\n/* Fim do tooltip fixo */\n/* Por meio desse ultimo tooltip todos os outros podem\nficar fixos quando houver no principal, para vê-lo dê um\nbackground black acima*/\n"},{"created":"2024-01-20T08:45:58.000Z","isPrivate":0,"projectId":"7c1609","snapshot":"https://s1.qingting.work/runjs/ffc1437a34db.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by eirikvold","updated":"2024-01-20T10:46:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":467,"cssLen":1058,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n font-family: inherit;\n font-size: 18px;\n background: linear-gradient(to bottom, #4dc7d9 0%,#66a6ff 100%);\n color: white;\n padding: 0.8em 1.2em;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: 25px;\n box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);\n transition: all 0.3s;\n}\n\nbutton:hover {\n transform: translateY(-3px);\n box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);\n}\n\nbutton:active {\n transform: scale(0.95);\n box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);\n}\n\nbutton span {\n display: block;\n margin-left: 0.4em;\n transition: all 0.3s;\n}\n\nbutton svg {\n width: 18px;\n height: 18px;\n fill: white;\n transition: all 0.3s;\n}\n\nbutton .svg-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n background-color: rgba(255, 255, 255, 0.2);\n margin-right: 0.5em;\n transition: all 0.3s;\n}\n\nbutton:hover .svg-wrapper {\n background-color: rgba(255, 255, 255, 0.5);\n}\n\nbutton:hover svg {\n transform: rotate(45deg);\n}\n\n"},{"created":"2024-01-20T08:29:28.000Z","isPrivate":0,"projectId":"62f1c1","snapshot":"https://s1.qingting.work/runjs/0c6a73c65207.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by MuhammadHasann","updated":"2024-01-20T10:34:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":15419,"cssLen":4179,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"body {\n padding: 120px 0 0 40px;\n}\nbutton {\n position: relative;\n padding: 13px 35px;\n background: #f5ddb7;\n font-size: 17px;\n font-weight: 900;\n color: #181818;\n border: none;\n border-radius: 8px;\n box-shadow: 2px 2px 5px #18181869, inset 2px 2px 10px #ffffffb0;\n transition: all .3s ease-in-out;\n}\n\n.icon-1 {\n position: absolute;\n top: 10%;\n left: 50%;\n transform: translate(-50%, 0);\n width: 0px;\n height: auto;\n transition: all .5s ease-in-out;\n z-index: -1;\n}\n\n.icon-2 {\n position: absolute;\n top: 10%;\n left: 50%;\n transform: translate(-50%, 0);\n width: 0px;\n height: auto;\n transition: all .5s ease-in-out;\n z-index: -2;\n}\n\n.icon-3 {\n position: absolute;\n top: 10%;\n left: 50%;\n transform: translate(-50%, 0);\n width: 0px;\n height: auto;\n transition: all .5s ease-in-out;\n z-index: -2;\n}\n\n.icon-4 {\n position: absolute;\n top: 10%;\n left: 50%;\n transform: translate(-50%, 0);\n width: 0px;\n height: auto;\n transition: all .5s ease-in-out;\n z-index: -2;\n}\n\n.icon-5 {\n position: absolute;\n top: 10%;\n left: 50%;\n transform: translate(-50%, 0);\n width: 0px;\n height: auto;\n transition: all .5s ease-in-out;\n z-index: -2;\n}\n\nbutton:hover {\n padding: 13px 25px;\n border-radius: 8px 8px 24px 24px;\n}\n\nbutton:hover .icon-1 {\n top: -250%;\n left: 50%;\n transform: translate(-50%, 0);\n width: 50px;\n height: auto;\n animation: inIcon1 1s ease .45s forwards;\n}\n\n@keyframes inIcon1 {\n 0% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n\n 25% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(5deg);\n }\n\n 50% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(1deg);\n }\n\n 65% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(3deg);\n }\n\n 100% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n}\n\nbutton:hover .icon-2 {\n position: absolute;\n top: -200%;\n left: 90%;\n transform: translate(-50%, 0);\n width: 75px;\n height: auto;\n animation: inIcon2 1s ease .45s forwards;\n}\n\n@keyframes inIcon2 {\n 0% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n\n 35% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(10deg);\n }\n\n 50% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(4deg);\n }\n\n 80% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(5deg);\n }\n\n 100% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n}\n\nbutton:hover .icon-3 {\n position: absolute;\n top: -130%;\n left: 20%;\n transform: translate(-50%, 0);\n width: 60px;\n height: auto;\n animation: inIcon3 1s ease .45s forwards;\n}\n\n@keyframes inIcon3 {\n 0% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n\n 35% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(-2deg);\n }\n\n 100% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n}\n\nbutton:hover .icon-4 {\n position: absolute;\n top: -300%;\n left: 10%;\n transform: translate(-50%, 0);\n width: 85px;\n height: auto;\n animation: inIcon4 1s ease .45s forwards;\n}\n\n@keyframes inIcon4 {\n 0% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n\n 40% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(-3deg);\n }\n\n 100% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n}\n\nbutton:hover .icon-5 {\n position: absolute;\n top: -350%;\n left: 90%;\n transform: translate(-50%, 0);\n width: 85px;\n height: auto;\n animation: inIcon5 1s ease .45s forwards;\n}\n\n@keyframes inIcon5 {\n 0% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n\n 35% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(-3deg);\n }\n\n 100% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n}\n\n.fil-leaf-1 {\n fill: #7B9B3A\n}\n\n.fil-leaf-2 {\n fill: #556729;\n fill-rule: nonzero\n}\n\n.fil-leaf-3 {\n fill: #556729\n}\n\n.fil-leaf-4 {\n fill: #3C4819\n}\n\n.fil-leaf-5 {\n fill: #3C4819\n}"},{"created":"2024-01-20T08:28:49.000Z","isPrivate":0,"projectId":"f5697b","snapshot":"https://s1.qingting.work/runjs/6f8cba74267f.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by lenfear23","updated":"2024-01-20T10:28:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":900,"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 align-items: center;\n justify-content: center;\n outline: none;\n cursor: pointer;\n width: 150px;\n height: 50px;\n background-image: linear-gradient(to top, #D8D9DB 0%, #fff 80%, #FDFDFD 100%);\n border-radius: 30px;\n border: 1px solid #8F9092;\n transition: all 0.2s ease;\n font-family: \"Source Sans Pro\", sans-serif;\n font-size: 14px;\n font-weight: 600;\n color: #606060;\n text-shadow: 0 1px #fff;\n}\n\nbutton:hover {\n box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 3px 3px #CECFD1;\n}\n\nbutton:active {\n box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 5px 3px #999, inset 0 0 30px #aaa;\n}\n\nbutton:focus {\n box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 5px 3px #999, inset 0 0 30px #aaa;\n}\n\n\n"},{"created":"2024-01-20T08:27:55.000Z","isPrivate":0,"projectId":"8206be","snapshot":"https://s1.qingting.work/runjs/92eeeceac17a.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by barisdogansutcu","updated":"2024-01-20T10:27:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":150,"cssLen":1684,"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 align-items: center;\n justify-content: center;\n height: 50px;\n position: relative;\n padding: 0 20px;\n font-size: 18px;\n text-transform: uppercase;\n border: 0;\n box-shadow: hsl(210deg 87% 36%) 0px 7px 0px 0px;\n background-color: hsl(210deg 100% 44%);\n border-radius: 12px;\n overflow: hidden;\n transition: 31ms cubic-bezier(.5, .7, .4, 1);\n}\n\nbutton:before {\n content: attr(alt);\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n inset: 0;\n font-size: 15px;\n font-weight: bold;\n color: white;\n letter-spacing: 4px;\n opacity: 1;\n}\n\nbutton:active {\n box-shadow: none;\n transform: translateY(7px);\n transition: 35ms cubic-bezier(.5, .7, .4, 1);\n}\n\nbutton:hover:before {\n transition: all .0s;\n transform: translateY(100%);\n opacity: 0;\n}\n\nbutton i {\n color: white;\n font-size: 15px;\n font-weight: bold;\n letter-spacing: 4px;\n font-style: normal;\n transition: all 2s ease;\n transform: translateY(-20px);\n opacity: 0;\n}\n\nbutton:hover i {\n transition: all .2s ease;\n transform: translateY(0px);\n opacity: 1;\n}\n\nbutton:hover i:nth-child(1) {\n transition-delay: 0.045s;\n}\n\nbutton:hover i:nth-child(2) {\n transition-delay: calc(0.045s * 3);\n}\n\nbutton:hover i:nth-child(3) {\n transition-delay: calc(0.045s * 4);\n}\n\nbutton:hover i:nth-child(4) {\n transition-delay: calc(0.045s * 5);\n}\n\nbutton:hover i:nth-child(6) {\n transition-delay: calc(0.045s * 6);\n}\n\nbutton:hover i:nth-child(7) {\n transition-delay: calc(0.045s * 7);\n}\n\nbutton:hover i:nth-child(8) {\n transition-delay: calc(0.045s * 8);\n}\n\nbutton:hover i:nth-child(9) {\n transition-delay: calc(0.045s * 9);\n}\n\nbutton:hover i:nth-child(10) {\n transition-delay: calc(0.045s * 10);\n}"},{"created":"2024-01-20T08:27:28.000Z","isPrivate":0,"projectId":"ed92b4","snapshot":"https://s1.qingting.work/runjs/9560d084a305.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by Yaya12085","updated":"2024-01-20T10:27:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":777,"cssLen":706,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n GET IT ON\n Google Play\n \n","css":".playstore-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 2px solid #000;\n border-radius: 9999px;\n background-color: rgba(0, 0, 0, 1);\n padding: 0.625rem 1.5rem;\n text-align: center;\n color: rgba(255, 255, 255, 1);\n outline: 0;\n transition: all .2s ease;\n text-decoration: none;\n}\n\n.playstore-button:hover {\n background-color: transparent;\n color: rgba(0, 0, 0, 1);\n}\n\n.icon {\n height: 1.5rem;\n width: 1.5rem;\n}\n\n.texts {\n margin-left: 1rem;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n line-height: 1;\n}\n\n.text-1 {\n margin-bottom: 0.25rem;\n font-size: 0.75rem;\n line-height: 1rem;\n}\n\n.text-2 {\n font-weight: 600;\n}"},{"created":"2024-01-20T08:26:48.000Z","isPrivate":0,"projectId":"26e73a","snapshot":"https://s1.qingting.work/runjs/c482325e252b.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by cssbuttons-io","updated":"2024-01-20T10:26:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":125,"cssLen":1529,"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 border: none;\n background: transparent;\n padding: 0;\n cursor: pointer;\n outline-offset: 4px;\n transition: filter 250ms;\n user-select: none;\n touch-action: manipulation;\n}\n\n.shadow {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 12px;\n background: hsl(0deg 0% 0% / 0.25);\n will-change: transform;\n transform: translateY(2px);\n transition: transform\n 600ms\n cubic-bezier(.3, .7, .4, 1);\n}\n\n.edge {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 12px;\n background: linear-gradient(\n to left,\n hsl(340deg 100% 16%) 0%,\n hsl(340deg 100% 32%) 8%,\n hsl(340deg 100% 32%) 92%,\n hsl(340deg 100% 16%) 100%\n );\n}\n\n.front {\n display: block;\n position: relative;\n padding: 12px 27px;\n border-radius: 12px;\n font-size: 1.1rem;\n color: white;\n background: hsl(345deg 100% 47%);\n will-change: transform;\n transform: translateY(-4px);\n transition: transform\n 600ms\n cubic-bezier(.3, .7, .4, 1);\n}\n\nbutton:hover {\n filter: brightness(110%);\n}\n\nbutton:hover .front {\n transform: translateY(-6px);\n transition: transform\n 250ms\n cubic-bezier(.3, .7, .4, 1.5);\n}\n\nbutton:active .front {\n transform: translateY(-2px);\n transition: transform 34ms;\n}\n\nbutton:hover .shadow {\n transform: translateY(4px);\n transition: transform\n 250ms\n cubic-bezier(.3, .7, .4, 1.5);\n}\n\nbutton:active .shadow {\n transform: translateY(1px);\n transition: transform 34ms;\n}\n\nbutton:focus:not(:focus-visible) {\n outline: none;\n}"},{"created":"2024-01-20T08:26:27.000Z","isPrivate":0,"projectId":"a616e1","snapshot":"https://s1.qingting.work/runjs/ca842d2a9d0b.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by Creatlydev","updated":"2024-01-20T10:26:29.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":830,"cssLen":1019,"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 Explore All\n ","css":".button {\n line-height: 1;\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: .75rem;\n background-color: var(--clr);\n color: #fff;\n border-radius: 10rem;\n font-weight: 600;\n padding: .75rem 1.5rem;\n padding-left: 20px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n transition: background-color .3s;\n}\n\n.button__icon-wrapper {\n flex-shrink: 0;\n width: 25px;\n height: 25px;\n position: relative;\n color: var(--clr);\n background-color: #fff;\n border-radius: 50%;\n display: grid;\n place-items: center;\n overflow: hidden;\n}\n\n.button:hover {\n background-color: #000;\n}\n\n.button:hover .button__icon-wrapper {\n color: #000;\n}\n\n.button__icon-svg--copy {\n position: absolute;\n transform: translate(-150%, 150%);\n}\n\n.button:hover .button__icon-svg:first-child {\n transition: transform .3s ease-in-out;\n transform: translate(150%, -150%);\n}\n\n.button:hover .button__icon-svg--copy {\n transition: transform .3s ease-in-out .1s;\n transform: translate(0);\n}"},{"created":"2024-01-20T08:24:43.000Z","isPrivate":0,"projectId":"aaa23f","snapshot":"https://s1.qingting.work/runjs/6a93afb03252.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by Praashoo7","updated":"2024-01-20T10:24:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4155,"cssLen":1982,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

","css":".main {\n display: flex;\n flex-direction: column;\n gap: 0.5em;\n}\n\n.up {\n display: flex;\n flex-direction: row;\n gap: 0.5em;\n}\n\n.down {\n display: flex;\n flex-direction: row;\n gap: 0.5em;\n}\n\n.card1 {\n width: 90px;\n height: 90px;\n outline: none;\n border: none;\n background: white;\n border-radius: 90px 5px 5px 5px;\n box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\n transition: .2s ease-in-out;\n}\n\n.instagram {\n margin-top: 1.5em;\n margin-left: 1.2em;\n fill: #cc39a4;\n}\n\n.card2 {\n width: 90px;\n height: 90px;\n outline: none;\n border: none;\n background: white;\n border-radius: 5px 90px 5px 5px;\n box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\n transition: .2s ease-in-out;\n}\n\n.twitter {\n margin-top: 1.5em;\n margin-left: -.9em;\n fill: #03A9F4;\n}\n\n.card3 {\n width: 90px;\n height: 90px;\n outline: none;\n border: none;\n background: white;\n border-radius: 5px 5px 5px 90px;\n box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\n transition: .2s ease-in-out;\n}\n\n.github {\n margin-top: -.6em;\n margin-left: 1.2em;\n}\n\n.card4 {\n width: 90px;\n height: 90px;\n outline: none;\n border: none;\n background: white;\n border-radius: 5px 5px 90px 5px;\n box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\n transition: .2s ease-in-out;\n}\n\n.discord {\n margin-top: -.9em;\n margin-left: -1.2em;\n fill: #8c9eff;\n}\n\n.card1:hover {\n cursor: pointer;\n scale: 1.1;\n background-color: #cc39a4;\n}\n\n.card1:hover .instagram {\n fill: white;\n}\n\n.card2:hover {\n cursor: pointer;\n scale: 1.1;\n background-color: #03A9F4;\n}\n\n.card2:hover .twitter {\n fill: white;\n}\n\n.card3:hover {\n cursor: pointer;\n scale: 1.1;\n background-color: black;\n}\n\n.card3:hover .github {\n fill: white;\n}\n\n.card4:hover {\n cursor: pointer;\n scale: 1.1;\n background-color: #8c9eff;\n}\n\n.card4:hover .discord {\n fill: white;\n}"}]}},"actionData":null,"errors":null}