{"loaderData":{"0":null,"0-3":{"total":7296,"projects":[{"created":"2024-01-22T17:00:38.000Z","isPrivate":0,"projectId":"357d21","snapshot":null,"tags":null,"title":"button by kennyotsu-monochromia","updated":"2024-01-22T17:00:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":115,"cssLen":1275,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n --black: #000000;\n --ch-black: #141414;\n --eer-black: #1b1b1b;\n --night-rider: #2e2e2e;\n --white: #ffffff;\n --af-white: #f3f3f3;\n --ch-white: #e1e1e1;\n position: relative;\n padding: 24px 64px;\n border-radius: 5px;\n color: var(--night-rider);\n font-weight: 600;\n font-size: 1rem;\n letter-spacing: 0px;\n background-color: var(--white);\n border: solid 1px var(--ch-white);\n overflow: hidden;\n cursor: pointer;\n transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);\n box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);\n font-family: Montserrat;\n}\n\n.button .button-text {\n position: relative;\n z-index: 2;\n}\n\n.button .fill-container {\n position: absolute;\n left: 0;\n top: 50%;\n width: 100%;\n padding-bottom: 100%;\n transform: translateY(-50%) rotate(180deg);\n}\n\n.button .fill-container::after {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: var(--af-white);\n border-radius: 50px;\n transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);\n transform: translateY(-100%);\n}\n\n.button:hover {\n transform: translateY(-4px);\n color: var(--black);\n}\n\n.button:hover .fill-container {\n transform: translateY(-50%) rotate(0);\n}\n\n.button:hover .fill-container::after {\n transform: translateY(0);\n}"},{"created":"2024-01-22T17:00:38.000Z","isPrivate":0,"projectId":"45f60c","snapshot":null,"tags":null,"title":"button by rraushan1205","updated":"2024-01-22T17:00:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":185,"cssLen":988,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"/* === removing default button style ===*/\n.button {\n margin: 0;\n height: auto;\n background: transparent;\n padding: 0;\n border: none;\n}\n\n/* button styling */\n.button {\n --border-right: 6px;\n --text-stroke-color: rgba(255,255,255,0.6);\n --animation-color: #999999;\n --fs-size: 2em;\n letter-spacing: 3px;\n text-decoration: none;\n font-size: var(--fs-size);\n font-family: \"Arial\";\n position: relative;\n text-transform: uppercase;\n color: transparent;\n -webkit-text-stroke: 1px var(--text-stroke-color);\n}\n/* this is the text, when you hover on button */\n.hover-text {\n position: absolute;\n box-sizing: border-box;\n content: attr(data-text);\n color: var(--animation-color);\n width: 0%;\n inset: 0;\n border-right: var(--border-right) solid var(--animation-color);\n overflow: hidden;\n transition: 0.5s;\n -webkit-text-stroke: 1px var(--animation-color);\n}\n/* hover */\n.button:hover .hover-text {\n width: 100%;\n filter: drop-shadow(0 5px 23px var(--animation-color))\n}"},{"created":"2024-01-22T17:00:38.000Z","isPrivate":0,"projectId":"8ad2c9","snapshot":null,"tags":null,"title":"button by JesusRafaelNavaCruz","updated":"2024-01-22T17:00:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":102,"cssLen":665,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".content {\n position: relative;\n}\n\n.content .text {\n color: #fff;\n font-size: 3rem;\n position: absolute;\n transform: translate(-50%, -50%);\n}\n\n.content .text:nth-child(1) {\n color: transparent;\n -webkit-text-stroke: 2px #8338ec;\n}\n\n.content .text:nth-child(2) {\n color: #c19bf5;\n animation: animate 4s ease-in-out infinite;\n}\n\n@keyframes animate {\n 0%,\n\t100% {\n clip-path: polygon(\n\t\t\t0% 45%,\n\t\t\t16% 44%,\n\t\t\t33% 50%,\n\t\t\t54% 60%,\n\t\t\t70% 61%,\n\t\t\t84% 59%,\n\t\t\t100% 52%,\n\t\t\t100% 100%,\n\t\t\t0% 100%\n\t\t);\n }\n\n 50% {\n clip-path: polygon(\n\t\t\t0% 60%,\n\t\t\t15% 65%,\n\t\t\t34% 66%,\n\t\t\t51% 62%,\n\t\t\t67% 50%,\n\t\t\t84% 45%,\n\t\t\t100% 46%,\n\t\t\t100% 100%,\n\t\t\t0% 100%\n\t\t);\n }\n}"},{"created":"2024-01-22T17:00:38.000Z","isPrivate":0,"projectId":"a4de8e","snapshot":null,"tags":null,"title":"button by LilaRest","updated":"2024-01-22T17:00:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":888,"cssLen":1189,"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\n.filled,\n.empty {\n fill: rgb(255, 110, 110);\n transition: opacity 100ms ease-in-out;\n}\n\n.filled {\n position: absolute;\n opacity: 0;\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 .empty {\n opacity: 0;\n}\n\nbutton:hover .filled {\n opacity: 1;\n animation: beatingHeart 1.2s infinite;\n}"},{"created":"2024-01-22T17:00:38.000Z","isPrivate":0,"projectId":"3b3bb2","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":637,"cssLen":1034,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n width: 140px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n background: linear-gradient(to left,rgb(173, 154, 255),rgb(149, 110, 255));\n border-radius: 30px;\n color: rgb(255, 255, 255);\n font-weight: 600;\n border: none;\n position: relative;\n cursor: pointer;\n transition-duration: .2s;\n box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.116);\n}\n\n.bell {\n width: 13px;\n}\n\n.bell path {\n fill: rgb(255, 255, 255);\n}\n\n.button:hover {\n background: linear-gradient(to left,rgb(154, 131, 255),rgb(135, 91, 255));\n}\n\n.button:active {\n transform: scale(0.97);\n transition-duration: .2s;\n}\n\n.button:hover .bell {\n animation: bellRing 0.9s both;\n}\n\n/* bell ringing animation keyframes*/\n@keyframes bellRing {\n 0%,\n 100% {\n transform-origin: top;\n }\n\n 15% {\n transform: rotateZ(10deg);\n }\n\n 30% {\n transform: rotateZ(-10deg);\n }\n\n 45% {\n transform: rotateZ(5deg);\n }\n\n 60% {\n transform: rotateZ(-5deg);\n }\n\n 75% {\n transform: rotateZ(2deg);\n }\n}\n"},{"created":"2024-01-22T17:00:38.000Z","isPrivate":0,"projectId":"644f9a","snapshot":null,"tags":null,"title":"button by Juanes200122","updated":"2024-01-22T17:00:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":52,"cssLen":689,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"Izquierda\n","css":"a {\n text-decoration: none;\n}\n\n.ov-btn-slide-left {\n background: #fff;\n color: #4741d7;\n border: 2px solid #4741d7;\n padding: 16px 20px;\n border-radius: 3px;\n position: relative;\n z-index: 1;\n overflow: hidden;\n display: inline-block;\n}\n\n.ov-btn-slide-left:hover {\n color: #fff;\n}\n\n.ov-btn-slide-left::after {\n content: \"\";\n background: #4741d7;\n position: absolute;\n z-index: -1;\n padding: 16px 20px;\n display: block;\n top: 0;\n bottom: 0;\n left: -100%;\n right: 100%;\n -webkit-transition: all 0.35s;\n transition: all 0.35s;\n}\n\n.ov-btn-slide-left:hover::after {\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n -webkit-transition: all 0.35s;\n transition: all 0.35s;\n}"},{"created":"2024-01-22T17:00:38.000Z","isPrivate":0,"projectId":"d81ccc","snapshot":null,"tags":null,"title":"button by barisdogansutcu","updated":"2024-01-22T17:00:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":613,"cssLen":1164,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n B\n \n\n \n \n i\n \n\n

\n","css":".button-options .content {\n display: flex;\n align-items: center;\n justify-content: center;\n border: solid 2px #29429b;\n border-radius: 4px;\n position: relative;\n}\n.button-options .content .label-layout {\n min-width: 45px;\n height: 45px;\n display: flexa;\n align-items: center;\n justify-content: center;\n}\n.button-options .content .label-layout :is(b, i, u) {\n display: grid;\n place-content: center;\n height: 100%;\n color: #29429b;\n font-size: 17px;\n line-height: 1;\n cursor: pointer;\n}\n.button-options .content .label-layout[for=\"italicInput\"] {\n border-left: solid 2px #29429b;\n border-right: solid 2px #29429b;\n min-width: 49px;\n}\n.button-options .content input[type=\"checkbox\"]:checked + .label-layout {\n background-color: #29429b34;\n}\n#boldInput:checked ~ .title {\n font-weight: bold;\n}\n#italicInput:checked ~ .title {\n font-style: italic;\n}\n#underlineInput:checked ~ .title {\n text-decoration: underline;\n}\n.button-options .title {\n font-size: 13px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 5px;\n position: absolute;\n bottom: 0;\n top: 2px;\n transform: translateY(100%);\n color: #29429b;\n}\n"},{"created":"2024-01-22T17:00:38.000Z","isPrivate":0,"projectId":"d2d2a9","snapshot":null,"tags":null,"title":"button by kennyotsu-monochromia","updated":"2024-01-22T17:00:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":599,"cssLen":1287,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n\n","css":".Btn {\n --black: #000000;\n --ch-black: #141414;\n --eer-black: #1b1b1b;\n --night-rider: #2e2e2e;\n --white: #ffffff;\n --af-white: #f3f3f3;\n --ch-white: #e1e1e1;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: 45px;\n height: 45px;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n transition-duration: .3s;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);\n background-color: var(--af-white);\n}\n\n/* plus sign */\n.sign {\n width: 100%;\n transition-duration: .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: var(--night-rider);\n}\n/* text */\n.text {\n position: absolute;\n right: 0%;\n width: 0%;\n opacity: 0;\n color: var(--night-rider);\n font-size: 1.2em;\n font-weight: 600;\n transition-duration: .3s;\n}\n/* hover effect on button width */\n.Btn:hover {\n width: 125px;\n border-radius: 5px;\n transition-duration: .3s;\n}\n\n.Btn:hover .sign {\n width: 30%;\n transition-duration: .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: .3s;\n padding-right: 10px;\n}\n/* button click effect*/\n.Btn:active {\n transform: translate(2px ,2px);\n}"},{"created":"2024-01-22T17:00:38.000Z","isPrivate":0,"projectId":"435575","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":257,"cssLen":2301,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n --sunGradient: linear-gradient(\n 60deg,\n #3d3393 0%,\n #2b76b9 37%,\n #2cacd1 65%,\n #35eb93 100%\n );\n --moonGradient: linear-gradient(to top, #cc208e 0%, #6713d2 100%);\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n width: 140px;\n height: 60px;\n color: white;\n font-size: 1em;\n font-weight: bold;\n text-transform: uppercase;\n border-radius: 15px;\n background-color: transparent;\n transition: 0.5s;\n overflow: hidden;\n border: none;\n cursor: pointer;\n}\n\nbutton:hover {\n box-shadow: -15px -15px 500px white;\n transition: 0.2s;\n}\n\nbutton:hover span {\n background: var(--sunGradient);\n}\n\n.state {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: 0.4s;\n border-radius: inherit;\n width: 100%;\n height: 100%;\n border: 1px solid white;\n}\n\n#sun {\n display: none;\n background-color: #212121;\n opacity: 0.85;\n}\n\n#moon {\n background-color: #212121;\n opacity: 0.85;\n}\n\nbutton:hover #sun {\n display: flex;\n}\n\nbutton:hover #moon {\n display: none;\n}\n\nbutton:hover .lightRotation {\n animation: 1s linear reverse infinite rotation413;\n}\n\nbutton:hover .lightRotation2 {\n animation: 2s linear infinite rotation_413;\n}\n\nbutton:hover .lightRotation3 {\n animation: 10s linear reverse infinite rotation_413;\n}\n\nbutton:hover .lightRotation4 {\n animation: 3s linear infinite rotation_413;\n}\n\n.lightRotation {\n position: absolute;\n transition: 0.4s;\n z-index: -1;\n width: 60px;\n height: 500px;\n transform: rotate(50deg);\n border-radius: inherit;\n background: var(--moonGradient);\n}\n\n.lightRotation2 {\n position: absolute;\n transition: 0.4s;\n z-index: -1;\n width: 75px;\n height: 500px;\n transform: rotate(110deg);\n border-radius: inherit;\n background: var(--moonGradient);\n}\n\n.lightRotation3 {\n position: absolute;\n transition: 0.4s;\n z-index: -1;\n width: 40px;\n height: 260px;\n border-radius: inherit;\n background: var(--moonGradient);\n}\n\n.lightRotation4 {\n position: absolute;\n transition: 0.4s;\n z-index: -1;\n width: 24px;\n height: 220px;\n transform: rotate(100deg);\n border-radius: inherit;\n background: var(--moonGradient);\n}\n\n@keyframes rotation_413 {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n"},{"created":"2024-01-22T17:00:38.000Z","isPrivate":0,"projectId":"6126ac","snapshot":null,"tags":null,"title":"button by csemszepp","updated":"2024-01-22T17:00:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":86,"cssLen":2163,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\t

\n\t\t

\n\t

\t\n","css":".container {\n width: 1000px;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-around;\n}\n\n.container .btn {\n position: relative;\n top: 0;\n left: 0;\n width: 250px;\n height: 50px;\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.container .btn a {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n background: rgba(255, 255, 255, 0.05);\n box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 30px;\n padding: 10px;\n letter-spacing: 1px;\n text-decoration: none;\n overflow: hidden;\n color: #fff;\n font-weight: 400px;\n z-index: 1;\n transition: 0.5s;\n backdrop-filter: blur(15px);\n}\n\n.container .btn:hover a {\n letter-spacing: 3px;\n}\n\n.container .btn a::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 50%;\n height: 100%;\n background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);\n transform: skewX(45deg) translate(0);\n transition: 0.5s;\n filter: blur(0px);\n}\n\n.container .btn:hover a::before {\n transform: skewX(45deg) translate(200px);\n}\n\n.container .btn::before {\n content: \"\";\n position: absolute;\n left: 50%;\n transform: translatex(-50%);\n bottom: -5px;\n width: 30px;\n height: 10px;\n background: #f00;\n border-radius: 10px;\n transition: 0.5s;\n transition-delay: 0.5;\n}\n\n.container .btn:hover::before /*lightup button*/ {\n bottom: 0;\n height: 50%;\n width: 80%;\n border-radius: 30px;\n}\n\n.container .btn::after {\n content: \"\";\n position: absolute;\n left: 50%;\n transform: translatex(-50%);\n top: -5px;\n width: 30px;\n height: 10px;\n background: #f00;\n border-radius: 10px;\n transition: 0.5s;\n transition-delay: 0.5;\n}\n\n.container .btn:hover::after /*lightup button*/ {\n top: 0;\n height: 50%;\n width: 80%;\n border-radius: 30px;\n}\n\n.container .btn:nth-child(1)::before,\n.container .btn:nth-child(1)::after {\n background: #ff1f71;\n box-shadow: 0 0 5px #ff1f71, 0 0 15px #ff1f71, 0 0 30px #ff1f71,\n\t\t0 0 60px #ff1f71;\n}\n"},{"created":"2024-01-22T17:00:38.000Z","isPrivate":0,"projectId":"7ce654","snapshot":null,"tags":null,"title":"button by Li-Deheng","updated":"2024-01-22T17:00:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":617,"cssLen":3404,"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: rgb(255, 255, 255);\n --bg-color-sup: #5e5e5e;\n --bg-color: #2b2b2b;\n --bg-hover-color: #161616;\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}"},{"created":"2024-01-22T17:00:38.000Z","isPrivate":0,"projectId":"764ca0","snapshot":null,"tags":null,"title":"button by ercnersoy","updated":"2024-01-22T17:00:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":35,"cssLen":2999,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n padding: 0 20px 0 10px;\n border-radius: 10px;\n box-shadow: 0px 0px 5px 7px #e7413373;\n background-color: #e74133;\n color: white;\n font-size: 17px;\n border: none;\n display: flex;\n align-items: center;\n transition: all .5s ease-in-out;\n letter-spacing: 2px;\n}\n\nbutton:hover {\n background-color: #f54d3e;\n transition: all .5s ease-in-out;\n box-shadow: 0px 0px 5px 3px #e7413373;\n}\n\nbutton::before {\n content: \"\";\n background-image: url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNzUycHQiIGhlaWdodD0iNzUycHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDc1MiA3NTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8cGF0aCBkPSJtMzc2LjMyIDU1Mi4zYy0wLjM4NjcyIDAtMC43ODEyNS0wLjAxNTYyNS0xLjE3MTktMC4wNTA3ODEtMS4wNzgxLTAuMDc0MjE5LTIuMTM2Ny0wLjI2NTYyLTMuMTU2Mi0wLjU0Njg4LTIuNzMwNS0wLjU5Mzc1LTUuMjkzLTEuODUxNi03LjM0MzgtMy43ODEybC0xMzcuNTQtMTI5LjY2Yy00NC40NTMtNDEuOTAyLTQ5LjQ4LTExNS40Ni0xMS4yMTUtMTYzLjk3IDE5LjA4Mi0yNC4xODQgNDUuNzctMzguNjk1IDc1LjE1Mi00MC44NTUgMjguOTMtMi4xMTcyIDU2Ljg2MyA4LjAzMTIgNzguNjggMjguNTk4bDYuMjY1NiA1LjkwMjMgNi4yNjU2LTUuOTAyM2MyMS44MzItMjAuNTcgNDkuODA1LTMwLjY5MSA3OC42OTEtMjguNTk4IDI5LjM4MyAyLjE2NDEgNTYuMDY2IDE2LjY3NiA3NS4xNDUgNDAuODU1IDM4LjI2MiA0OC41MTIgMzMuMjM0IDEyMi4wNy0xMS4yMTUgMTYzLjk3bC0xMzcuNTQgMTI5LjY3Yy0yLjk5MjIgMi44MTY0LTYuOTM3NSA0LjM3NS0xMS4wMjMgNC4zNzV6bS03Ny44MTItMzA3LjAxYy0xLjY5NTMgMC0zLjM5NDUgMC4wNjI1LTUuMTAxNiAwLjE4NzUtMjAuMjgxIDEuNDk2MS0zOC44NTIgMTEuNjkxLTUyLjI4MSAyOC43MTEtMjguMjE1IDM1Ljc3My0yNC42MTMgODkuOTEgOC4wMjczIDEyMC42OGwxMjYuODQgMTE5LjU5IDEyNi44NC0xMTkuNTljMzIuNjQ1LTMwLjc3MyAzNi4yNDYtODQuOTEgOC4wMjczLTEyMC42OC0xMy40MjItMTcuMDItMzEuOTg0LTI3LjIxNS01Mi4yNy0yOC43MTEtMTkuODI4LTEuNDY0OC0zOS4xMDUgNS42MjExLTU0LjI4NSAxOS45MzRsLTE3LjI4NSAxNi4yOTNjLTYuMTk1MyA1LjgzOTgtMTUuODU5IDUuODM5OC0yMi4wNDcgMGwtMTcuMjg1LTE2LjI5M2MtMTMuODcxLTEzLjA3OC0zMS4xNzYtMjAuMTE3LTQ5LjE4LTIwLjExN3oiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==\");\n background-size: 100%;\n background-repeat: no-repeat;\n color: transparent;\n position: relative;\n width: 50px;\n height: 50px;\n display: block;\n margin-right: 5px;\n transition: all .9s ease-in-out;\n}\n\nbutton:hover:before {\n background-image: url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNzUycHQiIGhlaWdodD0iNzUycHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDc1MiA3NTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8cGF0aCBkPSJtMzY5Ljg0IDU1MC4yOGMwLjQ3MjY2IDAuNDcyNjYgMC45NDUzMSAwLjQ3MjY2IDAuOTQ1MzEgMC45NDUzMSA2NS4zNTUtNTEuNjIxIDE5My43LTE0OC4yMyAxOTMuNy0yNDkuMTEgMC01NS44ODMtNDUuNDY1LTEwMS4zNS0xMDEuMzUtMTAxLjM1LTM5Ljc4MSAwLTc0LjM1MiAyMy4yMDctOTAuOTI2IDU2LjgyOC0wLjQ3MjY2IDAuOTQ1MzEtMS40MjE5IDMuMzE2NC0xLjQyMTkgMy4zMTY0cy0wLjk0NTMxLTEuODk0NS0wLjk0NTMxLTIuMzY3MmMtMTYuMTAyLTM0LjA5LTUwLjY3Mi01Ny43Ny05MC45MjYtNTcuNzctNTUuODgzIDAtMTAxLjM1IDQ1LjQ2MS0xMDEuMzUgMTAxLjM0IDAgMTAxLjgyIDEyNy44NyAxOTcuMDEgMTkyLjI3IDI0OC4xNnoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==\");\n transition: all .9s ease-in-out;\n transform: rotate(-1turn);\n}\n\n"}]}},"actionData":null,"errors":null}