{"loaderData":{"0":null,"0-3":{"total":7311,"projects":[{"created":"2024-01-22T16:59:10.000Z","isPrivate":0,"projectId":"07c718","snapshot":"https://s1.qingting.work/runjs/1e3a4375864d.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by JsGrisales","updated":"2024-01-22T18:59:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":1187,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n min-height: 53px;\n min-width: 166px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: distribute;\n justify-content: space-around;\n position: relative;\n cursor: pointer;\n background: -webkit-gradient(linear, left top, right top, color-stop(-12.74%, rgba(110, 239, 255, .5)), color-stop(56.76%, rgba(106, 224, 255, .271)));\n background: linear-gradient(90deg, rgba(110, 239, 255, .5) -12.74%, rgba(106, 224, 255, .271) 56.76%);\n border: 2px solid #acf7ff;\n color: #FFFFFF;\n font-size: 18px;\n font-weight: 600;\n}\n\nbutton:before {\n content: \"\";\n width: 4px;\n height: 28px;\n background: #19173b;\n border: 2px solid #acf7ff;\n -webkit-transform: rotate(-45deg);\n -ms-transform: rotate(-45deg);\n transform: rotate(-45deg);\n position: absolute;\n border-top: 0;\n border-left: 0;\n border-bottom: 0;\n bottom: -7px;\n left: 4px;\n border-bottom-left-radius: 10px;\n border-top-left-radius: 10px;\n}\n\nbutton:after {\n content: \"\";\n position: absolute;\n left: -2px;\n bottom: -2px;\n border-top: 15px solid transparent;\n border-left: 15px solid #fffcf7;\n}"},{"created":"2024-01-22T16:59:10.000Z","isPrivate":0,"projectId":"58d540","snapshot":"https://s1.qingting.work/runjs/cf6b21addf41.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by e-coders","updated":"2024-01-22T18:59:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":72,"cssLen":1246,"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 overflow: hidden;\n border: 1px solid #18181a;\n color: #18181a;\n display: inline-block;\n font-size: 15px;\n line-height: 15px;\n padding: 18px 18px 17px;\n text-decoration: none;\n cursor: pointer;\n background: #fff;\n user-select: none;\n -webkit-user-select: none;\n touch-action: manipulation;\n}\n\nbutton span:first-child {\n position: relative;\n transition: color 600ms cubic-bezier(0.48, 0, 0.12, 1);\n z-index: 10;\n}\n\nbutton span:last-child {\n color: white;\n display: block;\n position: absolute;\n bottom: 0;\n transition: all 500ms cubic-bezier(0.48, 0, 0.12, 1);\n z-index: 100;\n opacity: 0;\n top: 50%;\n left: 50%;\n transform: translateY(225%) translateX(-50%);\n height: 14px;\n line-height: 13px;\n}\n\nbutton:after {\n content: \"\";\n position: absolute;\n bottom: -50%;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: black;\n transform-origin: bottom center;\n transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1);\n transform: skewY(9.3deg) scaleY(0);\n z-index: 50;\n}\n\nbutton:hover:after {\n transform-origin: bottom center;\n transform: skewY(9.3deg) scaleY(2);\n}\n\nbutton:hover span:last-child {\n transform: translateX(-50%) translateY(-50%);\n opacity: 1;\n transition: all 900ms cubic-bezier(0.48, 0, 0.12, 1);\n}"},{"created":"2024-01-22T16:59:10.000Z","isPrivate":0,"projectId":"06f932","snapshot":"https://s1.qingting.work/runjs/0a50644ab6c9.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by Botwe-Felix5820","updated":"2024-01-22T18:59:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":24,"cssLen":768,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n height: 3em;\n width: 8em;\n border: none;\n border-radius: 10em;\n background: #016DD9;\n font-size: 17px;\n color: #ffffff;\n font-family: inherit;\n font-weight: 500;\n}\n\nbutton:hover {\n animation: shake3856 0.3s linear infinite both;\n}\n\n@keyframes shake3856 {\n 0% {\n -webkit-transform: translate(0);\n transform: translate(0);\n }\n\n 20% {\n -webkit-transform: translate(-2px, 2px);\n transform: translate(-2px, 2px);\n }\n\n 40% {\n -webkit-transform: translate(-2px, -2px);\n transform: translate(-2px, -2px);\n }\n\n 60% {\n -webkit-transform: translate(2px, 2px);\n transform: translate(2px, 2px);\n }\n\n 80% {\n -webkit-transform: translate(2px, -2px);\n transform: translate(2px, -2px);\n }\n\n 100% {\n -webkit-transform: translate(0);\n transform: translate(0);\n }\n}\n"},{"created":"2024-01-22T16:59:10.000Z","isPrivate":0,"projectId":"fe6953","snapshot":"https://s1.qingting.work/runjs/bebe7e34818d.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by EcheverriaJesus","updated":"2024-01-22T18:59:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":831,"cssLen":2420,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n GitHub\n

","css":".absolute {\n position: absolute\n}\n\n.relative {\n position: relative\n}\n\n.-top-14 {\n top: -3.5rem\n}\n\n.left-\\[50\\%\\] {\n left: 50%\n}\n\n.z-20 {\n z-index: 20\n}\n\n.w-8 {\n width: 2rem\n}\n\n.origin-left {\n transform-origin: left\n}\n\n.-translate-x-\\[50\\%\\] {\n --tw-translate-x: -50%;\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.scale-0 {\n --tw-scale-x: 0;\n --tw-scale-y: 0;\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-lg {\n border-radius: 0.5rem\n}\n\n.border {\n border-width: 1px\n}\n\n.border-gray-300 {\n --tw-border-opacity: 1;\n border-color: rgb(209 213 219 / var(--tw-border-opacity))\n}\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n}\n\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem\n}\n\n.font-bold {\n font-weight: 700\n}\n\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px 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.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-200 {\n transition-duration: 200ms\n}\n\n.duration-300 {\n transition-duration: 300ms\n}\n\n.ease-in-out {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)\n}\n\n.hover\\:scale-125:hover {\n --tw-scale-x: 1.25;\n --tw-scale-y: 1.25;\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.hover\\:stroke-blue-500:hover {\n stroke: #3b82f6\n}\n\n.group:hover .group-hover\\:scale-100 {\n --tw-scale-x: 1;\n --tw-scale-y: 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}"},{"created":"2024-01-22T16:59:10.000Z","isPrivate":0,"projectId":"2841d0","snapshot":"https://s1.qingting.work/runjs/aa35da9ec60f.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by gagan-gv","updated":"2024-01-22T18:59:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":47,"cssLen":862,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n padding: 15px 20px;\n font-size: 16px;\n background: transparent;\n border: none;\n position: relative;\n color: #f0f0f0;\n z-index: 1;\n}\n\n.button::after,\n.button::before {\n content: '';\n position: absolute;\n bottom: 0;\n right: 0;\n z-index: -99999;\n transition: all .4s;\n}\n\n.button::before {\n transform: translate(0%, 0%);\n width: 100%;\n height: 100%;\n background: #28282d;\n border-radius: 10px;\n}\n\n.button::after {\n transform: translate(10px, 10px);\n width: 35px;\n height: 35px;\n background: #ffffff15;\n backdrop-filter: blur(5px);\n border-radius: 50px;\n}\n\n.button:hover::before {\n transform: translate(5%, 20%);\n width: 110%;\n height: 110%;\n}\n\n.button:hover::after {\n border-radius: 10px;\n transform: translate(0, 0);\n width: 100%;\n height: 100%;\n}\n\n.button:active::after {\n transition: 0s;\n transform: translate(0, 5%);\n}"},{"created":"2024-01-22T16:59:10.000Z","isPrivate":0,"projectId":"8d87c0","snapshot":"https://s1.qingting.work/runjs/f552c9ec220d.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by KlaujonRuamni","updated":"2024-01-22T18:59:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":55,"cssLen":1292,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".beautiful-button {\n position: relative;\n display: inline-block;\n background: linear-gradient(to bottom, #1b1c3f, #4a4e91);\n /* Gradient background */\n color: white;\n /* White text color */\n font-family: \"Segoe UI\", sans-serif;\n /* Stylish and legible font */\n font-weight: bold;\n font-size: 18px;\n /* Large font size */\n border: none;\n /* No border */\n border-radius: 30px;\n /* Rounded corners */\n padding: 14px 28px;\n /* Large padding */\n cursor: pointer;\n /* Cursor on hover */\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\n /* Subtle shadow */\n animation: button-shimmer 2s infinite;\n transition: all 0.3s ease-in-out;\n /* Smooth transition */\n}\n\n/* Hover animation */\n.beautiful-button:hover {\n background: linear-gradient(to bottom, #2c2f63, #5b67b7);\n animation: button-particles 1s ease-in-out infinite;\n transform: translateY(-2px);\n}\n\n/* Click animation */\n.beautiful-button:active {\n transform: scale(0.95);\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);\n}\n\n/* Shimmer animation */\n@keyframes button-shimmer {\n 0% {\n background-position: left top;\n }\n\n 100% {\n background-position: right bottom;\n }\n}\n\n/* Particle animation */\n@keyframes button-particles {\n 0% {\n background-position: left top;\n }\n\n 100% {\n background-position: right bottom;\n }\n}"},{"created":"2024-01-22T16:59:10.000Z","isPrivate":0,"projectId":"36f8e7","snapshot":"https://s1.qingting.work/runjs/181f619d7e91.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by Gaurav-WebDev","updated":"2024-01-22T18:59:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":76,"cssLen":717,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n height: 50px;\n width: 200px;\n position: relative;\n background-color: transparent;\n cursor: pointer;\n border: 2px solid #252525;\n overflow: hidden;\n border-radius: 30px;\n color: #333;\n transition: all 0.5s ease-in-out;\n}\n\n.btn-txt {\n z-index: 1;\n font-weight: 800;\n letter-spacing: 4px;\n}\n\n.type1::after {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n transition: all 0.5s ease-in-out;\n background-color: #333;\n border-radius: 30px;\n visibility: hidden;\n height: 10px;\n width: 10px;\n z-index: -1;\n}\n\n.button:hover {\n box-shadow: 1px 1px 200px #252525;\n color: #fff;\n border: none;\n}\n\n.type1:hover::after {\n visibility: visible;\n transform: scale(100) translateX(2px);\n}"},{"created":"2024-01-22T16:59:10.000Z","isPrivate":0,"projectId":"a8d29f","snapshot":"https://s1.qingting.work/runjs/0a1c44545d30.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by Sergestra","updated":"2024-01-22T18:59:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":158,"cssLen":833,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n outline: 0;\n border: 0;\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: 140px;\n height: 50px;\n border-radius: 0.5em;\n box-shadow: 0 0.625em 1em 0 rgba(30, 143, 255, 0.35);\n overflow: hidden;\n}\n\nbutton div {\n transform: translateY(0px);\n width: 100%;\n}\n\nbutton,\nbutton div {\n transition: 0.6s cubic-bezier(.16,1,.3,1);\n}\n\nbutton div span {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 50px;\n padding: 0.75em 1.125em;\n}\n\nbutton div:nth-child(1) {\n background-color: #1e90ff;\n}\n\nbutton div:nth-child(2) {\n background-color: #21dc62;\n}\n\nbutton:hover {\n box-shadow: 0 0.625em 1em 0 rgba(33, 220, 98, 0.35);\n}\n\nbutton:hover div {\n transform: translateY(-50px);\n}\n\nbutton p {\n font-size: 17px;\n font-weight: bold;\n color: #ffffff;\n}\n\nbutton:active {\n transform: scale(0.95);\n}"},{"created":"2024-01-22T16:59:10.000Z","isPrivate":0,"projectId":"b5d4d0","snapshot":"https://s1.qingting.work/runjs/a0f291c07638.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by StealthWorm","updated":"2024-01-22T18:59:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":225,"cssLen":2829,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 13rem;\n overflow: hidden;\n height: 3rem;\n background-size: 300% 300%;\n backdrop-filter: blur(1rem);\n border-radius: 5rem;\n transition: 0.5s;\n animation: gradient_301 5s ease infinite;\n border: double 4px transparent;\n background-image: linear-gradient(#212121, #212121), linear-gradient(137.48deg, #ffdb3b 10%,#FE53BB 45%, #8F51EA 67%, #0044ff 87%);\n background-origin: border-box;\n background-clip: content-box, border-box;\n}\n\n#container-stars {\n position: absolute;\n z-index: -1;\n width: 100%;\n height: 100%;\n overflow: hidden;\n transition: 0.5s;\n backdrop-filter: blur(1rem);\n border-radius: 5rem;\n}\n\nstrong {\n z-index: 2;\n font-family: 'Avalors Personal Use';\n font-size: 12px;\n letter-spacing: 5px;\n color: #FFFFFF;\n text-shadow: 0 0 4px white;\n}\n\n#glow {\n position: absolute;\n display: flex;\n width: 12rem;\n}\n\n.circle {\n width: 100%;\n height: 30px;\n filter: blur(2rem);\n animation: pulse_3011 4s infinite;\n z-index: -1;\n}\n\n.circle:nth-of-type(1) {\n background: rgba(254, 83, 186, 0.636);\n}\n\n.circle:nth-of-type(2) {\n background: rgba(142, 81, 234, 0.704);\n}\n\n.btn:hover #container-stars {\n z-index: 1;\n background-color: #212121;\n}\n\n.btn:hover {\n transform: scale(1.1)\n}\n\n.btn:active {\n border: double 4px #FE53BB;\n background-origin: border-box;\n background-clip: content-box, border-box;\n animation: none;\n}\n\n.btn:active .circle {\n background: #FE53BB;\n}\n\n#stars {\n position: relative;\n background: transparent;\n width: 200rem;\n height: 200rem;\n}\n\n#stars::after {\n content: \"\";\n position: absolute;\n top: -10rem;\n left: -100rem;\n width: 100%;\n height: 100%;\n animation: animStarRotate 90s linear infinite;\n}\n\n#stars::after {\n background-image: radial-gradient(#ffffff 1px, transparent 1%);\n background-size: 50px 50px;\n}\n\n#stars::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: -50%;\n width: 170%;\n height: 500%;\n animation: animStar 60s linear infinite;\n}\n\n#stars::before {\n background-image: radial-gradient(#ffffff 1px, transparent 1%);\n background-size: 50px 50px;\n opacity: 0.5;\n}\n\n@keyframes animStar {\n from {\n transform: translateY(0);\n }\n\n to {\n transform: translateY(-135rem);\n }\n}\n\n@keyframes animStarRotate {\n from {\n transform: rotate(360deg);\n }\n\n to {\n transform: rotate(0);\n }\n}\n\n@keyframes gradient_301 {\n 0% {\n background-position: 0% 50%;\n }\n\n 50% {\n background-position: 100% 50%;\n }\n\n 100% {\n background-position: 0% 50%;\n }\n}\n\n@keyframes pulse_3011 {\n 0% {\n transform: scale(0.75);\n box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);\n }\n\n 70% {\n transform: scale(1);\n box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);\n }\n\n 100% {\n transform: scale(0.75);\n box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);\n }\n}"},{"created":"2024-01-22T16:59:09.000Z","isPrivate":0,"projectId":"26a53b","snapshot":"https://s1.qingting.work/runjs/eae52d5f20a5.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by MuhammadHasann","updated":"2024-01-22T18:59:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":16897,"cssLen":2062,"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 padding: 15px 45px;\n background: #fec195;\n font-size: 17px;\n font-weight: 500;\n color: #181818;\n cursor: pointer;\n border: 1px solid #fec195;\n border-radius: 8px;\n filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.2));\n}\n\nbutton:hover {\n border: 1px solid #f3b182;\n background: linear-gradient(\n 85deg,\n #fec195,\n #fcc196,\n #fabd92,\n #fac097,\n #fac39c\n );\n animation: wind 2s ease-in-out infinite;\n}\n\n@keyframes wind {\n 0% {\n background-position: 0% 50%;\n }\n\n 0% {\n background-position: 50% 100%;\n }\n\n 0% {\n background-position: 0% 50%;\n }\n}\n\n.icon-1 {\n position: absolute;\n top: 0;\n right: 0;\n width: 25px;\n transform-origin: 0 0;\n transform: rotate(10deg);\n transition: all 0.5s ease-in-out;\n filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));\n}\n\nbutton:hover .icon-1 {\n animation: slay-1 3s cubic-bezier(0.52, 0, 0.58, 1) infinite;\n transform: rotate(10deg);\n}\n\n@keyframes slay-1 {\n 0% {\n transform: rotate(10deg);\n }\n\n 50% {\n transform: rotate(-5deg);\n }\n\n 100% {\n transform: rotate(10deg);\n }\n}\n\n.icon-2 {\n position: absolute;\n top: 0;\n left: 25px;\n width: 12px;\n transform-origin: 50% 0;\n transform: rotate(10deg);\n transition: all 1s ease-in-out;\n filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.5));\n}\n\nbutton:hover .icon-2 {\n animation: slay-2 3s cubic-bezier(0.52, 0, 0.58, 1) 1s infinite;\n transform: rotate(0);\n}\n\n@keyframes slay-2 {\n 0% {\n transform: rotate(0deg);\n }\n\n 50% {\n transform: rotate(15deg);\n }\n\n 100% {\n transform: rotate(0);\n }\n}\n\n.icon-3 {\n position: absolute;\n top: 0;\n left: 0;\n width: 18px;\n transform-origin: 50% 0;\n transform: rotate(-5deg);\n transition: all 1s ease-in-out;\n filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.5));\n}\n\nbutton:hover .icon-3 {\n animation: slay-3 2s cubic-bezier(0.52, 0, 0.58, 1) 1s infinite;\n transform: rotate(0);\n}\n\n@keyframes slay-3 {\n 0% {\n transform: rotate(0deg);\n }\n\n 50% {\n transform: rotate(-5deg);\n }\n\n 100% {\n transform: rotate(0);\n }\n}\n"},{"created":"2024-01-22T16:59:09.000Z","isPrivate":0,"projectId":"03dfff","snapshot":"https://s1.qingting.work/runjs/bc7ba113f074.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by Madflows","updated":"2024-01-22T18:59:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":82,"cssLen":649,"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 overflow: hidden;\n height: 3rem;\n padding: 0 2rem;\n border-radius: 1.5rem;\n background: #3d3a4e;\n background-size: 400%;\n color: #fff;\n border: none;\n cursor: pointer;\n}\n\n.button:hover::before {\n transform: scaleX(1);\n}\n\n.button-content {\n position: relative;\n z-index: 1;\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n transform: scaleX(0);\n transform-origin: 0 50%;\n width: 100%;\n height: inherit;\n border-radius: inherit;\n background: linear-gradient(\n 82.3deg,\n rgba(150, 93, 233, 1) 10.8%,\n rgba(99, 88, 238, 1) 94.3%\n );\n transition: all 0.475s;\n}\n"},{"created":"2024-01-22T16:59:09.000Z","isPrivate":0,"projectId":"08f476","snapshot":"https://s1.qingting.work/runjs/600503ed909b.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by JkHuger","updated":"2024-01-22T18:59:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":15562,"cssLen":4690,"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

","css":".sparkle-button {\n --active: 0;\n --bg: radial-gradient(\n\t\t\t40% 50% at center 100%,\n\t\t\thsl(270 calc(var(--active) * 97%) 72% / var(--active)),\n\t\t\ttransparent\n\t\t),\n\t\tradial-gradient(\n\t\t\t80% 100% at center 120%,\n\t\t\thsl(260 calc(var(--active) * 97%) 70% / var(--active)),\n\t\t\ttransparent\n\t\t),\n\t\thsl(260 calc(var(--active) * 97%) calc((var(--active) * 44%) + 12%));\n background: var(--bg);\n font-size: 1.2rem;\n font-weight: 500;\n border: 0;\n cursor: pointer;\n padding: 1em 1em;\n display: flex;\n align-items: center;\n gap: 0.25em;\n white-space: nowrap;\n border-radius: 100px;\n position: relative;\n box-shadow: 0 0 calc(var(--active) * 3em) calc(var(--active) * 1em) hsl(260 97% 61% / 0.75),\n\t\t0 0em 0 0 hsl(260 calc(var(--active) * 97%) calc((var(--active) * 50%) + 30%)) inset,\n\t\t0 -0.05em 0 0 hsl(260 calc(var(--active) * 97%) calc(var(--active) * 60%)) inset;\n transition: box-shadow var(--transition), scale var(--transition), background var(--transition);\n scale: calc(1 + (var(--active) * 0.1));\n transition: .3s;\n}\n\n.sparkle-button:active {\n scale: 1;\n transition: .3s;\n}\n\n.sparkle path {\n color: hsl(0 0% calc((var(--active, 0) * 70%) + var(--base)));\n transform-box: fill-box;\n transform-origin: center;\n fill: currentColor;\n stroke: currentColor;\n animation-delay: calc((var(--transition) * 1.5) + (var(--delay) * 1s));\n animation-duration: 0.6s;\n transition: color var(--transition);\n}\n\n.sparkle-button:is(:hover, :focus-visible) path {\n animation-name: bounce;\n}\n\n@keyframes bounce {\n 35%, 65% {\n scale: var(--scale);\n }\n}\n\n.sparkle path:nth-of-type(1) {\n --scale: 0.5;\n --delay: 0.1;\n --base: 40%;\n}\n\n.sparkle path:nth-of-type(2) {\n --scale: 1.5;\n --delay: 0.2;\n --base: 20%;\n}\n\n.sparkle path:nth-of-type(3) {\n --scale: 2.5;\n --delay: 0.35;\n --base: 30%;\n}\n\n.sparkle-button:before {\n content: \"\";\n position: absolute;\n inset: -0.2em;\n z-index: -1;\n border: 0.25em solid hsl(260 97% 50% / 0.5);\n border-radius: 100px;\n opacity: var(--active, 0);\n transition: opacity var(--transition);\n}\n\n.spark {\n position: absolute;\n inset: 0;\n border-radius: 100px;\n rotate: 0deg;\n overflow: hidden;\n mask: linear-gradient(white, transparent 50%);\n animation: flip calc(var(--spark) * 2) infinite steps(2, end);\n}\n\n@keyframes flip {\n to {\n rotate: 360deg;\n }\n}\n\n.spark:before {\n content: \"\";\n position: absolute;\n width: 200%;\n aspect-ratio: 1;\n top: 0%;\n left: 50%;\n z-index: -1;\n translate: -50% -15%;\n rotate: 0;\n transform: rotate(-90deg);\n opacity: calc((var(--active)) + 0.4);\n background: conic-gradient(\n\t\tfrom 0deg,\n\t\ttransparent 0 340deg,\n\t\twhite 360deg\n\t);\n transition: opacity var(--transition);\n animation: rotate var(--spark) linear infinite both;\n}\n\n.spark:after {\n content: \"\";\n position: absolute;\n inset: var(--cut);\n border-radius: 100px;\n}\n\n.backdrop {\n position: absolute;\n inset: var(--cut);\n background: var(--bg);\n border-radius: 100px;\n transition: background var(--transition);\n}\n\n@keyframes rotate {\n to {\n transform: rotate(90deg);\n }\n}\n\n@supports(selector(:has(:is(+ *)))) {\n body:has(button:is(:hover, :focus-visible)) {\n --active: 1;\n --play-state: running;\n }\n\n .bodydrop {\n display: none;\n }\n}\n\n.sparkle-button:is(:hover, :focus-visible) ~ :is(.bodydrop, .particle-pen) {\n --active: 1;\n --play-state: runnin;\n}\n\n.sparkle-button:is(:hover, :focus-visible) {\n --active: 1;\n --play-state: running;\n}\n\n.sp {\n position: relative;\n}\n\n.particle-pen {\n position: absolute;\n width: 200%;\n aspect-ratio: 1;\n top: 50%;\n left: 50%;\n translate: -50% -50%;\n -webkit-mask: radial-gradient(white, transparent 65%);\n z-index: -1;\n opacity: var(--active, 0);\n transition: opacity var(--transition);\n}\n\n.particle {\n fill: white;\n width: calc(var(--size, 0.25) * 1rem);\n aspect-ratio: 1;\n position: absolute;\n top: calc(var(--y) * 1%);\n left: calc(var(--x) * 1%);\n opacity: var(--alpha, 1);\n animation: float-out calc(var(--duration, 1) * 1s) calc(var(--delay) * -1s) infinite linear;\n transform-origin: var(--origin-x, 1000%) var(--origin-y, 1000%);\n z-index: -1;\n animation-play-state: var(--play-state, paused);\n}\n\n.particle path {\n fill: hsl(0 0% 90%);\n stroke: none;\n}\n\n.particle:nth-of-type(even) {\n animation-direction: reverse;\n}\n\n@keyframes float-out {\n to {\n rotate: 360deg;\n }\n}\n\n.text {\n translate: 2% -6%;\n letter-spacing: 0.01ch;\n background: linear-gradient(90deg, hsl(0 0% calc((var(--active) * 100%) + 65%)), hsl(0 0% calc((var(--active) * 100%) + 26%)));\n -webkit-background-clip: text;\n color: transparent;\n transition: background var(--transition);\n}\n\n.sparkle-button svg {\n inline-size: 1.25em;\n translate: -25% -5%;\n}"}]}},"actionData":null,"errors":null}