{"loaderData":{"0":null,"0-2":{"total":7177,"projects":[{"created":"2024-01-22T17:18:04.000Z","isPrivate":0,"projectId":"fe3dfc","snapshot":null,"tags":null,"title":"radio by Yaya12085","updated":"2024-01-22T17:18:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1733,"cssLen":1330,"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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n

","css":".radio-input {\n background-color: #fff;\n padding: 20px;\n border-radius: 20px;\n display: flex;\n}\n\n.radio-input input[type=radio] {\n display: none;\n}\n\n.radio-input input[type=radio] + label {\n color: #333;\n font-family: Arial, sans-serif;\n font-size: 14px;\n}\n\n.radio-input input[type=radio] + label span {\n display: inline-block;\n width: 40px;\n height: 40px;\n margin: -1px 4px 0 0;\n vertical-align: middle;\n cursor: pointer;\n border-radius: 50%;\n border: 2px solid #FFFFFF;\n box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);\n background-repeat: no-repeat;\n background-position: center;\n text-align: center;\n line-height: 44px;\n}\n\n.radio-input input[type=radio] + label span svg {\n opacity: 0;\n transition: all 0.3s ease;\n}\n\n.radio-input input[type=radio]#color-1 + label span {\n background-color: #2ecc71;\n}\n\n.radio-input input[type=radio]#color-2 + label span {\n background-color: #3498db;\n}\n\n.radio-input input[type=radio]#color-3 + label span {\n background-color: #f1c40f;\n}\n\n.radio-input input[type=radio]:checked + label span svg {\n opacity: 1;\n}\n\n.radio-input:has(input[type=radio]#color-1:checked) {\n background-color: #2ecc71;\n}\n\n.radio-input:has(input[type=radio]#color-2:checked) {\n background-color: #3498db;\n}\n\n.radio-input:has(input[type=radio]#color-3:checked) {\n background-color: #f1c40f;\n}\n"},{"created":"2024-01-22T17:18:04.000Z","isPrivate":0,"projectId":"555109","snapshot":null,"tags":null,"title":"radio by gharsh11032000","updated":"2024-01-22T17:18:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":750,"cssLen":1097,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n React\n \n

\n \n \n \n Angular\n \n

\n \n \n \n Vue\n \n

","css":".radio-button-container {\n display: flex;\n align-items: center;\n gap: 24px;\n}\n\n.radio-button {\n display: inline-block;\n position: relative;\n cursor: pointer;\n}\n\n.radio-button__input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.radio-button__label {\n display: inline-block;\n padding-left: 30px;\n margin-bottom: 10px;\n position: relative;\n font-size: 15px;\n color: #f2f2f2;\n font-weight: 600;\n cursor: pointer;\n text-transform: uppercase;\n transition: all 0.3s ease;\n}\n\n.radio-button__custom {\n position: absolute;\n top: 0;\n left: 0;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n border: 2px solid #555;\n transition: all 0.3s ease;\n}\n\n.radio-button__input:checked + .radio-button__label .radio-button__custom {\n background-color: #4c8bf5;\n border-color: transparent;\n transform: scale(0.8);\n box-shadow: 0 0 20px #4c8bf580;\n}\n\n.radio-button__input:checked + .radio-button__label {\n color: #4c8bf5;\n}\n\n.radio-button__label:hover .radio-button__custom {\n transform: scale(1.2);\n border-color: #4c8bf5;\n box-shadow: 0 0 20px #4c8bf580;\n}\n\n\n\n\n\n"},{"created":"2024-01-22T17:18:04.000Z","isPrivate":0,"projectId":"0c9e3e","snapshot":null,"tags":null,"title":"radio by andrew-demchenk0","updated":"2024-01-22T17:18:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2372,"cssLen":560,"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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n","css":".theme-switcher {\n padding: 3px;\n width: -moz-fit-content;\n width: fit-content;\n display: flex;\n border-radius: 9999px;\n border: 1px solid grey;\n}\n\n.theme-switcher_switch {\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: inherit;\n border: 0;\n background: none;\n cursor: pointer;\n}\n\n.theme-switcher_switch:hover > .icon {\n stroke: #323232;\n}\n\n.theme-switcher_switch:active {\n background-color: rgba(128, 128, 128, 0.35);\n}\n\n.theme-switcher_switch:active > .icon {\n stroke: white;\n}\n"},{"created":"2024-01-22T17:18:04.000Z","isPrivate":0,"projectId":"b132d7","snapshot":null,"tags":null,"title":"radio by andrew-demchenk0","updated":"2024-01-22T17:18:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":551,"cssLen":912,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n Option\n

\n \n

\n Option\n

\n \n

\n Option\n

\n","css":".wrapper {\n --font-color-dark: #fefefe;\n --font-color-light: #111;\n --bg-color: #111;\n --main-color: #fefefe;\n position: relative;\n width: 250px;\n height: 36px;\n background-color: var(--bg-color);\n border: 2px solid var(--main-color);\n border-radius: 34px;\n display: flex;\n flex-direction: row;\n box-shadow: 4px 4px var(--main-color);\n}\n\n.option {\n width: 80.5px;\n height: 28px;\n position: relative;\n top: 2px;\n left: 2px;\n}\n\n.input {\n width: 100%;\n height: 100%;\n position: absolute;\n left: 0;\n top: 0;\n appearance: none;\n cursor: pointer;\n}\n\n.btn {\n width: 100%;\n height: 100%;\n background-color: var(--bg-color);\n border-radius: 50px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.span {\n color: var(--font-color-dark);\n}\n\n.input:checked + .btn {\n background-color: var(--main-color);\n}\n\n.input:checked + .btn .span {\n color: var(--font-color-light);\n}"},{"created":"2024-01-22T17:18:04.000Z","isPrivate":0,"projectId":"62d4a3","snapshot":null,"tags":null,"title":"radio by Ratinax","updated":"2024-01-22T17:18:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":460,"cssLen":1061,"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 \n \n \n \n

","css":".container {\n scale: 0.7;\n}\n\n.fire {\n width: 2em;\n height: 6.5em;\n background-color: black;\n border-radius: 1em;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n}\n\n.label {\n width: 1.5em;\n height: 1.5em;\n border-radius: 50%;\n margin-top: .25em;\n margin-bottom: .25em;\n border-top: .2em solid black;\n cursor: pointer;\n}\n\n.input {\n display: none;\n}\n\n.label.red {\n background-color: #990000;\n box-shadow: 0 0 2em #990000;\n}\n\n.label.orange {\n background-color: #999900;\n box-shadow: 0 0 2em #999900;\n}\n\n.label.green {\n background-color: #009900;\n box-shadow: 0 0 2em #009900;\n}\n\n.label.red:hover {\n background-color: red;\n}\n\n.label.orange:hover {\n background-color: orange;\n}\n\n.label.green:hover {\n background-color: lime;\n}\n\n.label.red:has(input:checked) {\n background-color: red;\n box-shadow: 0 0 2em red;\n}\n\n.label.orange:has(input:checked) {\n background-color: orange;\n box-shadow: 0 0 2em orange;\n}\n\n.label.green:has(input:checked) {\n background-color: lime;\n box-shadow: 0 0 2em lime;\n}"},{"created":"2024-01-22T17:18:04.000Z","isPrivate":0,"projectId":"a32ae4","snapshot":null,"tags":null,"title":"radio by 3bdel3ziz-T","updated":"2024-01-22T17:18:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4703,"cssLen":1027,"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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n","css":"section {\n --col-orange: #d17842;\n --col-dark: #0c0f14;\n --col-darkGray: #52555a;\n --col-gray: #aeaeae;\n\n width: fit-content;\n display: flex;\n align-items: center;\n justify-content: space-evenly;\n background-color: var(--col-dark);\n border-radius: 30px;\n}\n.label {\n padding: 8px 18px;\n transition: all 200ms;\n display: inline-block;\n}\n\n.label input[type=\"radio\"] {\n display: none;\n}\n.label > svg {\n transition: all 200ms;\n fill: var(--col-gray);\n width: 14px;\n}\n.label:hover:not(:has(input:checked)) > svg {\n fill: #d17842;\n opacity: 0.6;\n}\n.label::before {\n content: \"\";\n display: block;\n width: 0%;\n height: 2px;\n border-radius: 5px;\n position: relative;\n left: 50%;\n top: 20px;\n background: var(--col-orange);\n transition: all 200ms;\n}\n.label > svg {\n transition: 300ms;\n fill: var(--col-darkGray);\n margin-top: 0;\n}\n.label:has(input:checked) > svg {\n fill: var(--col-orange);\n scale: 1.2;\n margin-top: -5px;\n}\n\n.label:has(input:checked)::before {\n width: 100%;\n left: 0;\n top: 25px;\n}\n"},{"created":"2024-01-22T17:18:04.000Z","isPrivate":0,"projectId":"6b7100","snapshot":null,"tags":null,"title":"radio by HARIPRASAD-2003","updated":"2024-01-22T17:18:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":7039,"cssLen":759,"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":".input {\n display: flex;\n flex-direction: column;\n width: 200px;\n background-color: #0d1117;\n justify-content: center;\n border-radius: 5px;\n}\n\n.value {\n background-color: transparent;\n border: none;\n padding: 10px;\n color: white;\n display: flex;\n position: relative;\n gap: 5px;\n cursor: pointer;\n border-radius: 4px;\n}\n\n.value:not(:active):hover,\n.value:focus {\n background-color: #21262c;\n}\n\n.value:focus,\n.value:active {\n background-color: #1a1f24;\n outline: none;\n}\n\n.value::before {\n content: \"\";\n position: absolute;\n top: 5px;\n left: -10px;\n width: 5px;\n height: 80%;\n background-color: #2f81f7;\n border-radius: 5px;\n opacity: 0;\n}\n\n.value:focus::before,\n.value:active::before {\n opacity: 1;\n}\n\n.value svg {\n width: 15px;\n}\n"},{"created":"2024-01-22T17:18:04.000Z","isPrivate":0,"projectId":"d5b90f","snapshot":null,"tags":null,"title":"radio by Pradeepsaranbishnoi","updated":"2024-01-22T17:18:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":293,"cssLen":2452,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".form {\n --background: #ffffff;\n --text: #414856;\n --radio: #7C96B2;\n --radio-checked: #4F29F0;\n --radio-size: 20px;\n --width: 150px;\n --height: 140px;\n --border-radius: 10px;\n background: var(--background);\n width: var(--width);\n height: var(--height);\n border-radius: var(--border-radius);\n color: var(--text);\n position: relative;\n box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);\n padding: 30px 20px;\n display: grid;\n grid-template-columns: auto var(--radio-size);\n align-items: center;\n}\n\n.form label {\n cursor: pointer;\n}\n\n.form input[type=\"radio\"] {\n -webkit-appearance: none;\n -moz-appearance: none;\n position: relative;\n height: var(--radio-size);\n width: var(--radio-size);\n outline: none;\n margin: 0;\n cursor: pointer;\n border: 2px solid var(--radio);\n background: transparent;\n border-radius: 50%;\n display: grid;\n justify-self: end;\n justify-items: center;\n align-items: center;\n overflow: hidden;\n transition: border .5s ease;\n}\n\n.form input[type=\"radio\"]::before, .form input[type=\"radio\"]::after {\n content: \"\";\n display: flex;\n justify-self: center;\n border-radius: 50%;\n}\n\n.form input[type=\"radio\"]::before {\n position: absolute;\n width: 100%;\n height: 100%;\n background: var(--background);\n z-index: 1;\n opacity: var(--opacity, 1);\n}\n\n.form input[type=\"radio\"]::after {\n position: relative;\n width: calc(100% /2);\n height: calc(100% /2);\n background: var(--radio-checked);\n top: var(--y, 100%);\n transition: top 0.5s cubic-bezier(0.48, 1.97, 0.5, 0.63);\n}\n\n.form input[type=\"radio\"]:checked {\n --radio: var(--radio-checked);\n}\n\n.form input[type=\"radio\"]:checked::after {\n --y: 0%;\n animation: stretch-animate .3s ease-out .17s;\n}\n\n.form input[type=\"radio\"]:checked::before {\n --opacity: 0;\n}\n\n.form input[type=\"radio\"]:checked ~ input[type=\"radio\"]::after {\n --y: -100%;\n}\n\n.form input[type=\"radio\"]:not(:checked)::before {\n --opacity: 1;\n transition: opacity 0s linear .5s;\n}\n\n@keyframes stretch-animate {\n 0% {\n transform: scale(1, 1);\n }\n\n 28% {\n transform: scale(1.15, 0.85);\n }\n\n 50% {\n transform: scale(0.9, 1.1);\n }\n\n 100% {\n transform: scale(1, 1);\n }\n}\n\n.socials {\n position: fixed;\n display: block;\n left: 20px;\n bottom: 20px;\n}\n\n.socials > a {\n display: block;\n width: 30px;\n opacity: .2;\n transform: scale(var(--scale, 0.8));\n transition: transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);\n}\n\n.socials > a:hover {\n --scale: 1;\n}\n"},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"3a7f63","snapshot":null,"tags":null,"title":"radio by Pradeepsaranbishnoi","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":264,"cssLen":2129,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Click\n Me\n to\n And so on ..\n

\n","css":".container {\n --s: 1em; /* control the size */\n --g: 10px; /* the gap */\n --c: #009688; /* the active color */\n\n display: grid;\n grid-auto-rows: 1fr;\n gap: var(--g);\n position: relative;\n}\n.container:before {\n content: \"\";\n position: absolute;\n height: calc(var(--s) / 2);\n left: calc(var(--s) / 4 + var(--_x, 0px));\n top: calc(var(--s) / 4);\n background: var(--c);\n border-radius: 50%;\n aspect-ratio: 1;\n transition: 0.4s, left cubic-bezier(0.1, -2000, 0.7, -2000) 0.4s;\n}\n.container label {\n display: inline-flex;\n line-height: var(--s);\n align-items: center;\n gap: 10px;\n cursor: pointer;\n}\n.container input {\n height: var(--s);\n aspect-ratio: 1;\n border: calc(var(--s) / 8) solid var(--_c, #939393);\n border-radius: 50%;\n outline-offset: calc(var(--s) / 10);\n padding: calc(var(--s) / 8);\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n cursor: pointer;\n font-size: inherit;\n margin: 0;\n transition: 0.3s;\n}\n.container input:checked {\n --_c: var(--c);\n}\n.container:not(:has(input:checked)):before {\n --_i: -1;\n opacity: 0;\n}\n.container:has(input:checked):before {\n opacity: 1;\n transform: translateY(calc(var(--_i) * (var(--s) + var(--g))));\n}\n.container:has(label:nth-child(1) input:checked):before {\n --_i: 0;\n --_x: 0.02px;\n}\n.container:has(label:nth-child(2) input:checked):before {\n --_i: 1;\n --_x: 0.04px;\n}\n.container:has(label:nth-child(3) input:checked):before {\n --_i: 2;\n --_x: 0.06px;\n}\n.container:has(label:nth-child(4) input:checked):before {\n --_i: 3;\n --_x: 0.08px;\n}\n.container:has(label:nth-child(5) input:checked):before {\n --_i: 4;\n --_x: 0.1px;\n}\n/* and so on ..*/\n\n.container input:disabled {\n background: linear-gradient(#939393 0 0) 50%/100% 20% no-repeat content-box;\n opacity: 0.5;\n cursor: not-allowed;\n}\n@media print {\n input[type=\"radio\"] {\n -webkit-appearance: auto;\n -moz-appearance: auto;\n appearance: auto;\n background: none;\n }\n}\n@supports not selector(:has(*)) {\n .container:before {\n display: none;\n }\n .container input:checked {\n --_c: var(--c);\n background: var(--c) content-box;\n }\n}\n"},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"8db17c","snapshot":null,"tags":null,"title":"radio by Yaya12085","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":519,"cssLen":1403,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n 1\n \n \n \n 2\n \n \n \n 3\n \n \n \n 4\n \n \n

","css":".radio-input input {\n display: none;\n}\n\n.radio-input {\n --container_width: 300px;\n position: relative;\n display: flex;\n align-items: center;\n border-radius: 9999px;\n background-color: #fff;\n color: #000000;\n width: var(--container_width);\n overflow: hidden;\n border: 1px solid rgba(53, 52, 52, 0.226);\n}\n\n.radio-input label {\n width: 100%;\n padding: 10px;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1;\n font-weight: 600;\n letter-spacing: -1px;\n font-size: 14px;\n}\n\n.selection {\n display: none;\n position: absolute;\n height: 100%;\n width: calc(var(--container_width) / 4);\n z-index: 0;\n left: 0;\n top: 0;\n transition: .15s ease;\n}\n\n.radio-input label:has(input:checked) {\n color: #fff;\n}\n\n.radio-input label:has(input:checked) ~ .selection {\n background-color: rgb(11 117 223);\n display: inline-block;\n}\n\n.radio-input label:nth-child(1):has(input:checked) ~ .selection {\n transform: translateX(calc(var(--container_width) * 0/4));\n}\n\n.radio-input label:nth-child(2):has(input:checked) ~ .selection {\n transform: translateX(calc(var(--container_width) * 1/4));\n}\n\n.radio-input label:nth-child(3):has(input:checked) ~ .selection {\n transform: translateX(calc(var(--container_width) * 2/4));\n}\n\n.radio-input label:nth-child(4):has(input:checked) ~ .selection {\n transform: translateX(calc(var(--container_width) * 3/4));\n}"},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"e5b71a","snapshot":null,"tags":null,"title":"radio by BiliBC034","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":544,"cssLen":638,"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 \n \n \n \n

\n","css":".rating:not(:checked) > input {\n position: absolute;\n appearance: none;\n}\n\n.rating:not(:checked) > label {\n float: right;\n cursor: pointer;\n font-size: 30px;\n color: #666;\n}\n\n.rating:not(:checked) > label:before {\n content: \"★\";\n}\n\n.rating > input:checked + label:hover,\n.rating > input:checked + label:hover ~ label,\n.rating > input:checked ~ label:hover,\n.rating > input:checked ~ label:hover ~ label,\n.rating > label:hover ~ input:checked ~ label {\n color: #e58e09;\n}\n\n.rating:not(:checked) > label:hover,\n.rating:not(:checked) > label:hover ~ label {\n color: #ff9e0b;\n}\n\n.rating > input:checked ~ label {\n color: #ffa723;\n}\n"},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"d29b96","snapshot":null,"tags":null,"title":"radio by MijailVillegas","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":563,"cssLen":3255,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" ","css":".container {\n font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\n font-style: italic;\n font-weight: bold;\n font-size: 1.2em;\n display: grid;\n gap: 2em;\n place-content: center;\n width: 400px;\n}\n\n.container input[type=radio] {\n display: none;\n}\n\n.input-btn:is(:checked) + .neon-btn .span {\n inset: 2px;\n background-color: #4090b5;\n background: repeating-linear-gradient(to bottom, transparent 0%, #4090b5 1px, #4090b5 3px, #4090b5 5px, #4090b5 4px, transparent 0.5%), repeating-linear-gradient(to left, hsl(295, 60%, 12%) 100%, hsl(295, 60%, 12%) 100%);\n box-shadow: inset 0 40px 20px hsl(296, 59%, 10%);\n}\n\n.input-btn:is(:checked) + .neon-btn .txt {\n text-shadow: 2px 4px 1px #9e30a9, 2px 2px 1px #4090b5, 0 0 20px rgba(255, 255, 255, 0.616);\n color: rgb(255, 255, 255);\n animation: colorchange 0.3s ease;\n}\n\n.input-btn:is(:checked) + .neon-btn::before {\n animation-duration: 0.6s;\n}\n\n.input-btn:is(:checked) + .neon-btn::after {\n animation-duration: 0.6s;\n}\n\n.neon-btn {\n width: 300px;\n height: 60px;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 0.5em 5em;\n text-align: right;\n background: transparent;\n position: relative;\n overflow: hidden;\n transition: all 2s ease-in-out;\n -webkit-clip-path: polygon(6% 0, 93% 0, 100% 8%, 100% 86%, 90% 89%, 88% 100%, 5% 100%, 0% 85%);\n clip-path: polygon(6% 0, 93% 0, 100% 8%, 100% 86%, 90% 89%, 88% 100%, 5% 100%, 0% 85%);\n}\n\n.neon-btn .span {\n display: flex;\n -webkit-clip-path: polygon(6% 0, 93% 0, 100% 8%, 100% 86%, 90% 89%, 88% 100%, 5% 100%, 0% 85%);\n clip-path: polygon(6% 0, 93% 0, 100% 8%, 100% 86%, 90% 89%, 88% 100%, 5% 100%, 0% 85%);\n position: absolute;\n inset: 1px;\n background-color: #212121;\n z-index: 1;\n}\n\n.neon-btn .txt {\n text-align: right;\n position: relative;\n z-index: 2;\n color: aliceblue;\n font-size: 1em;\n transition: all ease-in-out 2s linear;\n text-shadow: 0px 0px 1px #4090b5, 0px 0px 1px #9e30a9, 0 0 1px white;\n}\n\n.neon-btn::before {\n content: \"\";\n position: absolute;\n height: 300px;\n aspect-ratio: 1.5/1;\n box-shadow: -17px -19px 20px #9e30a9;\n background-image: conic-gradient(#9e30a9, transparent, transparent, transparent, transparent, transparent, transparent, #9e30a9);\n animation: rotate 4s linear infinite -2s;\n}\n\n.neon-btn::after {\n content: \"\";\n position: absolute;\n height: 300px;\n aspect-ratio: 1.5/1;\n box-shadow: -17px -19px 10px #4090b5;\n background-image: conic-gradient(#4090b5, transparent, transparent, transparent, transparent, transparent, transparent, transparent, #4090b5);\n animation: rotate 4s linear infinite;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes colorchange {\n 0% {\n text-shadow: 0px 0px 0px #9e30a9, 0px 0px 0px #4090b5, 0 0 0px rgba(255, 255, 255, 0.616);\n }\n\n 50% {\n text-shadow: -6px 5px 1px #9e30a9, 5px 11px 1px #4090b5, 0 0 20px rgba(255, 255, 255, 0.616);\n }\n\n to {\n text-shadow: 2px 4px 1px #9e30a9, 2px 2px 1px #4090b5, 0 0 20px rgba(255, 255, 255, 0.616);\n }\n}\n\n@keyframes backgroundchange {\n 0% {\n background-color: transparent;\n }\n\n 50% {\n background-color: #4090b5;\n }\n\n to {\n background-color: transparent;\n }\n}"}]}},"actionData":null,"errors":null}