{"loaderData":{"0":null,"0-3":{"total":7313,"projects":[{"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}"},{"created":"2024-01-20T08:23:51.000Z","isPrivate":0,"projectId":"e1b988","snapshot":"https://s1.qingting.work/runjs/55cc183c0830.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by Praashoo7","updated":"2024-01-20T10:23:52.000Z","isTemplate":1,"htmlType":"html","pureCSS":0,"htmlLen":11080,"cssLen":4715,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100"},{"created":"2024-01-20T08:22:45.000Z","isPrivate":0,"projectId":"736442","snapshot":"https://s1.qingting.work/runjs/73c0b98ed4b5.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by Yaya12085","updated":"2024-01-20T10:22:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1061,"cssLen":2778,"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 flex-direction: column;\n align-items: flex-end;\n justify-content: space-between;\n background-color: #000;\n color: #fff;\n font-size: 13px;\n border: 0.5px solid rgba(0, 0, 0, 0.1);\n padding-bottom: 8px;\n height: 65px;\n padding: 12px;\n border-radius: 15px 15px 12px 12px;\n cursor: pointer;\n position: relative;\n will-change: transform;\n transition: all .1s ease-in-out 0s;\n user-select: none;\n /* Add gradient shading to each side */\n background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)),\n linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n background-position: bottom right, bottom right;\n background-size: 100% 100%, 100% 100%;\n background-repeat: no-repeat;\n box-shadow: inset -4px -10px 0px rgba(255, 255, 255, 0.4),\n inset -4px -8px 0px rgba(0, 0, 0, 0.3),\n 0px 2px 1px rgba(0, 0, 0, 0.3),\n 0px 2px 1px rgba(255, 255, 255, 0.1);\n transform: perspective(70px) rotateX(5deg) rotateY(0deg);\n}\n\n.button::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.5));\n z-index: -1;\n border-radius: 15px;\n box-shadow: inset 4px 0px 0px rgba(255, 255, 255, 0.1),\n inset 4px -8px 0px rgba(0, 0, 0, 0.3);\n transition: all .1s ease-in-out 0s;\n}\n\n.button::before {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)),\n linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n background-position: bottom right, bottom right;\n background-size: 100% 100%, 100% 100%;\n background-repeat: no-repeat;\n z-index: -1;\n border-radius: 15px;\n transition: all .1s ease-in-out 0s;\n}\n\n.button:active {\n will-change: transform;\n transform: perspective(80px) rotateX(5deg) rotateY(1deg) translateY(3px) scale(0.96);\n height: 64px;\n border: 0.25px solid rgba(0, 0, 0, 0.2);\n box-shadow: inset -4px -8px 0px rgba(255, 255, 255, 0.2),\n inset -4px -6px 0px rgba(0, 0, 0, 0.8),\n 0px 1px 0px rgba(0, 0, 0, 0.9),\n 0px 1px 0px rgba(255, 255, 255, 0.2);\n transition: all .1s ease-in-out 0s;\n}\n\n.button::after:active {\n background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.2));\n}\n\n.button:active::before {\n content: \"\";\n display: block;\n position: absolute;\n top: 5%;\n left: 20%;\n width: 50%;\n height: 80%;\n background-color: rgba(255, 255, 255, 0.1);\n animation: overlay 0.1s ease-in-out 0s;\n pointer-events: none;\n}\n\n.button svg {\n width: 15px;\n height: 15px;\n}\n\n@keyframes overlay {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.button:focus {\n outline: none;\n}"},{"created":"2024-01-20T08:21:45.000Z","isPrivate":0,"projectId":"c3a64e","snapshot":"https://s1.qingting.work/runjs/7e5f21d1832f.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by aasisodiya","updated":"2024-01-20T10:21:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":441,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background-color: #eee;\n border: none;\n padding: 1rem;\n font-size: 1rem;\n width: 10em;\n border-radius: 1rem;\n color: lightcoral;\n box-shadow: 0 0.4rem #dfd9d9;\n cursor: pointer;\n}\n\nbutton:active {\n color: white;\n box-shadow: 0 0.2rem #dfd9d9;\n transform: translateY(0.2rem);\n}\n\nbutton:hover:not(:disabled) {\n background: lightcoral;\n color: white;\n text-shadow: 0 0.1rem #bcb4b4;\n}\n\nbutton:disabled {\n cursor: auto;\n color: grey;\n}"},{"created":"2024-01-20T03:59:38.000Z","isPrivate":0,"projectId":"7c0f32","snapshot":"https://s1.qingting.work/runjs/f87518802093.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by satyamchaudharydev","updated":"2024-01-20T08:19:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":506,"cssLen":1571,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"body {\n background-color: black;\n}\nbutton {\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"}]}},"actionData":null,"errors":null}