{"loaderData":{"0":null,"0-3":{"total":7308,"projects":[{"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}"},{"created":"2024-01-22T16:59:53.000Z","isPrivate":0,"projectId":"57e831","snapshot":null,"tags":null,"title":"button by Juanes200122","updated":"2024-01-22T16:59:53.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":772,"cssLen":1578,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n","css":".light-button button.bt {\n position: relative;\n height: 200px;\n display: flex;\n align-items: flex-end;\n outline: none;\n background: none;\n border: none;\n}\n\n.light-button button.bt .button-holder {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100px;\n width: 100px;\n background-color: #0a0a0a;\n border-radius: 5px;\n color: #0f0f0f;\n font-weight: 700;\n transition: 300ms;\n outline: #0f0f0f 2px solid;\n outline-offset: 20;\n}\n\n.light-button button.bt .button-holder svg {\n height: 50px;\n fill: #0f0f0f;\n transition: 300ms;\n}\n\n.light-button button.bt .light-holder {\n position: absolute;\n height: 200px;\n width: 100px;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.light-button button.bt .light-holder .dot {\n position: absolute;\n top: 0;\n width: 10px;\n height: 10px;\n background-color: #0a0a0a;\n border-radius: 10px;\n z-index: 2;\n}\n\n.light-button button.bt .light-holder .light {\n position: absolute;\n top: 0;\n width: 200px;\n height: 200px;\n clip-path: polygon(50% 0%, 25% 100%, 75% 100%);\n background: transparent;\n}\n\n.light-button button.bt:hover .button-holder svg {\n fill: rgb(66, 81, 245);\n}\n\n.light-button button.bt:hover .button-holder {\n color: rgba(66, 81, 245);\n outline: rgba(66, 81, 245) 2px solid;\n outline-offset: 2px;\n}\n\n.light-button button.bt:hover .light-holder .light {\n background: rgb(255, 255, 255);\n background: linear-gradient(\n 180deg,\n rgba(66, 81, 245) 0%,\n rgba(255, 255, 255, 0) 75%,\n rgba(255, 255, 255, 0) 100%\n );\n}\n"},{"created":"2024-01-22T16:59:53.000Z","isPrivate":0,"projectId":"f02553","snapshot":null,"tags":null,"title":"button by abuayaan01","updated":"2024-01-22T16:59:53.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":106,"cssLen":1088,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n background-color: #000;\n border: 0px;\n outline: 0px;\n color: #fff;\n width: 200px;\n padding: 20px;\n border-radius: 50px;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n}\n\n.liquid {\n background-color: #2893eb;\n width: 200px;\n height: 70px;\n position: absolute;\n bottom: 0;\n left: 0;\n box-shadow: inset 5px -5px 25px #104e81,\n inset -5px 0px 25px #104e81;\n}\n\n.liquid::after {\n content: '';\n width: 450px;\n height: 400px;\n background: #000;\n z-index: 1;\n position: absolute;\n left: -110px;\n top: -380px;\n border-radius: 45%;\n animation: animate 5s linear 2s infinite;\n}\n\n.liquid::before {\n content: '';\n width: 450px;\n height: 400px;\n background-color: rgb(68, 160, 235);\n z-index: 1;\n position: absolute;\n left: -110px;\n top: -380px;\n border-radius: 40%;\n animation: animate 5s linear 1.8s infinite;\n}\n\n.btn-txt {\n position: relative;\n z-index: 1;\n font-size: 22px;\n font-family: sans-serif;\n letter-spacing: 2px;\n}\n\n@keyframes animate {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n"},{"created":"2024-01-22T16:59:53.000Z","isPrivate":0,"projectId":"aeaa39","snapshot":null,"tags":null,"title":"button by ArturCodeCraft","updated":"2024-01-22T16:59:53.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":161,"cssLen":2404,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"/* ============================ */\nbutton {\n border: none;\n background: none;\n padding: 0;\n margin: 0;\n cursor: pointer;\n font-family: inherit;\n}\n\n/* ============================ */\n.theme__icon {\n width: 32px;\n height: 32px;\n padding: 4px;\n overflow: hidden;\n position: relative;\n}\n\n.theme__icon > :nth-child(1) {\n width: 14px;\n height: 14px;\n border-radius: 24px;\n border: 1px solid #212121;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: rgb(255, 204, 0);\n transition: width .4s, height .4s, border .4s, background-color .4s;\n z-index: 10;\n}\n\n.theme__icon:hover > :nth-child(1) {\n width: 24px;\n height: 24px;\n border: 1px solid rgb(245, 245, 247);\n background-color: rgb(245, 245, 247);\n}\n\n.theme__icon > :nth-child(2) {\n width: 24px;\n height: 24px;\n border-radius: 24px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transition: transform .4s;\n}\n\n.theme__icon:hover > :nth-child(2) {\n transform: translate(-50%, -50%) rotate(-45deg) scale(.8);\n}\n\n.theme__icon > :nth-child(2) > :nth-child(1) {\n display: block;\n width: 2px;\n height: 24px;\n border-radius: 2px;\n position: relative;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n background-color: rgb(255, 204, 0);\n}\n\n.theme__icon > :nth-child(2) > :nth-child(2) {\n display: block;\n width: 24px;\n height: 2px;\n border-radius: 2px;\n position: relative;\n top: -54%;\n left: 50%;\n transform: translateX(-50%);\n background-color: rgb(255, 204, 0);\n}\n\n.theme__icon > :nth-child(2) > :nth-child(3) {\n display: block;\n width: 24px;\n height: 2px;\n border-radius: 2px;\n position: relative;\n top: -60%;\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n background-color: rgb(255, 204, 0);\n}\n\n.theme__icon > :nth-child(2) > :nth-child(4) {\n display: block;\n width: 24px;\n height: 2px;\n border-radius: 2px;\n position: relative;\n top: -70%;\n left: 50%;\n transform: translateX(-50%) rotate(-45deg);\n background-color: rgb(255, 204, 0);\n}\n\n.theme__icon > :nth-child(3) {\n width: 20px;\n height: 20px;\n border-radius: 24px;\n position: absolute;\n top: 50%;\n left: 100%;\n transform: translateY(-50%);\n background-color: #212121;\n transition: top .4s, left .4s;\n transition-delay: .2s;\n z-index: 20;\n}\n\n.theme__icon:hover > :nth-child(3) {\n top: 35%;\n left: 40%;\n}"}]}},"actionData":null,"errors":null}