{"loaderData":{"0":null,"0-2":{"total":7067,"projects":[{"created":"2024-01-22T17:00:38.000Z","isPrivate":0,"projectId":"4a01fe","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2048,"cssLen":1243,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" ","css":".Btn {\n position: relative;\n width: 180px;\n height: 50px;\n border: none;\n background-color: #005f99;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n border-radius: 30px;\n cursor: pointer;\n box-shadow: 8px 8px 0px rgb(12, 12, 12);\n transition-duration: .3s;\n}\n\n.Layer {\n width: 60px;\n position: absolute;\n left: -30px;\n transition-duration: .3s;\n animation: spin 5s linear infinite;\n}\n\n.Btn:hover {\n transform: translateY(5px);\n box-shadow: 3px 3px 0px black;\n transition-duration: .3s;\n}\n\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n.Btn:hover .Layer {\n left: 0%;\n width: 100%;\n transition-duration: .3s;\n}\n\n.text {\n color: white;\n font-weight: 600;\n font-size: 1.1em;\n position: absolute;\n z-index: 2;\n transition-duration: .1s;\n font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;\n}\n\n.Btn:hover .text {\n color: transparent;\n transition-duration: .3s;\n}\n/* svg colors */\n.cls-1 {\n fill: #242021;\n}\n\n.cls-2 {\n fill: #e82728;\n}\n\n.cls-3 {\n fill: #fefefe;\n}\n\n.cls-4 {\n fill: #e92728;\n}\n\n.cls-5 {\n fill: #005f99;\n}\n\n.cls-6 {\n fill: #fff;\n}\n/* svg colors */"},{"created":"2024-01-22T17:00:38.000Z","isPrivate":0,"projectId":"6f307e","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":458,"cssLen":989,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n width: 50px;\n height: 50px;\n border: none;\n border-radius: 50%;\n background-color: rgb(32, 32, 32);\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5) inset;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n cursor: pointer;\n}\n\n.svgIcon {\n z-index: 2;\n}\n\n.button::before {\n width: 35px;\n height: 22px;\n background: linear-gradient(to bottom,rgba(255, 255, 255, 0.575), rgba(0, 0, 0, 0.103));\n position: absolute;\n content: \"\";\n top: 3.6px;\n border-radius: 50%;\n z-index: 1;\n}\n\n.tooltip {\n position: absolute;\n top: -40px;\n opacity: 0;\n background-color: rgb(134, 134, 134);\n color: white;\n padding: 5px 10px;\n border-radius: 5px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition-duration: .5s;\n pointer-events: none;\n letter-spacing: 0.5px;\n}\n\n.button:hover .tooltip {\n opacity: 1;\n transition-duration: .5s;\n}\n\n.button:hover {\n background-position: right;\n transition-duration: 1s;\n}"},{"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"}]}},"actionData":null,"errors":null}