{"loaderData":{"0":null,"0-3":{"total":7365,"projects":[{"created":"2024-01-22T17:00:35.000Z","isPrivate":0,"projectId":"aa6637","snapshot":null,"tags":null,"title":"button by Shoh2008","updated":"2024-01-22T17:00:35.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":1369,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background-color: #0078d0;\n border: 0;\n border-radius: 56px;\n color: #fff;\n cursor: pointer;\n display: inline-block;\n font-family: system-ui,-apple-system,system-ui,\"Segoe UI\",Roboto,Ubuntu,\"Helvetica Neue\",sans-serif;\n font-size: 18px;\n font-weight: 600;\n outline: 0;\n padding: 16px 32px;\n position: relative;\n text-align: center;\n text-decoration: none;\n -webkit-transition: all .3s;\n transition: all .3s;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-user-select: none;\n -ms-touch-action: manipulation;\n touch-action: manipulation;\n}\n\nbutton:before {\n background-color: initial;\n background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), to(rgba(255, 255, 255, 0)));\n background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%);\n border-radius: 125px;\n content: \"\";\n height: 50%;\n left: 4%;\n opacity: .5;\n position: absolute;\n top: 0;\n -webkit-transition: all .3s;\n transition: all .3s;\n width: 92%;\n}\n\nbutton:hover {\n -webkit-box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px;\n box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px;\n -webkit-transform: scale(1.05);\n -ms-transform: scale(1.05);\n transform: scale(1.05);\n}"},{"created":"2024-01-22T17:00:35.000Z","isPrivate":0,"projectId":"1ab251","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:35.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1584,"cssLen":832,"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 width: 130px;\n height: 35px;\n border-radius: 30px;\n background-color: white;\n border: 1px #00acee solid;\n overflow: hidden;\n}\n\n.text1 {\n font-size: 15px;\n font-weight: 600;\n margin-left: 22%;\n}\n\n.text2 {\n position: absolute;\n top: 25%;\n left: -50px;\n font-weight: 700;\n font-size: 14px;\n color: white;\n}\n\n.icon {\n position: absolute;\n top: 0;\n left: 0;\n transition: transform 0.5s;\n}\n\n.icon::before {\n position: absolute;\n left: -100px;\n top: 0;\n z-index: -1;\n content: '';\n width: 130px;\n height: 33px;\n border-radius: 30px;\n background-color: #00acee;\n}\n\nbutton:hover .icon {\n transform: translateX(96px);\n transition: transform 0.5s;\n}\n\nbutton:hover .text2 {\n transform: translateX(100px);\n transition: transform 0.6s;\n}\n\nbutton:active {\n transform: scale(1.03);\n}"},{"created":"2024-01-22T17:00:35.000Z","isPrivate":0,"projectId":"7feac5","snapshot":null,"tags":null,"title":"button by escannord","updated":"2024-01-22T17:00:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4687,"cssLen":2715,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \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,\n rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\n transition: 0.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,\n rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\n transition: 0.2s ease-in-out;\n}\n\n.twitter {\n margin-top: 1.5em;\n margin-left: -0.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,\n rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\n transition: 0.2s ease-in-out;\n}\n\n.github {\n margin-top: -0.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,\n rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\n transition: 0.2s ease-in-out;\n}\n\n.discord {\n margin-top: -0.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 box-shadow: 1px 1px 0px #eeb1de, 2px 2px 0px #d365b6, 3px 3px 0px #d365b6,\n 4px 4px 0px #d365b6, 5px 5px 0px #d365b6;\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 box-shadow: 1px 1px 0px #a1defa, 2px 2px 0px #41bef8, 3px 3px 0px #41bef8,\n 4px 4px 0px #41bef8, 5px 5px 0px #41bef8;\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 box-shadow: 1px 1px 0px rgb(124, 123, 123), 2px 2px 0px #333, 3px 3px 0px #333,\n 4px 4px 0px #333, 5px 5px 0px #333;\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 box-shadow: 1px 1px 0px #bdc2e2, 2px 2px 0px #9ca6e0, 3px 3px 0px #9ca6e0,\n 4px 4px 0px #9ca6e0, 5px 5px 0px #9ca6e0;\n}\n\n.card4:hover .discord {\n fill: white;\n}\n\n.card1,\n.card2,\n.card3,\n.card4 {\n box-shadow: 1px 1px 0px rgb(179, 175, 175), 2px 2px 0px rgb(179, 175, 175),\n 3px 3px 0px rgb(179, 175, 175), 4px 4px 0px rgb(179, 175, 175),\n 5px 5px 0px rgb(179, 175, 175);\n}\n"},{"created":"2024-01-22T17:00:34.000Z","isPrivate":0,"projectId":"6b4748","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1126,"cssLen":1119,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" ","css":".Btn {\n border: none;\n border-radius: 50%;\n width: 45px;\n height: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition-duration: .4s;\n cursor: pointer;\n position: relative;\n background: #f09433;\n background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);\n background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);\n background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );\n overflow: hidden;\n}\n\n.svgIcon {\n transition-duration: .3s;\n}\n\n.svgIcon path {\n fill: white;\n}\n\n.text {\n position: absolute;\n color: rgb(255, 255, 255);\n width: 120px;\n font-weight: 600;\n opacity: 0;\n transition-duration: .4s;\n}\n\n.Btn:hover {\n width: 110px;\n transition-duration: .4s;\n border-radius: 30px;\n}\n\n.Btn:hover .text {\n opacity: 1;\n transition-duration: .4s;\n}\n\n.Btn:hover .svgIcon {\n opacity: 0;\n transition-duration: .3s;\n}"},{"created":"2024-01-22T17:00:34.000Z","isPrivate":0,"projectId":"384d7b","snapshot":null,"tags":null,"title":"button by mrhyddenn","updated":"2024-01-22T17:00:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":174,"cssLen":1503,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".scrolldown {\n --color: white;\n --sizeX: 30px;\n --sizeY: 50px;\n position: relative;\n width: var(--sizeX);\n height: var(--sizeY);\n margin-left: var(sizeX / 2);\n border: calc(var(--sizeX) / 10) solid var(--color);\n border-radius: 50px;\n box-sizing: border-box;\n margin-bottom: 16px;\n cursor: pointer;\n}\n\n.scrolldown::before {\n content: \"\";\n position: absolute;\n bottom: 30px;\n left: 50%;\n width: 6px;\n height: 6px;\n margin-left: -3px;\n background-color: var(--color);\n border-radius: 100%;\n animation: scrolldown-anim 2s infinite;\n box-sizing: border-box;\n box-shadow: 0px -5px 3px 1px #2a547066;\n}\n\n@keyframes scrolldown-anim {\n 0% {\n opacity: 0;\n height: 6px;\n }\n\n 40% {\n opacity: 1;\n height: 10px;\n }\n\n 80% {\n transform: translate(0, 20px);\n height: 10px;\n opacity: 0;\n }\n\n 100% {\n height: 3px;\n opacity: 0;\n }\n}\n\n.chevrons {\n padding: 6px 0 0 0;\n margin-left: -3px;\n margin-top: 48px;\n width: 30px;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.chevrondown {\n margin-top: -6px;\n position: relative;\n border: solid var(--color);\n border-width: 0 3px 3px 0;\n display: inline-block;\n width: 10px;\n height: 10px;\n transform: rotate(45deg);\n}\n\n.chevrondown:nth-child(odd) {\n animation: pulse54012 500ms ease infinite alternate;\n}\n\n.chevrondown:nth-child(even) {\n animation: pulse54012 500ms ease infinite alternate 250ms;\n}\n\n@keyframes pulse54012 {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 0.5;\n }\n}"},{"created":"2024-01-22T17:00:34.000Z","isPrivate":0,"projectId":"e08676","snapshot":null,"tags":null,"title":"button by guilhermeyohan","updated":"2024-01-22T17:00:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":676,"cssLen":379,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".beach-button {\n background-color: #fbc02d;\n border: none;\n border-radius: 5px;\n color: #333;\n cursor: pointer;\n display: flex;\n align-items: center;\n font-size: 18px;\n font-weight: bold;\n padding: 10px 20px;\n transition: all 0.3s ease;\n}\n\n.beach-button:hover {\n background-color: #ffe082;\n}\n\n.beach-button svg {\n height: 20px;\n margin-right: 10px;\n width: 20px;\n}"},{"created":"2024-01-22T17:00:34.000Z","isPrivate":0,"projectId":"c757bd","snapshot":null,"tags":null,"title":"button by Praashoo7","updated":"2024-01-22T17:00:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1140,"cssLen":3048,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Teenage Engineering [EP-133 K.O. II] - Buttons

\n","css":"/* Teenage Engineering [EP-133 K.O. II] - Buttons */\n\n.main {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n row-gap: 1.25em;\n}\n\n.buttons {\n display: flex;\n flex-direction: column;\n row-gap: 1.5em;\n}\n.button_pair {\n display: flex;\n column-gap: 1.5em;\n}\n.button_pair1 {\n display: flex;\n flex-direction: column;\n row-gap: 0.9em;\n}\n\n.btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 5em;\n height: 5em;\n background-color: #171717;\n border-radius: 5px;\n}\n\n.button1 {\n width: 5.7em;\n height: 5.7em;\n border-radius: 10px;\n border: none;\n outline: none;\n background-color: #c7c3c0;\n box-shadow: rgba(0, 0, 0, 0.377) 10px 10px 8px,\n #ffffff 1.5px 1.5px 2px 0px inset, #c7c3c0 -3.2px -3.2px 8px 0px inset;\n cursor: pointer;\n font-family: Montserrat;\n transition: 0.1s ease-in-out;\n}\n.button2 {\n width: 5.7em;\n height: 5.7em;\n border-radius: 10px;\n border: none;\n outline: none;\n background-color: #c7c3c0;\n box-shadow: rgba(0, 0, 0, 0.377) 10px 10px 8px,\n #ffffff 1.5px 1.5px 2px 0px inset, #c7c3c0 -3.2px -3.2px 8px 0px inset;\n cursor: pointer;\n font-family: Montserrat;\n transition: 0.1s ease-in-out;\n}\n.svg1 {\n fill: #5f5f5f;\n width: 25px;\n height: 25px;\n transition: 0.1s ease-in-out;\n}\n.svg2 {\n fill: #5f5f5f;\n width: 25px;\n height: 25px;\n transition: 0.1s ease-in-out;\n}\n\n.button3 {\n display: flex;\n align-items: flex-start;\n justify-content: center;\n width: 5.7em;\n height: 5.7em;\n border-radius: 10px;\n border: none;\n outline: none;\n background-color: #d42a02;\n box-shadow: rgba(0, 0, 0, 0.377) 10px 10px 8px, #fb702c 2px 2px 10px 0px inset,\n #d42a02 -4px -4px 1px 0px inset;\n cursor: pointer;\n font-family: Montserrat;\n transition: 0.1s ease-in-out;\n}\n.button4 {\n display: flex;\n align-items: flex-start;\n justify-content: center;\n width: 5.7em;\n height: 5.7em;\n border-radius: 10px;\n border: none;\n outline: none;\n background-color: #545251;\n box-shadow: rgba(0, 0, 0, 0.377) 10px 10px 8px,\n #a8a6a4 1.5px 1.5px 1px 0px inset, #545251 -3.2px -3.2px 8px 0px inset;\n cursor: pointer;\n font-family: Montserrat;\n transition: 0.1s ease-in-out;\n}\n\n.button_text {\n color: white;\n padding-top: 0.9em;\n letter-spacing: 0.075em;\n font-size: 0.85em;\n transition: 0.1s ease-in-out;\n}\n\n.text {\n font-family: Montserrat;\n text-align: center;\n font-size: 0.65em;\n}\n\n.button1:active,\n.button2:active {\n box-shadow: rgba(0, 0, 0, 0.377) 0px 0px 0px, inset 0.5px 0.5px 4px #000000,\n #c7c3c0 -3.2px -3.2px 8px 0px inset;\n}\n.button1:active .svg1,\n.button2:active .svg2 {\n scale: 0.95;\n}\n.button3:active {\n box-shadow: rgba(0, 0, 0, 0.377) 0px 0px 0px, inset 0.5px 0.5px 4px #000000,\n #d42a02 -3.2px -3.2px 8px 0px inset;\n}\n.button3:active .button_text {\n transform: translateY(0.5px);\n}\n.button4:active {\n box-shadow: rgba(0, 0, 0, 0.377) 0px 0px 0px, inset 0.5px 0.5px 4px #000000,\n #545251 -3.2px -3.2px 8px 0px inset;\n}\n.button4:active .button_text {\n transform: translateY(0.5px);\n}\n"},{"created":"2024-01-22T17:00:34.000Z","isPrivate":0,"projectId":"f74401","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":947,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n width: 140px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n padding: 0px 15px;\n background-color: red;\n border-radius: 10px;\n border: none;\n color: white;\n position: relative;\n cursor: pointer;\n font-weight: 900;\n transition-duration: .2s;\n background: linear-gradient(0deg, #000, #272727);\n}\n\n.button:before, .button:after {\n content: '';\n position: absolute;\n left: -2px;\n top: -2px;\n border-radius: 10px;\n background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, \n\t\t#0000ff, #00ff00,#ffff00, #ff0000);\n background-size: 400%;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n z-index: -1;\n animation: steam 20s linear infinite;\n}\n\n@keyframes steam {\n 0% {\n background-position: 0 0;\n }\n\n 50% {\n background-position: 400% 0;\n }\n\n 100% {\n background-position: 0 0;\n }\n}\n\n.button:after {\n filter: blur(50px);\n}\n\n"},{"created":"2024-01-22T17:00:34.000Z","isPrivate":0,"projectId":"f1343b","snapshot":null,"tags":null,"title":"button by Dear31","updated":"2024-01-22T17:00:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":348,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background-color: rgb(255, 255, 255);\n border: 3px solid black;\n padding: 12px 32px;\n border-radius: 22px;\n box-shadow: 2px 2px 1px black;\n transition: all .2s ease;\n font-size: 1em;\n font-weight: 800;\n}\n\nbutton:hover {\n transform: translate(-2px, -1px);\n box-shadow: 7px 7px 1px rgb(0, 0, 0);\n transition: all .2s ease-in;\n}"},{"created":"2024-01-22T17:00:34.000Z","isPrivate":0,"projectId":"db8bf7","snapshot":null,"tags":null,"title":"button by r7chardgh","updated":"2024-01-22T17:00:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":33,"cssLen":465,"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 width: 3em;\n height: 3em;\n transform: rotateX(30deg);\n border-radius: .2em;\n border: 1px solid #3f3f3f;\n box-shadow: 0 .3em 0 .1em #3f3f3f;\n ;\n transition: all 150ms;\n}\n\n.button::after {\n position: absolute;\n content: \"f5\";\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n padding: .2em;\n text-align: end;\n color: #3f3f3f;\n}\n\n.button:active {\n transform: rotateX(30deg) translateY(.3em);\n box-shadow: 0 0 0 0 #3f3f3f;\n}"},{"created":"2024-01-22T17:00:34.000Z","isPrivate":0,"projectId":"cdb485","snapshot":null,"tags":null,"title":"button by AKAspidey01","updated":"2024-01-22T17:00:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":707,"cssLen":1875,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".absolute{position:absolute}.relative{position:relative}.left-0{left:0px}.top-0{top:0px}.z-10{z-index:10}.h-full{height:100%}.w-full{width:100%}.cursor-pointer{cursor:pointer}.overflow-hidden{overflow:hidden}.border-2{border-width:2px}.border-green-500{--tw-border-opacity:1;border-color:rgb(34 197 94 / var(--tw-border-opacity))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94 / var(--tw-bg-opacity))}.px-8{padding-left:2rem;padding-right:2rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.delay-300{transition-delay:300ms}.duration-500{transition-duration:500ms}.group:hover .group-hover\\:-translate-x-full{--tw-translate-x:-100%;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\\:-translate-y-full{--tw-translate-y:-100%;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\\:translate-x-full{--tw-translate-x:100%;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\\:translate-y-full{--tw-translate-y:100%;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\\:text-green-500{--tw-text-opacity:1;color:rgb(34 197 94 / var(--tw-text-opacity))}"},{"created":"2024-01-22T17:00:34.000Z","isPrivate":0,"projectId":"039fae","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":940,"cssLen":521,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".connectBtn {\n width: 120px;\n height: 40px;\n border: none;\n border-radius: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 7px;\n color: white;\n font-weight: 600;\n background: linear-gradient( to right,#8be3fc,#576bff);\n box-shadow: 0 20px 30px -7px rgba(97, 118, 238, 0.5);\n transition: all 0.3s ease-in-out;\n cursor: pointer;\n}\n\n.connectBtn:hover {\n box-shadow: none;\n transform: translate(0px, 2.2px);\n}\n\n.connectBtn:active {\n transform: scale(0.96) translate(0px, 3.2px);\n}"}]}},"actionData":null,"errors":null}