{"loaderData":{"0":null,"0-3":{"total":7556,"projects":[{"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}"},{"created":"2024-01-22T16:59:09.000Z","isPrivate":0,"projectId":"a4deba","snapshot":"https://s1.qingting.work/runjs/776fcc2a58f8.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T18:59:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":666,"cssLen":947,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n width: 200px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 10px;\n padding: 0px 15px;\n background-color: rgb(66, 66, 66);\n border-radius: 10px;\n color: white;\n border: none;\n position: relative;\n cursor: pointer;\n transition-duration: .2s;\n}\n\n.bell {\n width: 13px;\n}\n\n.bell path {\n fill: rgb(0, 206, 62);\n}\n\n.arrow {\n position: absolute;\n right: 0;\n width: 30px;\n height: 100%;\n font-size: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.button:hover {\n background-color: rgb(77, 77, 77);\n transition-duration: .2s;\n}\n\n.button:hover .arrow {\n animation: slide-right .6s ease-out both;\n}\n/* arrow animation */\n@keyframes slide-right {\n 0% {\n transform: translateX(-10px);\n opacity: 0;\n }\n\n 100% {\n transform: translateX(0);\n opacity: 1;\n }\n}\n\n.button:active {\n transform: translate(1px , 1px);\n transition-duration: .2s;\n}\n"},{"created":"2024-01-22T16:59:09.000Z","isPrivate":0,"projectId":"626858","snapshot":"https://s1.qingting.work/runjs/fb1e01653a1d.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by zjssun","updated":"2024-01-22T18:59:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":33,"cssLen":566,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n padding: 10px 20px;\n text-transform: uppercase;\n border-radius: 8px;\n font-size: 17px;\n font-weight: 500;\n color: #ffffff80;\n text-shadow: none;\n background: transparent;\n cursor: pointer;\n box-shadow: transparent;\n border: 1px solid #ffffff80;\n transition: 0.5s ease;\n user-select: none;\n}\n\n#btn:hover,\n:focus {\n color: #ffffff;\n background: #008cff;\n border: 1px solid #008cff;\n text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 20px #ffffff;\n box-shadow: 0 0 5px #008cff, 0 0 20px #008cff, 0 0 50px #008cff,\n 0 0 100px #008cff;\n}\n"},{"created":"2024-01-22T16:59:09.000Z","isPrivate":0,"projectId":"ed5407","snapshot":"https://s1.qingting.work/runjs/0f0d9f5fe853.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by JkHuger","updated":"2024-01-22T18:59:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":98,"cssLen":849,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".rainbow-hover {\n font-size: 16px;\n font-weight: 700;\n color: #ff7576;\n background-color: #2B3044;\n border: none;\n outline: none;\n cursor: pointer;\n padding: 12px 24px;\n position: relative;\n line-height: 24px;\n border-radius: 9px;\n box-shadow: 0px 1px 2px #2B3044,\n 0px 4px 16px #2B3044;\n transform-style: preserve-3d;\n transform: scale(var(--s, 1)) perspective(600px)\n rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));\n perspective: 600px;\n transition: transform 0.1s;\n}\n\n.sp {\n background: linear-gradient(\n 90deg,\n #866ee7,\n #ea60da,\n #ed8f57,\n #fbd41d,\n #2cca91\n );\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n text-fill-color: transparent;\n display: block;\n}\n\n.rainbow-hover:active {\n transition: 0.3s;\n transform: scale(0.93);\n}"},{"created":"2024-01-22T16:59:09.000Z","isPrivate":0,"projectId":"b1cff0","snapshot":"https://s1.qingting.work/runjs/cb6891811710.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by KINGFRESS","updated":"2024-01-22T18:59:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":226,"cssLen":974,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n font-family: Arial, Helvetica, sans-serif;\n font-weight: bold;\n color: white;\n background-color: #171717;\n padding: 1em 2em;\n border: none;\n border-radius: .6rem;\n position: relative;\n cursor: pointer;\n overflow: hidden;\n}\n\nbutton span:not(:nth-child(6)) {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n height: 30px;\n width: 30px;\n background-color: #0c66ed;\n border-radius: 50%;\n transition: .6s ease;\n}\n\nbutton span:nth-child(6) {\n position: relative;\n}\n\nbutton span:nth-child(1) {\n transform: translate(-3.3em, -4em);\n}\n\nbutton span:nth-child(2) {\n transform: translate(-6em, 1.3em);\n}\n\nbutton span:nth-child(3) {\n transform: translate(-.2em, 1.8em);\n}\n\nbutton span:nth-child(4) {\n transform: translate(3.5em, 1.4em);\n}\n\nbutton span:nth-child(5) {\n transform: translate(3.5em, -3.8em);\n}\n\nbutton:hover span:not(:nth-child(6)) {\n transform: translate(-50%, -50%) scale(4);\n transition: 1.5s ease;\n}\n "},{"created":"2024-01-22T16:59:09.000Z","isPrivate":0,"projectId":"dd177c","snapshot":"https://s1.qingting.work/runjs/bd5be0402436.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by eirikvold","updated":"2024-01-22T18:59:23.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-22T16:59:09.000Z","isPrivate":0,"projectId":"28ac93","snapshot":"https://s1.qingting.work/runjs/e78d958715ce.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by SujitAdroja","updated":"2024-01-22T18:59:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":47,"cssLen":532,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n color: purple;\n text-transform: uppercase;\n text-decoration: none;\n border: 2px solid purple;\n padding: 10px 20px;\n font-size: 17px;\n font-weight: bold;\n background: transparent;\n position: relative;\n transition: all 1s;\n overflow: hidden;\n}\n\n.btn:hover {\n color: white;\n}\n\n.btn::before {\n content: '';\n position: absolute;\n height: 100%;\n width: 0%;\n top: 0;\n left: -40px;\n transform: skewX(45deg);\n background-color: purple;\n z-index: -1;\n transition: all 1s;\n}\n\n.btn:hover::before {\n width: 160%;\n}"},{"created":"2024-01-22T16:59:09.000Z","isPrivate":0,"projectId":"b18e68","snapshot":"https://s1.qingting.work/runjs/d8f0a448f91b.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by MuhammadHasann","updated":"2024-01-22T18:59:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4576,"cssLen":2511,"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: 12px 35px;\n background: #fec195;\n font-size: 17px;\n font-weight: 500;\n color: #181818;\n border: 3px solid #fec195;\n border-radius: 8px;\n box-shadow: 0 0 0 #fec1958c;\n transition: all 0.3s ease-in-out;\n cursor: pointer;\n}\n\n.star-1 {\n position: absolute;\n top: 20%;\n left: 20%;\n width: 25px;\n height: auto;\n filter: drop-shadow(0 0 0 #fffdef);\n z-index: -5;\n transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);\n}\n\n.star-2 {\n position: absolute;\n top: 45%;\n left: 45%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 0 #fffdef);\n z-index: -5;\n transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);\n}\n\n.star-3 {\n position: absolute;\n top: 40%;\n left: 40%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 0 #fffdef);\n z-index: -5;\n transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);\n}\n\n.star-4 {\n position: absolute;\n top: 20%;\n left: 40%;\n width: 8px;\n height: auto;\n filter: drop-shadow(0 0 0 #fffdef);\n z-index: -5;\n transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01);\n}\n\n.star-5 {\n position: absolute;\n top: 25%;\n left: 45%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 0 #fffdef);\n z-index: -5;\n transition: all 0.6s cubic-bezier(0, 0.4, 0, 1.01);\n}\n\n.star-6 {\n position: absolute;\n top: 5%;\n left: 50%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 0 #fffdef);\n z-index: -5;\n transition: all 0.8s ease;\n}\n\nbutton:hover {\n background: transparent;\n color: #fec195;\n box-shadow: 0 0 25px #fec1958c;\n}\n\nbutton:hover .star-1 {\n position: absolute;\n top: -80%;\n left: -30%;\n width: 25px;\n height: auto;\n filter: drop-shadow(0 0 10px #fffdef);\n z-index: 2;\n}\n\nbutton:hover .star-2 {\n position: absolute;\n top: -25%;\n left: 10%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 10px #fffdef);\n z-index: 2;\n}\n\nbutton:hover .star-3 {\n position: absolute;\n top: 55%;\n left: 25%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 10px #fffdef);\n z-index: 2;\n}\n\nbutton:hover .star-4 {\n position: absolute;\n top: 30%;\n left: 80%;\n width: 8px;\n height: auto;\n filter: drop-shadow(0 0 10px #fffdef);\n z-index: 2;\n}\n\nbutton:hover .star-5 {\n position: absolute;\n top: 25%;\n left: 115%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 10px #fffdef);\n z-index: 2;\n}\n\nbutton:hover .star-6 {\n position: absolute;\n top: 5%;\n left: 60%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 10px #fffdef);\n z-index: 2;\n}\n\n.fil0 {\n fill: #fffdef;\n}\n"}]}},"actionData":null,"errors":null}