{"loaderData":{"0":null,"0-2":{"total":7092,"projects":[{"created":"2024-01-22T16:59:54.000Z","isPrivate":0,"projectId":"064e8c","snapshot":null,"tags":null,"title":"button by SmookyDev","updated":"2024-01-22T16:59:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":393,"cssLen":2038,"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.isolation-auto {\n isolation: auto;\n}\n.z-10 {\n z-index: 10;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-lime-500 {\n --tw-border-opacity: 1;\n border-color: rgb(132 204 22 / var(--tw-border-opacity));\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.before\\:absolute::before {\n content: var(--tw-content);\n position: absolute;\n}\n.before\\:-left-full::before {\n content: var(--tw-content);\n left: -100%;\n}\n.before\\:-z-10::before {\n content: var(--tw-content);\n z-index: -10;\n}\n.before\\:aspect-square::before {\n content: var(--tw-content);\n aspect-ratio: 1 / 1;\n}\n.before\\:w-full::before {\n content: var(--tw-content);\n width: 100%;\n}\n.before\\:rounded-full::before {\n content: var(--tw-content);\n border-radius: 9999px;\n}\n.before\\:bg-lime-500::before {\n content: var(--tw-content);\n --tw-bg-opacity: 1;\n background-color: rgb(132 204 22 / var(--tw-bg-opacity));\n}\n.before\\:transition-all::before {\n content: var(--tw-content);\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.before\\:duration-700::before {\n content: var(--tw-content);\n transition-duration: 700ms;\n}\n.before\\:hover\\:left-0:hover::before {\n content: var(--tw-content);\n left: 0px;\n}\n.before\\:hover\\:w-full:hover::before {\n content: var(--tw-content);\n width: 100%;\n}\n.before\\:hover\\:scale-150:hover::before {\n content: var(--tw-content);\n --tw-scale-x: 1.5;\n --tw-scale-y: 1.5;\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.before\\:hover\\:duration-700:hover::before {\n content: var(--tw-content);\n transition-duration: 700ms;\n}\n"},{"created":"2024-01-22T16:59:54.000Z","isPrivate":0,"projectId":"91d8eb","snapshot":null,"tags":null,"title":"button by mayurd8862","updated":"2024-01-22T16:59:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":558,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n padding: 0.6em 1.3em;\n font-weight: 900;\n font-size: 18px;\n background: linear-gradient(to right, rgb(231, 71, 132), \n rgb(0, 170, 255));\n /* Gradient background */\n border-radius: 10px;\n border: none;\n color: aliceblue;\n text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);\n /* Text shadow effect */\n box-shadow: 0 0 10px rgba(55, 0, 255, 0.5);\n cursor: pointer;\n transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;\n}\n\n.button:hover {\n transform: scale(1.1);\n box-shadow: 0 0 15px rgb(231, 71, 132);\n color: white;\n}\n"},{"created":"2024-01-22T16:59:54.000Z","isPrivate":0,"projectId":"6f7509","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T16:59:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4500,"cssLen":767,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".Explore-Button {\n width: fit-content;\n height: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 5px 15px;\n gap: 10px;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n\n background: linear-gradient(120deg, rgb(65, 43, 95), rgb(96, 51, 154));\n}\n.IconContainer {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 25px;\n height: 25px;\n}\n.telescope {\n width: 100%;\n height: auto;\n transform-origin: center;\n transition: all 1s;\n transform: rotate(20deg);\n}\n.tripod {\n width: 60%;\n height: auto;\n}\n.text {\n color: rgb(240, 240, 240);\n font-weight: 500;\n font-size: 16px;\n letter-spacing: 1px;\n}\n.Explore-Button:hover .telescope {\n transform: rotate(-35deg);\n}\n"},{"created":"2024-01-22T16:59:54.000Z","isPrivate":0,"projectId":"87b23e","snapshot":null,"tags":null,"title":"button by sohoning","updated":"2024-01-22T16:59:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4058,"cssLen":830,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button_01 {\n position: relative;\n font-family: 'Comic Sans MS', cursive;\n padding-top: 20px;\n padding-bottom: 20px;\n padding-left: 20px;\n padding-right: 70px;\n outline: none;\n border: none;\n background-color: #DEB887;\n border-radius: 1em;\n color: whitesmoke;\n font-size: 25px;\n box-shadow: 0 0 10px #DEB887;\n overflow: hidden;\n cursor: pointer;\n}\n\n.button_01 a {\n position: relative;\n z-index: 2;\n}\n\n.tree {\n position: absolute;\n display: block;\n right: -20px;\n width: 60%;\n height: 80%;\n bottom: -5px;\n transition-duration: 0.75s;\n z-index: 1;\n}\n\n.wave {\n position: absolute;\n display: block;\n top: -100%;\n left: 0%;\n z-index: 1;\n transition-duration: 0.5s;\n}\n\n.button_01:hover {\n box-shadow: 0 0 10px #0693e3;\n}\n\n.button_01:hover .tree {\n bottom: -100%;\n}\n\n.button_01:hover .wave {\n top: 0%;\n}"},{"created":"2024-01-22T16:59:54.000Z","isPrivate":0,"projectId":"4dd9ac","snapshot":null,"tags":null,"title":"button by Peary74","updated":"2024-01-22T16:59:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3002,"cssLen":2591,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n\n","css":"button {\n background: linear-gradient(45deg, transparent 27%, #fd1853 5%, #fd1853 73%, transparent 27%);\n box-shadow: 6px 0px 0px #00e6f6;\n position: relative;\n padding: 12px 35px;\n font-size: 20px;\n font-weight: 500;\n color: white;\n border: 3px solid #00e6f6;\n border-radius: 8px;\n box-shadow: 0 0 0 #fec1958c;\n transition: all .3s ease-in-out;\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 #fd1853);\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 #fd1853);\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 #fd1853);\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 #fd1853);\n z-index: -5;\n transition: all .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 #fd1853);\n z-index: -5;\n transition: all .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 #fd1853);\n z-index: -5;\n transition: all .8s ease;\n}\n\nbutton:hover {\n background: transparent;\n color: #00e6f6;\n box-shadow: 0 0 50px #fd1853;\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 #fd1853);\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 #fd1853);\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 #fd1853);\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 #fd1853);\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 #fd1853);\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 #fd1853);\n z-index: 2;\n}\n\n.fil0 {\n fill: #fd1853\n}"},{"created":"2024-01-22T16:59:54.000Z","isPrivate":0,"projectId":"6fd7fc","snapshot":null,"tags":null,"title":"button by PriyanshuGupta28","updated":"2024-01-22T16:59:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":38,"cssLen":771,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn {\n display: inline-block;\n padding: 10px 20px;\n border: 2px solid #4a5568;\n background-color: #4a5568;\n color: #fff;\n font-size: 20px;\n font-weight: bold;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n transition: all 0.3s ease-in-out;\n}\n\n.btn::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n background-color: #fff;\n opacity: 0.2;\n border-radius: 50%;\n transform: translate(-50%, -50%);\n transition: all 0.3s ease-in-out;\n}\n\n.btn:hover {\n background-color: #fff;\n color: #4a5568;\n box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;\n}\n\n.btn:hover::before {\n width: 200%;\n height: 200%;\n}\n"},{"created":"2024-01-22T16:59:54.000Z","isPrivate":0,"projectId":"6f527c","snapshot":null,"tags":null,"title":"button by jas19072000","updated":"2024-01-22T16:59:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":739,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n align-items: center;\n background-color: transparent;\n color: #fff;\n cursor: pointer;\n display: flex;\n font-family: ui-sans-serif,system-ui,-apple-system,system-ui,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5;\n text-decoration: none;\n text-transform: uppercase;\n outline: 0;\n border: 0;\n padding: 1rem;\n}\n\nbutton:before {\n background-color: rgb(213, 39, 39);\n content: \"\";\n display: inline-block;\n height: 1px;\n margin-right: 10px;\n transition: all .42s cubic-bezier(.25,.8,.25,1);\n width: 0;\n}\n\nbutton:hover:before {\n background-color: #fff;\n width: 3rem;\n}"},{"created":"2024-01-22T16:59:54.000Z","isPrivate":0,"projectId":"8657fb","snapshot":null,"tags":null,"title":"button by Tsiangana","updated":"2024-01-22T16:59:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":749,"cssLen":1214,"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 align-items: center;\n justify-content: flex-start;\n width: 45px;\n height: 45px;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n transition-duration: 0.3s;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);\n background: rgb(255, 135, 65);\n background: linear-gradient(\n 250deg,\n rgba(255, 135, 65, 1) 15%,\n rgba(255, 65, 65, 1) 65%\n );\n}\n\n/* plus sign */\n.sign {\n width: 100%;\n transition-duration: 0.3s;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.sign svg {\n width: 17px;\n}\n\n.sign svg path {\n fill: white;\n}\n/* text */\n.text {\n position: absolute;\n right: 0%;\n width: 0%;\n opacity: 0;\n color: white;\n font-size: 1.2em;\n font-weight: 600;\n transition-duration: 0.3s;\n}\n/* hover effect on button width */\n.Btn:hover {\n width: 125px;\n border-radius: 40px;\n transition-duration: 0.3s;\n}\n\n.Btn:hover .sign {\n width: 30%;\n transition-duration: 0.3s;\n padding-left: 20px;\n}\n/* hover effect button's text */\n.Btn:hover .text {\n opacity: 1;\n width: 70%;\n transition-duration: 0.3s;\n padding-right: 10px;\n}\n/* button click effect*/\n.Btn:active {\n transform: translate(2px, 2px);\n}\n"},{"created":"2024-01-22T16:59:54.000Z","isPrivate":0,"projectId":"7a1bd9","snapshot":null,"tags":null,"title":"button by Juanes200122","updated":"2024-01-22T16:59:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":810,"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 #009dff;\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: #009dff;\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: #009dff;\n z-index: -1;\n}\n\nbutton:hover, button:focus {\n color: rgb(0, 0, 0);\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:54.000Z","isPrivate":0,"projectId":"d74896","snapshot":null,"tags":null,"title":"button by roroland","updated":"2024-01-22T16:59:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":43,"cssLen":2473,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n --fs: 1.25em;\n --col1: honeydew;\n --col2: rgba(240, 128, 128, 0.603);\n --col3: indianred;\n --col4: maroon;\n --pd: .5em .65em;\n display: grid;\n align-content: baseline;\n appearance: none;\n border: 0;\n grid-template-columns: min-content 1fr;\n padding: var(--pd);\n font-size: var(--fs);\n color: var(--col1);\n background-color: var(--col3);\n border-radius: 6px;\n text-shadow: 1px 1px var(--col4);\n box-shadow: inset -2px 1px 1px var(--col2),\n inset 2px 1px 1px var(--col2);\n position: relative;\n transition: all .75s ease-out;\n transform-origin: center;\n}\n\nbutton:hover {\n color: var(--col4);\n box-shadow: inset -2px 1px 1px var(--col2),\n inset 2px 1px 1px var(--col2),\n inset 0px -2px 20px var(--col4),\n 0px 20px 30px var(--col3),\n 0px -20px 30px var(--col2),\n 1px 2px 20px var(--col4);\n text-shadow: 1px 1px var(--col2);\n}\n\nbutton:active {\n animation: offset 1s ease-in-out infinite;\n outline: 2px solid var(--col2);\n outline-offset: 0;\n}\n\nbutton::after,\nbutton::before {\n content: '';\n align-self: center;\n justify-self: center;\n height: .5em;\n margin: 0 .5em;\n grid-column: 1;\n grid-row: 1;\n opacity: 1;\n}\n\nbutton::after {\n position: relative;\n border: 2px solid var(--col4);\n border-radius: 50%;\n transition: all .5s ease-out;\n height: .1em;\n width: .1em;\n}\n\nbutton:hover::after {\n border: 2px solid var(--col3);\n transform: rotate(-120deg) translate(10%, 140%);\n}\n\nbutton::before {\n border-radius: 50% 0%;\n border: 4px solid var(--col4);\n box-shadow: inset 1px 1px var(--col2);\n transition: all 1s ease-out;\n transform: rotate(45deg);\n height: .45em;\n width: .45em;\n}\n\nbutton:hover::before {\n border-radius: 50%;\n border: 4px solid var(--col1);\n transform: scale(1.25) rotate(0deg);\n animation: blink 1.5s ease-out 1s infinite alternate;\n}\n\nbutton:hover > span {\n filter: contrast(150%);\n}\n\n@keyframes blink {\n 0% {\n transform: scale(1, 1) skewX(0deg);\n opacity: 1;\n }\n\n 5% {\n transform: scale(1.5, .1) skewX(10deg);\n opacity: .5;\n }\n\n 10%,\n 35% {\n transform: scale(1, 1) skewX(0deg);\n opacity: 1;\n }\n\n 40% {\n transform: scale(1.5, .1) skewX(10deg);\n opacity: .25;\n }\n\n 45%,\n 100% {\n transform: scale(1, 1) skewX(0deg);\n opacity: 1;\n }\n}\n\n@keyframes offset {\n 50% {\n outline-offset: .15em;\n outline-color: var(--col1);\n }\n\n 55% {\n outline-offset: .1em;\n transform: translateY(1px);\n }\n\n 80%,\n 100% {\n outline-offset: 0;\n }\n}"},{"created":"2024-01-22T16:59:54.000Z","isPrivate":0,"projectId":"d5f0ab","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T16:59:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":557,"cssLen":573,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".cssbuttons-io-button {\n display: flex;\n align-items: center;\n font-family: inherit;\n font-weight: 500;\n font-size: 17px;\n padding: 0.8em 1.5em 0.8em 1.2em;\n color: white;\n background: #ff7d00;\n background: linear-gradient(0deg, rgba(255, 125, 0, 1) 0%, rgba(255, 95, 109, 1) 100%);\n border: 2px solid #ff7d00;\n border-radius: 20em;\n}\n\n.cssbuttons-io-button svg {\n margin-right: 8px;\n}\n\n.cssbuttons-io-button:hover {\n border-color: white;\n box-shadow: 0 0.5em 1.5em -0.5em #bf5800;\n}\n\n.cssbuttons-io-button:active {\n box-shadow: 0 0.3em 1em -0.5em #bf5800;\n}"},{"created":"2024-01-22T16:59:54.000Z","isPrivate":0,"projectId":"b2ffc5","snapshot":null,"tags":null,"title":"button by Li-Deheng","updated":"2024-01-22T16:59:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":617,"cssLen":3390,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"#btn-message {\n --text-color: #000;\n --bg-color-sup: #d2d2d2;\n --bg-color: #f4f4f4;\n --bg-hover-color: #ffffff;\n --online-status: #00da00;\n --font-size: 16px;\n --btn-transition: all 0.2s ease-out;\n}\n\n.button-message {\n display: flex;\n justify-content: center;\n align-items: center;\n font: 400 var(--font-size) Helvetica Neue, sans-serif;\n box-shadow: 0 0 2.17382px rgba(0,0,0,.049),0 1.75px 6.01034px rgba(0,0,0,.07),0 3.63px 14.4706px rgba(0,0,0,.091),0 22px 48px rgba(0,0,0,.14);\n background-color: var(--bg-color);\n border-radius: 68px;\n cursor: pointer;\n padding: 6px 10px 6px 6px;\n width: fit-content;\n height: 40px;\n border: 0;\n overflow: hidden;\n position: relative;\n transition: var(--btn-transition);\n}\n\n.button-message:hover {\n height: 56px;\n padding: 8px 20px 8px 8px;\n background-color: var(--bg-hover-color);\n transition: var(--btn-transition);\n}\n\n.button-message:active {\n transform: scale(0.99);\n}\n\n.content-avatar {\n width: 30px;\n height: 30px;\n margin: 0;\n transition: var(--btn-transition);\n position: relative;\n}\n\n.button-message:hover .content-avatar {\n width: 40px;\n height: 40px;\n}\n\n.avatar {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n overflow: hidden;\n background-color: var(--bg-color-sup);\n}\n\n.user-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.status-user {\n position: absolute;\n width: 6px;\n height: 6px;\n right: 1px;\n bottom: 1px;\n border-radius: 50%;\n outline: solid 2px var(--bg-color);\n background-color: var(--online-status);\n transition: var(--btn-transition);\n animation: active-status 2s ease-in-out infinite;\n}\n\n.button-message:hover .status-user {\n width: 10px;\n height: 10px;\n right: 1px;\n bottom: 1px;\n outline: solid 3px var(--bg-hover-color);\n}\n\n.notice-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n padding-left: 8px;\n text-align: initial;\n color: var(--text-color);\n}\n\n.username {\n letter-spacing: -6px;\n height: 0;\n opacity: 0;\n transform: translateY(-20px);\n transition: var(--btn-transition);\n}\n\n.user-id {\n font-size: 12px;\n letter-spacing: -6px;\n height: 0;\n opacity: 0;\n transform: translateY(10px);\n transition: var(--btn-transition);\n}\n\n.lable-message {\n display: flex;\n align-items: center;\n opacity: 1;\n transform: scaleY(1);\n transition: var(--btn-transition);\n}\n\n.button-message:hover .username {\n height: auto;\n letter-spacing: normal;\n opacity: 1;\n transform: translateY(0);\n transition: var(--btn-transition);\n}\n\n.button-message:hover .user-id {\n height: auto;\n letter-spacing: normal;\n opacity: 1;\n transform: translateY(0);\n transition: var(--btn-transition);\n}\n\n.button-message:hover .lable-message {\n height: 0;\n transform: scaleY(0);\n transition: var(--btn-transition);\n}\n\n.lable-message, .username {\n font-weight: 600;\n}\n\n.number-message {\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n margin-left: 8px;\n font-size: 12px;\n width: 16px;\n height: 16px;\n background-color: var(--bg-color-sup);\n border-radius: 20px;\n}\n\n/*==============================================*/\n@keyframes active-status {\n 0% {\n background-color: var(--online-status);\n }\n\n 33.33% {\n background-color: #93e200;\n }\n\n 66.33% {\n background-color: #93e200;\n }\n\n 100% {\n background-color: var(--online-status);\n }\n}"}]}},"actionData":null,"errors":null}