{"loaderData":{"0":null,"0-2":{"total":7067,"projects":[{"created":"2024-01-22T17:00:37.000Z","isPrivate":0,"projectId":"3f5193","snapshot":null,"tags":null,"title":"button by KSAplay","updated":"2024-01-22T17:00:37.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":405,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background-color: #0050ec;\n color: white;\n font-size: 16px;\n font-weight: bold;\n padding: 15px 20px;\n border-radius: 2em;\n cursor: pointer;\n transition: 0.1s ease;\n border-width: 0;\n box-shadow: 1px 5px 0 0 #0e285d;\n}\n\nbutton:hover {\n transform: translateY(-4px);\n box-shadow: 1px 9px 0 0 #0e285d;\n}\n\nbutton:active {\n transform: translateY(4px);\n box-shadow: 0px 0px 0 0 #0e285d;\n}"},{"created":"2024-01-22T17:00:37.000Z","isPrivate":0,"projectId":"6d6c12","snapshot":null,"tags":null,"title":"button by artginzburg","updated":"2024-01-22T17:00:37.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":11079,"cssLen":5675,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

HOVER

FOR

SOCIAL

","css":".main_back {\n position: absolute;\n border-radius: 10px;\n transform: rotate(90deg);\n width: 11em;\n height: 11em;\n background: linear-gradient(270deg, #03a9f4, #cc39a4, #ffb5d2);\n z-index: -2;\n box-shadow: inset 0px 0px 180px 5px #ffffff;\n transition: opacity 1s, border-radius .3s;\n}\n\n.main {\n display: flex;\n flex-wrap: wrap;\n width: 14em;\n align-items: center;\n justify-content: center;\n z-index: -1;\n}\n\n.card {\n width: 60px;\n height: 60px;\n border-top-left-radius: 10px;\n background: lightgrey;\n transition: .3s ease, .15s background-color, .15s background-image ease-in-out;\n background: rgba(255, 255, 255, 0.596);\n backdrop-filter: blur(5px);\n border: 1px solid transparent;\n -webkit-backdrop-filter: blur(5px);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.card .instagram {\n opacity: 0;\n transition: .2s ease-in-out;\n fill: #cc39a4;\n}\n\n.card:nth-child(2) {\n border-radius: 0px;\n}\n\n.card:nth-child(2) .twitter {\n opacity: 0;\n transition: .2s ease-in-out;\n fill: #03A9F4;\n}\n\n.card:nth-child(3) {\n border-top-right-radius: 10px;\n border-top-left-radius: 0px;\n}\n\n.card:nth-child(3) .dribble {\n opacity: 0;\n transition: .2s ease-in-out;\n fill: #ffb5d2;\n}\n\n.card:nth-child(4) {\n border-radius: 0px;\n}\n\n.card:nth-child(4) .codepen {\n opacity: 0;\n transition: .2s ease-in-out;\n fill: black;\n}\n\n.card:nth-child(5) {\n border-radius: 0px;\n}\n\n.card:nth-child(5) .uiverse {\n position: absolute;\n margin-left: 0.2em;\n margin-top: 0.2em;\n opacity: 0;\n transition: .2s ease-in-out;\n}\n\n.card:nth-child(6) {\n border-radius: 0px;\n}\n\n.card:nth-child(6) .discord {\n opacity: 0;\n transition: .2s ease-in-out;\n fill: #8c9eff;\n}\n\n.card:nth-child(7) {\n border-bottom-left-radius: 10px;\n border-top-left-radius: 0px;\n}\n\n.card:nth-child(7) .github {\n opacity: 0;\n transition: .2s ease-in-out;\n fill: black;\n}\n\n.card:nth-child(8) {\n border-radius: 0px;\n}\n\n.card:nth-child(8) .telegram {\n opacity: 0;\n transition: .2s ease-in-out;\n fill: #29b6f6;\n}\n\n.card:nth-child(9) {\n border-bottom-right-radius: 10px;\n border-top-left-radius: 0px;\n}\n\n.card:nth-child(9) .reddit {\n opacity: 0;\n transition: .2s ease-in-out;\n}\n\n.main:hover {\n width: 14em;\n cursor: pointer;\n}\n\n.main:hover .main_back {\n opacity: 0;\n border-radius: 30px;\n}\n\n.main:hover .card {\n --hover-edge-radius: 100%;\n --hover-edge-offset: 10%;\n margin: .2em;\n border-radius: 10px;\n box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.3);\n background: rgba(255, 255, 255, 0.2);\n}\n\n.main:hover .card:nth-child(1) {\n border-top-left-radius: var(--hover-edge-radius);\n}\n\n.main:hover .card:nth-child(3) {\n border-top-right-radius: var(--hover-edge-radius);\n}\n\n.main:hover .card:nth-child(7) {\n border-bottom-left-radius: var(--hover-edge-radius);\n}\n\n.main:hover .card:nth-child(9) {\n border-bottom-right-radius: var(--hover-edge-radius);\n}\n\n.main:hover .card:nth-child(1) svg {\n margin-top: var(--hover-edge-offset);\n margin-left: var(--hover-edge-offset);\n}\n\n.main:hover .card:nth-child(3) svg {\n margin-top: var(--hover-edge-offset);\n margin-right: var(--hover-edge-offset);\n}\n\n.main:hover .card:nth-child(7) svg {\n margin-bottom: var(--hover-edge-offset);\n margin-left: var(--hover-edge-offset);\n}\n\n.main:hover .card:nth-child(9) svg {\n margin-bottom: var(--hover-edge-offset);\n margin-right: var(--hover-edge-offset);\n}\n\n.main:hover .card:nth-child(5) {\n border: transparent;\n}\n\n.main:hover .text {\n opacity: 0;\n z-index: -3;\n}\n\n.main:hover .instagram {\n opacity: 1;\n}\n\n.main:hover .twitter {\n opacity: 1;\n}\n\n.main:hover .dribble {\n opacity: 1;\n}\n\n.main:hover .codepen {\n opacity: 1;\n}\n\n.main:hover .uiverse {\n opacity: 1;\n}\n\n.main:hover .discord {\n opacity: 1;\n}\n\n.main:hover .github {\n opacity: 1;\n}\n\n.main:hover .telegram {\n opacity: 1;\n}\n\n.main:hover .reddit {\n opacity: 1;\n}\n\n.card:nth-child(1):hover {\n background-color: #cc39a4;\n}\n\n.card:nth-child(1):hover .instagram {\n fill: white;\n}\n\n.card:nth-child(2):hover {\n background-color: #03A9F4;\n}\n\n.card:nth-child(2):hover .twitter {\n fill: white;\n}\n\n.card:nth-child(3):hover {\n background-color: #ffb5d2;\n}\n\n.card:nth-child(3):hover .dribble {\n fill: white;\n}\n\n.card:nth-child(4):hover {\n background-color: #1E1F26;\n}\n\n.card:nth-child(4):hover .codepen {\n fill: white;\n}\n\n.card:nth-child(5):hover {\n animation: backgroundIMG .1s;\n animation-fill-mode: forwards;\n}\n\n.card:nth-child(5):hover .uiverse #paint0_linear_501_142 stop {\n stop-color: white;\n}\n\n.card:nth-child(5):hover .uiverse #paint1_linear_501_142 stop {\n stop-color: white;\n}\n\n.card:nth-child(5):hover .uiverse #paint2_linear_501_142 stop {\n stop-color: white;\n}\n\n@keyframes backgroundIMG {\n 100% {\n background-image: linear-gradient(#BF66FF,#6248FF,#00DDEB);\n }\n}\n\n.card:nth-child(6):hover {\n background-color: #8c9eff;\n}\n\n.card:nth-child(6):hover .discord {\n fill: white;\n}\n\n.card:nth-child(7):hover {\n background-color: black;\n}\n\n.card:nth-child(7):hover .github {\n fill: white;\n}\n\n.card:nth-child(8):hover {\n background-color: #29b6f6;\n}\n\n.card:nth-child(8):hover .telegram > path:nth-of-type(1) {\n fill: white;\n}\n\n.card:nth-child(8):hover .telegram > path:nth-of-type(2) {\n fill: #29b6f6;\n}\n\n.card:nth-child(8):hover .telegram > path:nth-of-type(3) {\n fill: #29b6f6;\n}\n\n.card:nth-child(9):hover {\n background-color: rgb(255,69,0);\n}\n\n.card:nth-child(9) .reddit > g circle {\n fill: rgb(255,69,0);\n}\n\n.card:nth-child(9) .reddit > g path {\n fill: white;\n}\n\n.text {\n position: absolute;\n font-size: 0.7em;\n transition: .4s ease-in-out;\n color: black;\n text-align: center;\n font-weight: bold;\n letter-spacing: 0.33em;\n z-index: 3;\n}"},{"created":"2024-01-22T17:00:37.000Z","isPrivate":0,"projectId":"9f8f19","snapshot":null,"tags":null,"title":"button by Coderlab05","updated":"2024-01-22T17:00:37.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":56,"cssLen":1176,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n","css":".button {\n all: unset;\n width: 100px;\n height: 30px;\n font-size: 16px;\n background: transparent;\n border: none;\n position: relative;\n color: #f0f0f0;\n cursor: pointer;\n z-index: 1;\n padding: 10px 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n white-space: nowrap;\n user-select: none;\n -webkit-user-select: none;\n touch-action: manipulation;\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: linear-gradient(90deg,#ff0e5e,rgb(15, 159, 255));\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 -webkit-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-22T17:00:37.000Z","isPrivate":0,"projectId":"3bc207","snapshot":null,"tags":null,"title":"button by ChRotsides","updated":"2024-01-22T17:00:37.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":188,"cssLen":1404,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".cursor-pointer {\n cursor: pointer\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.bg-gradient-to-bl {\n background-image: linear-gradient(to bottom left, var(--tw-gradient-stops))\n}\n\n.from-purple-500 {\n --tw-gradient-from: #a855f7 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)\n}\n\n.to-purple-800 {\n --tw-gradient-to: #6b21a8 var(--tw-gradient-to-position)\n}\n\n.px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n\n.font-bold {\n font-weight: 700\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\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.shadow-purple-400 {\n --tw-shadow-color: #c084fc;\n --tw-shadow: var(--tw-shadow-colored)\n}\n\n.hover\\:scale-\\[1\\.2\\]:hover {\n --tw-scale-x: 1.2;\n --tw-scale-y: 1.2;\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-22T17:00:37.000Z","isPrivate":0,"projectId":"321fd4","snapshot":null,"tags":null,"title":"button by VassoD","updated":"2024-01-22T17:00:37.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":365,"cssLen":2895,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n Hover me \n\n","css":".relative {\n position: relative;\n}\n.h-12 {\n height: 3rem;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n.py-8 {\n padding-top: 2rem;\n padding-bottom: 2rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.transition {\n transition-property: color, background-color, border-color, fill, stroke,\n opacity, box-shadow, transform, filter, -webkit-text-decoration-color,\n -webkit-backdrop-filter;\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,\n backdrop-filter;\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,\n backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-500 {\n transition-duration: 500ms;\n}\n.before\\:absolute::before {\n content: var(--tw-content);\n position: absolute;\n}\n.before\\:inset-0::before {\n content: var(--tw-content);\n inset: 0px;\n}\n.before\\:rounded-lg::before {\n content: var(--tw-content);\n border-radius: 0.5rem;\n}\n.before\\:bg-gradient-to-br::before {\n content: var(--tw-content);\n background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));\n}\n.before\\:from-pink-400::before {\n content: var(--tw-content);\n --tw-gradient-from: #f472b6 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(244 114 182 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.before\\:via-purple-400::before {\n content: var(--tw-content);\n --tw-gradient-to: rgb(192 132 252 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from),\n #c084fc var(--tw-gradient-via-position), var(--tw-gradient-to);\n}\n.before\\:to-indigo-400::before {\n content: var(--tw-content);\n --tw-gradient-to: #818cf8 var(--tw-gradient-to-position);\n}\n.hover\\:scale-105:hover {\n --tw-scale-x: 1.05;\n --tw-scale-y: 1.05;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n.hover\\:animate-pulse:hover {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n.hover\\:shadow-lg:hover {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),\n 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),\n 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n"},{"created":"2024-01-22T17:00:37.000Z","isPrivate":0,"projectId":"a73104","snapshot":null,"tags":null,"title":"button by LeHuyHieu","updated":"2024-01-22T17:00:37.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":837,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n outline: none;\n display: inline-block;\n border: 1px solid #fff;\n padding: .8rem 2rem;\n border-radius: 5px;\n background: transparent;\n color: #fff;\n font-size: 1rem;\n transition: .3s;\n cursor: pointer;\n position: relative;\n}\n\n.btn::before {\n content: '';\n position: absolute;\n left: 5px;\n top: 5px;\n border-top: 2px solid #fff;\n border-left: 2px solid #fff;\n width: 0px;\n height: 0px;\n opacity: 0;\n transition: .3s;\n}\n\n.btn::after {\n content: '';\n position: absolute;\n right: 5px;\n bottom: 5px;\n border-bottom: 2px solid #fff;\n border-right: 2px solid #fff;\n width: 0px;\n height: 0px;\n opacity: 0;\n transition: .3s;\n}\n\n.btn:hover {\n box-shadow: 4px 4px 10px rgb(184, 184, 184);\n transform: translateY(-5px);\n}\n\n.btn:hover::after, .btn:hover::before {\n height: 20px;\n width: 20px;\n opacity: 1;\n}"},{"created":"2024-01-22T17:00:37.000Z","isPrivate":0,"projectId":"60fd37","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:37.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":832,"cssLen":1136,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n --main-focus: #2d8cf0;\n --font-color: #323232;\n --bg-color-sub: #dedede;\n --bg-color: #eee;\n --main-color: #323232;\n position: relative;\n width: 150px;\n height: 40px;\n cursor: pointer;\n display: flex;\n align-items: center;\n border: 2px solid var(--main-color);\n box-shadow: 4px 4px var(--main-color);\n background-color: var(--bg-color);\n border-radius: 10px;\n overflow: hidden;\n}\n\n.button, .button__icon, .button__text {\n transition: all 0.3s;\n}\n\n.button .button__text {\n transform: translateX(22px);\n color: var(--font-color);\n font-weight: 600;\n}\n\n.button .button__icon {\n position: absolute;\n transform: translateX(109px);\n height: 100%;\n width: 39px;\n background-color: var(--bg-color-sub);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.button .svg {\n width: 20px;\n fill: var(--main-color);\n}\n\n.button:hover {\n background: var(--bg-color);\n}\n\n.button:hover .button__text {\n color: transparent;\n}\n\n.button:hover .button__icon {\n width: 148px;\n transform: translateX(0);\n}\n\n.button:active {\n transform: translate(3px, 3px);\n box-shadow: 0px 0px var(--main-color);\n}"},{"created":"2024-01-22T17:00:37.000Z","isPrivate":0,"projectId":"f328f2","snapshot":null,"tags":null,"title":"button by LilaRest","updated":"2024-01-22T17:00:37.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":288,"cssLen":1089,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 20px 22px 20px 22px;\n box-shadow: rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;\n background-color: #e8e8e8;\n border-color: #ffe2e2;\n border-style: solid;\n border-width: 9px;\n border-radius: 35px;\n transition: transform 400ms cubic-bezier(.68,-0.55,.27,2.5), \n border-color 400ms ease-in-out,\n background-color 400ms ease-in-out;\n word-spacing: -2px;\n}\n\n@keyframes movingBorders {\n 0% {\n border-color: #fce4e4;\n }\n\n 50% {\n border-color: #ffd8d8;\n }\n\n 90% {\n border-color: #fce4e4;\n }\n}\n\nbutton:hover {\n background-color: #eee;\n transform: scale(105%);\n animation: movingBorders 3s infinite;\n}\n\nbutton svg {\n fill: rgb(255, 110, 110);\n}\n\n@keyframes beatingHeart {\n 0% {\n transform: scale(1);\n }\n\n 15% {\n transform: scale(1.15);\n }\n\n 30% {\n transform: scale(1);\n }\n\n 45% {\n transform: scale(1.15);\n }\n\n 60% {\n transform: scale(1);\n }\n}\n\nbutton:hover svg {\n transform: scale(105%);\n border-color: #ffd8d8;\n animation: beatingHeart 1.2s infinite;\n}\n"},{"created":"2024-01-22T17:00:37.000Z","isPrivate":0,"projectId":"806c88","snapshot":null,"tags":null,"title":"button by mucahit312ataman610","updated":"2024-01-22T17:00:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":38,"cssLen":1055,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n --primary-color: #000;\n --secondary-color: #fff;\n --border-color: #000;\n background-color: var(--primary-color);\n border: 2px solid var(--border-color);\n color: var(--secondary-color);\n padding: 10px 20px;\n font-size: 18px;\n font-weight: bold;\n border-radius: 50px;\n box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);\n position: relative;\n overflow: hidden;\n z-index: 1;\n transition: all 0.3s ease-in-out;\n}\n\n.button::before {\n content: \"\";\n display: block;\n position: absolute;\n top: -100%;\n left: 50%;\n width: 150%;\n height: 150%;\n background-color: var(--secondary-color);\n border-radius: 50%;\n transform: translate(-50%, 0) scale(0);\n z-index: -1;\n transition: all 0.3s ease-in-out;\n}\n\n.button:hover {\n background-color: var(--secondary-color);\n color: var(--primary-color);\n transform: translateY(-5px);\n box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2);\n}\n\n.button:hover::before {\n transform: translate(-50%, -50%) scale(2);\n}\n\n.button:active {\n transform: translateY(0);\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n}\n"},{"created":"2024-01-22T17:00:36.000Z","isPrivate":0,"projectId":"87f69d","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T17:00:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":638,"cssLen":757,"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 {\n cursor: pointer;\n}\n.fill-none {\n fill: none;\n}\n.stroke-yellow-400 {\n stroke: #facc15;\n}\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.hover\\:rotate-90:hover {\n --tw-rotate: 90deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.group:hover .group-hover\\:fill-yellow-800 {\n fill: #854d0e;\n}\n.group:active .group-active\\:fill-yellow-600 {\n fill: #ca8a04;\n}\n.group:active .group-active\\:stroke-yellow-200 {\n stroke: #fef08a;\n}\n.group:active .group-active\\:duration-0 {\n transition-duration: 0s;\n}\n"},{"created":"2024-01-22T17:00:36.000Z","isPrivate":0,"projectId":"353e13","snapshot":null,"tags":null,"title":"button by albertofanini-prog","updated":"2024-01-22T17:00:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1441,"cssLen":2365,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

","css":".pulsa {\n animation: pulsa 1.4s infinite;\n min-width: 200px;\n width: fit-content;\n border-radius: 9999px;\n /* overflow: hidden; */\n}\n\n.cta {\n width: 100%;\n height: 100%;\n border: none;\n outline: none;\n background-color: none;\n border-radius: 9999px;\n padding: 8px 16px;\n color: white;\n font-size: 15px;\n background: linear-gradient(109.6deg, #090979 11.2%, #9006A1 53.7%, #090979 100.2%);\n letter-spacing: 0.08em;\n font-weight: 800;\n position: relative;\n}\n\n.cta:active {\n animation: pulsa-active .4s infinite;\n}\n\n.star {\n width: 2px;\n height: 2px;\n background-color: white;\n border-radius: 50%;\n position: absolute;\n animation: pulsa-stella 1.8s infinite;\n transition: all .8s ease-in-out;\n}\n\n.star.a {\n top: 8px;\n left: 6px;\n}\n\n.star.b {\n top: 2px;\n left: 16px;\n}\n\n.star.c {\n top: 18px;\n left: 8px;\n}\n\n.star.d {\n top: 14px;\n left: 20px;\n}\n\n.star.e {\n top: 30px;\n left: 8px;\n}\n\n.star.f {\n top: 24px;\n left: 24px;\n}\n\n.star.g {\n top: 10px;\n left: 32px;\n}\n\n.pulsa:hover .star.a {\n transform: translate3d(0px, 8px, 0);\n}\n\n.pulsa:hover .star.b {\n transform: translate3d(-4px, 6px, 0);\n}\n\n.pulsa:hover .star.c {\n transform: translate3d(14px, -8px, 0);\n}\n\n.pulsa:hover .star.d {\n transform: translate3d(16px, -2px, 0);\n}\n\n.pulsa:hover .star.e {\n transform: translate3d(58px, -20px, 0);\n}\n\n.pulsa:hover .star.f {\n transform: translate3d(34px, 2px, 0);\n}\n\n.pulsa:hover .star.g {\n transform: translate3d(10px, 16px, 0);\n}\n\n.rocket {\n position: absolute;\n top: 8px;\n right: 16px;\n z-index: -1;\n transform: rotate(180deg);\n transition: all .3s ease-in-out;\n}\n\n.pulsa:hover .rocket {\n z-index: auto;\n animation: muovi-razzo 1.8s linear;\n transform: rotate(0deg);\n}\n\n@keyframes pulsa {\n 0% {\n box-shadow: 0 0 0 0 #9006A1;\n }\n\n 100% {\n box-shadow: 0 0 0 8px #fbb32f01;\n }\n}\n\n@keyframes pulsa-stella {\n 0% {\n box-shadow: 0 0 0 0 #ffffff;\n }\n\n 100% {\n box-shadow: 0 0 0 4px #fbb32f01;\n }\n}\n\n@keyframes muovi-razzo {\n from {\n transform: rotate(180deg);\n }\n\n 25% {\n transform: translate3d(40px, 32px, 0);\n }\n\n 50% {\n transform: translate3d(32px, -60px, 0);\n }\n\n 75% {\n transform: translate3d(0px, -60px, 0) rotate(0);\n }\n\n to {\n transform: rotate(0deg);\n }\n}\n\n@keyframes pulsa-active {\n 0% {\n box-shadow: 0 0 0 0 #9006A1;\n }\n\n 100% {\n box-shadow: 0 0 0 16px #fbb32f01;\n }\n}"},{"created":"2024-01-22T17:00:36.000Z","isPrivate":0,"projectId":"a0874b","snapshot":null,"tags":null,"title":"button by themrsami","updated":"2024-01-22T17:00:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":133,"cssLen":622,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"@keyframes pulse {\n 50% {\n opacity: .5\n }\n}\n\n.animate-pulse {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.bg-pink-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(236 72 153 / var(--tw-bg-opacity))\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n\n.font-bold {\n font-weight: 700\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}\n\n.hover\\:bg-pink-700:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(190 24 93 / var(--tw-bg-opacity))\n}"}]}},"actionData":null,"errors":null}