{"loaderData":{"0":null,"0-3":{"total":7311,"projects":[{"created":"2024-01-22T16:59:47.000Z","isPrivate":0,"projectId":"4d777a","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T16:59:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":738,"cssLen":752,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" \n\n","css":".Btn {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: 100px;\n height: 40px;\n border: none;\n padding: 0px 20px;\n background-color: rgb(168, 38, 255);\n color: white;\n font-weight: 500;\n cursor: pointer;\n border-radius: 10px;\n box-shadow: 5px 5px 0px rgb(140, 32, 212);\n transition-duration: .3s;\n}\n\n.svg {\n width: 13px;\n position: absolute;\n right: 0;\n margin-right: 20px;\n fill: white;\n transition-duration: .3s;\n}\n\n.Btn:hover {\n color: transparent;\n}\n\n.Btn:hover svg {\n right: 43%;\n margin: 0;\n padding: 0;\n border: none;\n transition-duration: .3s;\n}\n\n.Btn:active {\n transform: translate(3px , 3px);\n transition-duration: .3s;\n box-shadow: 2px 2px 0px rgb(140, 32, 212);\n}"},{"created":"2024-01-22T16:59:47.000Z","isPrivate":0,"projectId":"a3b0c9","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T16:59:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1481,"cssLen":936,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".Btn {\n width: 45px;\n height: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background-color: transparent;\n position: relative;\n /* overflow: hidden; */\n border-radius: 7px;\n cursor: pointer;\n transition: all .3s;\n}\n\n.svgContainer {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n backdrop-filter: blur(0px);\n letter-spacing: 0.8px;\n border-radius: 10px;\n transition: all .3s;\n border: 1px solid rgba(156, 156, 156, 0.466);\n}\n\n.BG {\n position: absolute;\n content: \"\";\n width: 100%;\n height: 100%;\n background: #181818;\n z-index: -1;\n border-radius: 10px;\n pointer-events: none;\n transition: all .3s;\n}\n\n.Btn:hover .BG {\n transform: rotate(35deg);\n transform-origin: bottom;\n}\n\n.Btn:hover .svgContainer {\n background-color: rgba(156, 156, 156, 0.466);\n backdrop-filter: blur(4px);\n}\n"},{"created":"2024-01-22T16:59:47.000Z","isPrivate":0,"projectId":"9e9714","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T16:59:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":24,"cssLen":395,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n background: #fbca1f;\n font-family: inherit;\n padding: 0.6em 1.3em;\n font-weight: 900;\n font-size: 18px;\n border: 3px solid black;\n border-radius: 0.4em;\n box-shadow: 0.1em 0.1em;\n cursor: pointer;\n}\n\nbutton:hover {\n transform: translate(-0.05em, -0.05em);\n box-shadow: 0.15em 0.15em;\n}\n\nbutton:active {\n transform: translate(0.05em, 0.05em);\n box-shadow: 0.05em 0.05em;\n}\n"},{"created":"2024-01-22T16:59:47.000Z","isPrivate":0,"projectId":"2b227f","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T16:59:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":170,"cssLen":1392,"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 font-family: inherit;\n font-size: 18px;\n border-radius: 40em;\n width: 8em;\n height: 3em;\n z-index: 1;\n color: white;\n cursor: pointer;\n overflow: hidden;\n border: none;\n}\n\nbutton .text {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n line-height: 3em;\n border-radius: 40em;\n border: none;\n background: linear-gradient(\n rgba(255, 255, 255, 0.473),\n rgba(150, 150, 150, 0.25)\n );\n z-index: 1;\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n}\n\nbutton .blob {\n position: absolute;\n z-index: -1;\n border-radius: 5em;\n width: 5em;\n height: 3em;\n transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;\n}\n\nbutton .blob:nth-child(2) {\n left: 0em;\n top: 0;\n background: #ff930f;\n}\n\nbutton .blob:nth-child(3) {\n left: 1.8em;\n top: 0;\n z-index: -1;\n background: #bf0fff;\n}\n\nbutton .blob:nth-child(4) {\n left: 4em;\n top: -1em;\n background: #ff1b6b;\n}\n\nbutton .blob:nth-child(5) {\n left: 4.3em;\n top: 1.6em;\n background: #0061ff;\n}\n\nbutton:hover .blob:nth-child(2) {\n background: #0061ff;\n}\n\nbutton:hover .blob:nth-child(3) {\n background: #ff1b6b;\n}\n\nbutton:hover .blob:nth-child(4) {\n background: #bf0fff;\n}\n\nbutton:hover .blob:nth-child(5) {\n background: #ff930f;\n}\n\nbutton:hover .blob {\n transform: scale(1.3);\n}\n\nbutton:active {\n border: 2px solid white;\n}\n"},{"created":"2024-01-22T16:59:47.000Z","isPrivate":0,"projectId":"0318ee","snapshot":null,"tags":null,"title":"button by doniaskima","updated":"2024-01-22T16:59:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":113,"cssLen":2287,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn-17,\n.btn-17 *,\n.btn-17 :after,\n.btn-17 :before,\n.btn-17:after,\n.btn-17:before {\n border: 0 solid;\n box-sizing: border-box;\n}\n\n.btn-17 {\n -webkit-tap-highlight-color: transparent;\n -webkit-appearance: button;\n background-color: #000;\n background-image: none;\n color: #fff;\n cursor: pointer;\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,\n Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,\n Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n font-size: 100%;\n font-weight: 900;\n line-height: 1.5;\n margin: 0;\n -webkit-mask-image: -webkit-radial-gradient(#000, #fff);\n padding: 0;\n text-transform: uppercase;\n}\n\n.btn-17:disabled {\n cursor: default;\n}\n\n.btn-17:-moz-focusring {\n outline: auto;\n}\n\n.btn-17 svg {\n display: block;\n vertical-align: middle;\n}\n\n.btn-17 [hidden] {\n display: none;\n}\n\n.btn-17 {\n border-radius: 99rem;\n border-width: 2px;\n padding: 0.8rem 3rem;\n z-index: 0;\n}\n\n.btn-17,\n.btn-17 .text-container {\n overflow: hidden;\n position: relative;\n}\n\n.btn-17 .text-container {\n display: block;\n mix-blend-mode: difference;\n}\n\n.btn-17 .text {\n display: block;\n position: relative;\n}\n\n.btn-17:hover .text {\n -webkit-animation: move-up-alternate 0.3s forwards;\n animation: move-up-alternate 0.3s forwards;\n}\n\n@-webkit-keyframes move-up-alternate {\n 0% {\n transform: translateY(0);\n }\n\n 50% {\n transform: translateY(80%);\n }\n\n 51% {\n transform: translateY(-80%);\n }\n\n to {\n transform: translateY(0);\n }\n}\n\n@keyframes move-up-alternate {\n 0% {\n transform: translateY(0);\n }\n\n 50% {\n transform: translateY(80%);\n }\n\n 51% {\n transform: translateY(-80%);\n }\n\n to {\n transform: translateY(0);\n }\n}\n\n.btn-17:after,\n.btn-17:before {\n --skew: 0.2;\n background: #fff;\n content: \"\";\n display: block;\n height: 102%;\n left: calc(-50% - 50% * var(--skew));\n pointer-events: none;\n position: absolute;\n top: -104%;\n transform: skew(calc(150deg * var(--skew))) translateY(var(--progress, 0));\n transition: transform 0.2s ease;\n width: 100%;\n}\n\n.btn-17:after {\n --progress: 0%;\n left: calc(50% + 50% * var(--skew));\n top: 102%;\n z-index: -1;\n}\n\n.btn-17:hover:before {\n --progress: 100%;\n}\n\n.btn-17:hover:after {\n --progress: -102%;\n}\n"},{"created":"2024-01-22T16:59:47.000Z","isPrivate":0,"projectId":"41ad5b","snapshot":null,"tags":null,"title":"button by cssbuttons-io","updated":"2024-01-22T16:59:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":58,"cssLen":2749,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".wrapper {\n perspective: 500px;\n transform: rotatex(10deg);\n animation: rotateAngle 6s linear infinite;\n margin: auto;\n width: auto;\n}\n\nbutton {\n display: block;\n position: relative;\n margin: 0.5em 0;\n padding: 0.8em 2.2em;\n cursor: pointer;\n background: #FFFFFF;\n border: none;\n border-radius: 0.4em;\n text-transform: uppercase;\n font-size: 19px;\n font-family: \"Work Sans\", sans-serif;\n font-weight: 500;\n letter-spacing: 0.04em;\n mix-blend-mode: color-dodge;\n perspective: 500px;\n transform-style: preserve-3d;\n}\n\nbutton:before, button:after {\n --z: 0px;\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n content: \"\";\n width: 100%;\n height: 100%;\n opacity: 0;\n mix-blend-mode: inherit;\n border-radius: inherit;\n transform-style: preserve-3d;\n transform: translate3d(calc(var(--z) * 0px), calc(var(--z) * 0px), calc(var(--z) * 0px));\n}\n\nbutton span {\n mix-blend-mode: none;\n display: block;\n}\n\nbutton:after {\n background-color: #5D00FF;\n}\n\nbutton:before {\n background-color: #FF1731;\n}\n\nbutton:hover {\n background-color: #FFF65B;\n transition: background 0.3s 0.1s;\n}\n\nbutton:hover:before {\n --z: 0.04;\n animation: translateWobble 2.2s ease forwards;\n}\n\nbutton:hover:after {\n --z: -0.06;\n animation: translateWobble 2.2s ease forwards;\n}\n\n@keyframes rotateAngle {\n 0% {\n transform: rotateY(0deg) rotateX(10deg);\n -webkit-animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);\n animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);\n }\n\n 25% {\n transform: rotateY(20deg) rotateX(10deg);\n }\n\n 50% {\n transform: rotateY(0deg) rotateX(10deg);\n -webkit-animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);\n animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);\n }\n\n 75% {\n transform: rotateY(-20deg) rotateX(10deg);\n }\n\n 100% {\n transform: rotateY(0deg) rotateX(10deg);\n }\n}\n\n@keyframes translateWobble {\n 0% {\n opacity: 0;\n transform: translate3d(calc(var(--z) * 0px), calc(var(--z) * 0px), calc(var(--z) * 0px));\n }\n\n 16% {\n transform: translate3d(calc(var(--z) * 160px), calc(var(--z) * 160px), calc(var(--z) * 160px));\n }\n\n 28% {\n opacity: 1;\n transform: translate3d(calc(var(--z) * 70px), calc(var(--z) * 70px), calc(var(--z) * 70px));\n }\n\n 44% {\n transform: translate3d(calc(var(--z) * 130px), calc(var(--z) * 130px), calc(var(--z) * 130px));\n }\n\n 59% {\n transform: translate3d(calc(var(--z) * 85px), calc(var(--z) * 85px), calc(var(--z) * 85px));\n }\n\n 73% {\n transform: translate3d(calc(var(--z) * 110px), calc(var(--z) * 110px), calc(var(--z) * 110px));\n }\n\n 88% {\n opacity: 1;\n transform: translate3d(calc(var(--z) * 90px), calc(var(--z) * 90px), calc(var(--z) * 90px));\n }\n\n 100% {\n opacity: 1;\n transform: translate3d(calc(var(--z) * 100px), calc(var(--z) * 100px), calc(var(--z) * 100px));\n }\n}"},{"created":"2024-01-22T16:59:47.000Z","isPrivate":0,"projectId":"b9192d","snapshot":null,"tags":null,"title":"button by satyamchaudharydev","updated":"2024-01-22T16:59:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":108,"cssLen":1136,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n --primary-color: #645bff;\n --secondary-color: #fff;\n --hover-color: #111;\n --arrow-width: 10px;\n --arrow-stroke: 2px;\n box-sizing: border-box;\n border: 0;\n border-radius: 20px;\n color: var(--secondary-color);\n padding: 1em 1.8em;\n background: var(--primary-color);\n display: flex;\n transition: 0.2s background;\n align-items: center;\n gap: 0.6em;\n font-weight: bold;\n}\n\nbutton .arrow-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\nbutton .arrow {\n margin-top: 1px;\n width: var(--arrow-width);\n background: var(--primary-color);\n height: var(--arrow-stroke);\n position: relative;\n transition: 0.2s;\n}\n\nbutton .arrow::before {\n content: \"\";\n box-sizing: border-box;\n position: absolute;\n border: solid var(--secondary-color);\n border-width: 0 var(--arrow-stroke) var(--arrow-stroke) 0;\n display: inline-block;\n top: -3px;\n right: 3px;\n transition: 0.2s;\n padding: 3px;\n transform: rotate(-45deg);\n}\n\nbutton:hover {\n background-color: var(--hover-color);\n}\n\nbutton:hover .arrow {\n background: var(--secondary-color);\n}\n\nbutton:hover .arrow:before {\n right: 0;\n}"},{"created":"2024-01-22T16:59:46.000Z","isPrivate":0,"projectId":"72addd","snapshot":null,"tags":null,"title":"button by felipesntr","updated":"2024-01-22T16:59:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":100,"cssLen":586,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n font-size: 16px;\n position: relative;\n margin: auto;\n padding: 1em 2.5em 1em 2.5em;\n border: none;\n background: #fff;\n transition: all 0.1s linear;\n box-shadow: 0 0.4em 1em rgba(0, 0, 0, 0.1);\n}\n\nbutton:active {\n transform: scale(0.95);\n}\n\nbutton span {\n color: #464646;\n}\n\nbutton .border {\n position: absolute;\n border: 0.15em solid #fff;\n transition: all 0.3s 0.08s linear;\n top: 50%;\n left: 50%;\n width: 9em;\n height: 3em;\n transform: translate(-50%, -50%);\n}\n\nbutton:hover .border {\n display: block;\n width: 9.9em;\n height: 3.7em;\n}\n\n.full-rounded {\n border-radius: 2em;\n}"},{"created":"2024-01-22T16:59:46.000Z","isPrivate":0,"projectId":"3e2d3a","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T16:59:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":803,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n font-size: 18px;\n letter-spacing: 2px;\n text-transform: uppercase;\n display: inline-block;\n text-align: center;\n font-weight: bold;\n padding: 0.7em 2em;\n border: 3px solid #FF0072;\n border-radius: 2px;\n position: relative;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);\n color: #FF0072;\n text-decoration: none;\n transition: 0.3s ease all;\n z-index: 1;\n}\n\nbutton:before {\n transition: 0.5s all ease;\n position: absolute;\n top: 0;\n left: 50%;\n right: 50%;\n bottom: 0;\n opacity: 0;\n content: '';\n background-color: #FF0072;\n z-index: -1;\n}\n\nbutton:hover, button:focus {\n color: white;\n}\n\nbutton:hover:before, button:focus:before {\n transition: 0.5s all ease;\n left: 0;\n right: 0;\n opacity: 1;\n}\n\nbutton:active {\n transform: scale(0.9);\n}"},{"created":"2024-01-22T16:59:46.000Z","isPrivate":0,"projectId":"4de01d","snapshot":null,"tags":null,"title":"button by tarantino421","updated":"2024-01-22T16:59:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":423,"cssLen":1363,"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

","css":".box {\n --clr-shadow__border: #d9a1ff;\n --clr-text: #F6F4EB;\n --clr-space: #120e1e;\n --clr-space-gr: #271950;\n --clr-star: #E9F8F9;\n --size: 3rem;\n position: relative;\n outline: 1px solid var(--clr-shadow__border);\n}\n\n.button {\n font-weight: 600;\n font-size: 1.5rem;\n letter-spacing: 0.2rem;\n background: transparent;\n padding: calc(var(--size) / 3) var(--size);\n border: none;\n cursor: pointer;\n color: var(--clr-text);\n text-shadow: 2px 0px var(--clr-shadow__border), 0px 2px var(--clr-shadow__border),\n -2px 0px var(--clr-shadow__border), 0px -2px var(--clr-shadow__border);\n}\n\n.space {\n width: 100%;\n height: 100%;\n bottom: 0%;\n gap: 1.5rem;\n transition: 0.5s ease-in-out;\n z-index: -1;\n opacity: 0;\n overflow: hidden;\n position: absolute;\n display: flex;\n background: linear-gradient( 160deg, var(--clr-space), var(--clr-space-gr));\n}\n\n.box:hover .space {\n opacity: 1;\n}\n\n.star {\n height: 4rem;\n width: 0.3rem;\n transition: 0.5s;\n border-radius: 50px;\n clip-path: polygon(50% 0%, 100% 100%, 0% 100%);\n position: relative;\n background-color: var(--clr-star);\n animation: space-animation calc(0.1s * var(--i)) linear infinite;\n}\n\n@keyframes space-animation {\n 0% {\n transform: rotate(-30deg) translateY(calc(-52% * var(--i)));\n }\n\n 100% {\n transform: rotate(-30deg) translateY(calc(52% * var(--i)));\n }\n}\n\n\n\n\n\n\n\n"},{"created":"2024-01-22T16:59:46.000Z","isPrivate":0,"projectId":"9823be","snapshot":null,"tags":null,"title":"button by yaroslavas2001","updated":"2024-01-22T16:59:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1243,"cssLen":2889,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn {\n height: 4em;\n width: 12em;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border: 0px solid black;\n cursor: pointer;\n}\n\n.wrapper {\n height: 2em;\n width: 8em;\n position: relative;\n background: transparent;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.text {\n font-size: 17px;\n z-index: 1;\n color: #000;\n padding: 4px 12px;\n border-radius: 4px;\n background: rgba(255, 255, 255, 0.7);\n transition: all 0.5s ease;\n}\n\n.flower {\n display: grid;\n grid-template-columns: 1em 1em;\n position: absolute;\n transition: grid-template-columns 0.8s ease;\n}\n\n.flower1 {\n top: -12px;\n left: -13px;\n transform: rotate(5deg);\n}\n\n.flower2 {\n bottom: -5px;\n left: 8px;\n transform: rotate(35deg);\n}\n\n.flower3 {\n bottom: -15px;\n transform: rotate(0deg);\n}\n\n.flower4 {\n top: -14px;\n transform: rotate(15deg);\n}\n\n.flower5 {\n right: 11px;\n top: -3px;\n transform: rotate(25deg);\n}\n\n.flower6 {\n right: -15px;\n bottom: -15px;\n transform: rotate(30deg);\n}\n\n.petal {\n height: 1em;\n width: 1em;\n border-radius: 40% 70% / 7% 90%;\n background: linear-gradient(#07a6d7, #93e0ee);\n border: 0.5px solid #96d1ec;\n z-index: 0;\n transition: width 0.8s ease, height 0.8s ease;\n}\n\n.two {\n transform: rotate(90deg);\n}\n\n.three {\n transform: rotate(270deg);\n}\n\n.four {\n transform: rotate(180deg);\n}\n\n.btn:hover .petal {\n background: linear-gradient(#0761d7, #93bdee);\n border: 0.5px solid #96b4ec;\n}\n\n.btn:hover .flower {\n grid-template-columns: 1.5em 1.5em;\n}\n\n.btn:hover .flower .petal {\n width: 1.5em;\n height: 1.5em;\n}\n\n.btn:hover .text {\n background: rgba(255, 255, 255, 0.4);\n}\n\n.btn:hover div.flower1 {\n animation: 15s linear 0s normal none infinite running flower1;\n}\n\n@keyframes flower1 {\n 0% {\n transform: rotate(5deg);\n }\n\n 100% {\n transform: rotate(365deg);\n }\n}\n\n.btn:hover div.flower2 {\n animation: 13s linear 1s normal none infinite running flower2;\n}\n\n@keyframes flower2 {\n 0% {\n transform: rotate(35deg);\n }\n\n 100% {\n transform: rotate(-325deg);\n }\n}\n\n.btn:hover div.flower3 {\n animation: 16s linear 1s normal none infinite running flower3;\n}\n\n@keyframes flower3 {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.btn:hover div.flower4 {\n animation: 17s linear 1s normal none infinite running flower4;\n}\n\n@keyframes flower4 {\n 0% {\n transform: rotate(15deg);\n }\n\n 100% {\n transform: rotate(375deg);\n }\n}\n\n.btn:hover div.flower5 {\n animation: 20s linear 1s normal none infinite running flower5;\n}\n\n@keyframes flower5 {\n 0% {\n transform: rotate(25deg);\n }\n\n 100% {\n transform: rotate(-335deg);\n }\n}\n\n.btn:hover div.flower6 {\n animation: 15s linear 1s normal none infinite running flower6;\n}\n\n@keyframes flower6 {\n 0% {\n transform: rotate(30deg);\n }\n\n 100% {\n transform: rotate(390deg);\n }\n}\n"},{"created":"2024-01-22T16:59:46.000Z","isPrivate":0,"projectId":"922f3e","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T16:59:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":630,"cssLen":653,"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","css":".cursor-pointer{cursor:pointer}.fill-none{fill:none}.stroke-zinc-400{stroke:#a1a1aa}.outline-none{outline:2px solid transparent;outline-offset:2px}.duration-300{transition-duration:300ms}.hover\\:rotate-90:hover{--tw-rotate:90deg;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))}.group:hover .group-hover\\:fill-zinc-800{fill:#27272a}.group:active .group-active\\:fill-zinc-600{fill:#52525b}.group:active .group-active\\:stroke-zinc-200{stroke:#e4e4e7}.group:active .group-active\\:duration-0{transition-duration:0s}"}]}},"actionData":null,"errors":null}