{"loaderData":{"0":null,"0-3":{"total":7311,"projects":[{"created":"2024-01-22T16:59:11.000Z","isPrivate":0,"projectId":"1be1a5","snapshot":"https://s1.qingting.work/runjs/931f4f1b63c3.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by 212004ALJI","updated":"2024-01-22T18:59:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":1894,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button,button::after {\n padding: 10px 50px;\n font-size: 20px;\n border: none;\n border-radius: 5px;\n color: white;\n background-color: transparent;\n position: relative;\n}\n\nbutton::after {\n --move1: inset(50% 50% 50% 50%);\n --move2: inset(31% 0 40% 0);\n --move3: inset(39% 0 15% 0);\n --move4: inset(45% 0 40% 0);\n --move5: inset(45% 0 6% 0);\n --move6: inset(14% 0 61% 0);\n clip-path: var(--move1);\n content: 'GLITCH';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: block;\n}\n\nbutton:hover::after {\n animation: glitch_4011 1s;\n text-shadow: 10 10px 10px black;\n animation-timing-function: steps(2, end);\n text-shadow: -3px -3px 0px #1df2f0, 3px 3px 0px #E94BE8;\n background-color: transparent;\n border: 3px solid rgb(0, 255, 213);\n}\n\nbutton:hover {\n text-shadow: -1px -1px 0px #1df2f0, 1px 1px 0px #E94BE8;\n}\n\nbutton:hover {\n background-color: transparent;\n border: 1px solid rgb(0, 255, 213);\n box-shadow: 0px 10px 10px -10px rgb(0, 255, 213);\n}\n\n@keyframes glitch_4011 {\n 0% {\n clip-path: var(--move1);\n transform: translate(0px,-10px);\n }\n\n 10% {\n clip-path: var(--move2);\n transform: translate(-10px,10px);\n }\n\n 20% {\n clip-path: var(--move3);\n transform: translate(10px,0px);\n }\n\n 30% {\n clip-path: var(--move4);\n transform: translate(-10px,10px);\n }\n\n 40% {\n clip-path: var(--move5);\n transform: translate(10px,-10px);\n }\n\n 50% {\n clip-path: var(--move6);\n transform: translate(-10px,10px);\n }\n\n 60% {\n clip-path: var(--move1);\n transform: translate(10px,-10px);\n }\n\n 70% {\n clip-path: var(--move3);\n transform: translate(-10px,10px);\n }\n\n 80% {\n clip-path: var(--move2);\n transform: translate(10px,-10px);\n }\n\n 90% {\n clip-path: var(--move4);\n transform: translate(-10px,10px);\n }\n\n 100% {\n clip-path: var(--move1);\n transform: translate(0);\n }\n}\n\n"},{"created":"2024-01-22T16:59:11.000Z","isPrivate":0,"projectId":"890f3c","snapshot":"https://s1.qingting.work/runjs/0f37842c74bd.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by Amir10Amir","updated":"2024-01-22T18:59:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":34,"cssLen":2422,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n --border-radius: 25px;\n --border-width: 7px;\n appearance: none;\n position: relative;\n padding: 1em 2em;\n border: 0;\n background-color: #212121;\n font-family: \"Roboto\", Arial, \"Segoe UI\", sans-serif;\n font-size: 18px;\n font-weight: 500;\n color: #ffff;\n z-index: 2;\n}\n\nbutton::after {\n --m-i: linear-gradient(#000, #000);\n --m-o: content-box, padding-box;\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n padding: var(--border-width);\n background-image: conic-gradient(\n\t\t#ff0080,\n\t\t#ff0080,\n\t\t#ff0080,\n\t\t#ff0080,\n\t\t#ff0080,\n\t\t#ff0080,\n\t\t#ff0080\n\t);\n -webkit-mask-image: var(--m-i), var(--m-i);\n mask-image: var(--m-i), var(--m-i);\n -webkit-mask-origin: var(--m-o);\n mask-origin: var(--m-o);\n mask-clip: var(--m-o);\n mask-composite: exclude;\n -webkit-mask-composite: destination-out;\n filter: hue-rotate(0);\n animation: rotate-hue634 linear 500ms infinite;\n animation-play-state: paused;\n border-radius: 20px;\n border-color: #000;\n}\n\nbutton:hover::after {\n animation-play-state: running;\n border-radius: 10px;\n}\n\n@keyframes rotate-hue634 {\n to {\n filter: hue-rotate(1turn);\n }\n}\n\nbutton,\nbutton::after {\n box-sizing: border-box;\n border-radius: 20px;\n}\n\nbutton:active {\n --border-width: 5px;\n}\n\n.bn {\n padding: 0.9em 1.6em;\n border: none;\n outline: none;\n color: #FFF;\n font-family: inherit;\n font-weight: 500;\n font-size: 17px;\n cursor: pointer;\n position: relative;\n z-index: 0;\n border-radius: 32px;\n}\n\n.bn::after {\n content: \"\";\n z-index: -1;\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgb(46, 46, 46);\n left: 0;\n top: 0;\n border-radius: 10px;\n}\n\n.bn::before {\n content: \"\";\n background: linear-gradient(\n 45deg,\n #07d888, #e40851, #2f00ff, #00ff37,\n #ec0808, #2600ff, #0bd157, #2f00ff\n);\n position: absolute;\n top: -2px;\n left: -2px;\n background-size: 600%;\n z-index: -1;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n filter: blur(8px);\n animation: glowing345 20s linear infinite;\n transition: opacity .3s ease-in-out;\n border-radius: 20px;\n opacity: 0;\n}\n\n@keyframes glowing345 {\n 0% {\n background-position: 0 0;\n }\n\n 50% {\n background-position: 400% 0;\n }\n\n 100% {\n background-position: 0 0;\n }\n}\n\n.bn:hover::before {\n opacity: 1;\n}\n\n.bn:active:after {\n background: transparent;\n}\n\n.bn:active {\n color: #000;\n font-weight: bold;\n}"},{"created":"2024-01-22T16:59:11.000Z","isPrivate":0,"projectId":"29628d","snapshot":"https://s1.qingting.work/runjs/87ad3f0e87d8.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by TimTrayler","updated":"2024-01-22T18:59:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":680,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n --hover-shadows: 16px 16px 33px #121212, -16px -16px 33px #303030;\n --accent: fuchsia;\n font-weight: bold;\n letter-spacing: 0.1em;\n border: none;\n border-radius: 1.1em;\n background-color: #212121;\n cursor: pointer;\n color: white;\n padding: 1em 2em;\n transition: box-shadow ease-in-out 0.3s, background-color ease-in-out 0.1s,\n letter-spacing ease-in-out 0.1s, transform ease-in-out 0.1s;\n box-shadow: 13px 13px 10px #1c1c1c, -13px -13px 10px #262626;\n}\n\nbutton:hover {\n box-shadow: var(--hover-shadows);\n}\n\nbutton:active {\n box-shadow: var(--hover-shadows), var(--accent) 0px 0px 30px 5px;\n background-color: var(--accent);\n transform: scale(0.95);\n}\n"},{"created":"2024-01-22T16:59:11.000Z","isPrivate":0,"projectId":"30ac1a","snapshot":"https://s1.qingting.work/runjs/80bcfff7bd37.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by Shoh2008","updated":"2024-01-22T18:59:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":24,"cssLen":534,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n padding: 15px 30px;\n font-size: 18px;\n outline: none;\n border: none;\n border-radius: 10px;\n transition: 0.5s;\n background: #1e1e1e;\n cursor: pointer;\n color: greenyellow;\n box-shadow: 0 0 10px #363636, inset 0 0 10px #363636;\n}\n\nbutton:hover {\n animation: a 0.5s 1 linear;\n}\n\n@keyframes a {\n 0% {\n transform: scale(0.7, 1.3);\n }\n\n 25% {\n transform: scale(1.3, 0.7);\n }\n\n 50% {\n transform: scale(0.7, 1.3);\n }\n\n 75% {\n transform: scale(1.3, 0.7);\n }\n\n 100% {\n transform: scale(1, 1);\n }\n}\n"},{"created":"2024-01-22T16:59:10.000Z","isPrivate":0,"projectId":"fc2a44","snapshot":"https://s1.qingting.work/runjs/be0541a2e418.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by Nawsome","updated":"2024-01-22T18:59:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":727,"cssLen":4678,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".continue-application {\n --color: #fff;\n --background: #404660;\n --background-hover: #3A4059;\n --background-left: #2B3044;\n --folder: #F3E9CB;\n --folder-inner: #BEB393;\n --paper: #FFFFFF;\n --paper-lines: #BBC1E1;\n --paper-behind: #E1E6F9;\n --pencil-cap: #fff;\n --pencil-top: #275EFE;\n --pencil-middle: #fff;\n --pencil-bottom: #5C86FF;\n --shadow: rgba(13, 15, 25, .2);\n border: none;\n outline: none;\n cursor: pointer;\n position: relative;\n border-radius: 5px;\n font-size: 14px;\n font-weight: 500;\n line-height: 19px;\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n padding: 17px 29px 17px 69px;\n transition: background 0.3s;\n color: var(--color);\n background: var(--bg, var(--background));\n}\n\n.continue-application > div {\n top: 0;\n left: 0;\n bottom: 0;\n width: 53px;\n position: absolute;\n overflow: hidden;\n border-radius: 5px 0 0 5px;\n background: var(--background-left);\n}\n\n.continue-application > div .folder {\n width: 23px;\n height: 27px;\n position: absolute;\n left: 15px;\n top: 13px;\n}\n\n.continue-application > div .folder .top {\n left: 0;\n top: 0;\n z-index: 2;\n position: absolute;\n transform: translateX(var(--fx, 0));\n transition: transform 0.4s ease var(--fd, 0.3s);\n}\n\n.continue-application > div .folder .top svg {\n width: 24px;\n height: 27px;\n display: block;\n fill: var(--folder);\n transform-origin: 0 50%;\n transition: transform 0.3s ease var(--fds, 0.45s);\n transform: perspective(120px) rotateY(var(--fr, 0deg));\n}\n\n.continue-application > div .folder:before, .continue-application > div .folder:after,\n.continue-application > div .folder .paper {\n content: \"\";\n position: absolute;\n left: var(--l, 0);\n top: var(--t, 0);\n width: var(--w, 100%);\n height: var(--h, 100%);\n border-radius: 1px;\n background: var(--b, var(--folder-inner));\n}\n\n.continue-application > div .folder:before {\n box-shadow: 0 1.5px 3px var(--shadow), 0 2.5px 5px var(--shadow), 0 3.5px 7px var(--shadow);\n transform: translateX(var(--fx, 0));\n transition: transform 0.4s ease var(--fd, 0.3s);\n}\n\n.continue-application > div .folder:after,\n.continue-application > div .folder .paper {\n --l: 1px;\n --t: 1px;\n --w: 21px;\n --h: 25px;\n --b: var(--paper-behind);\n}\n\n.continue-application > div .folder:after {\n transform: translate(var(--pbx, 0), var(--pby, 0));\n transition: transform 0.4s ease var(--pbd, 0s);\n}\n\n.continue-application > div .folder .paper {\n z-index: 1;\n --b: var(--paper);\n}\n\n.continue-application > div .folder .paper:before, .continue-application > div .folder .paper:after {\n content: \"\";\n width: var(--wp, 14px);\n height: 2px;\n border-radius: 1px;\n transform: scaleY(0.5);\n left: 3px;\n top: var(--tp, 3px);\n position: absolute;\n background: var(--paper-lines);\n box-shadow: 0 12px 0 0 var(--paper-lines), 0 24px 0 0 var(--paper-lines);\n}\n\n.continue-application > div .folder .paper:after {\n --tp: 6px;\n --wp: 10px;\n}\n\n.continue-application > div .pencil {\n height: 2px;\n width: 3px;\n border-radius: 1px 1px 0 0;\n top: 8px;\n left: 105%;\n position: absolute;\n z-index: 3;\n transform-origin: 50% 19px;\n background: var(--pencil-cap);\n transform: translateX(var(--pex, 0)) rotate(35deg);\n transition: transform 0.4s ease var(--pbd, 0s);\n}\n\n.continue-application > div .pencil:before, .continue-application > div .pencil:after {\n content: \"\";\n position: absolute;\n display: block;\n background: var(--b, linear-gradient(var(--pencil-top) 55%, var(--pencil-middle) 55.1%, var(--pencil-middle) 60%, var(--pencil-bottom) 60.1%));\n width: var(--w, 5px);\n height: var(--h, 20px);\n border-radius: var(--br, 2px 2px 0 0);\n top: var(--t, 2px);\n left: var(--l, -1px);\n}\n\n.continue-application > div .pencil:before {\n -webkit-clip-path: polygon(0 5%, 5px 5%, 5px 17px, 50% 20px, 0 17px);\n clip-path: polygon(0 5%, 5px 5%, 5px 17px, 50% 20px, 0 17px);\n}\n\n.continue-application > div .pencil:after {\n --b: none;\n --w: 3px;\n --h: 6px;\n --br: 0 2px 1px 0;\n --t: 3px;\n --l: 3px;\n border-top: 1px solid var(--pencil-top);\n border-right: 1px solid var(--pencil-top);\n}\n\n.continue-application:before, .continue-application:after {\n content: \"\";\n position: absolute;\n width: 10px;\n height: 2px;\n border-radius: 1px;\n background: var(--color);\n transform-origin: 9px 1px;\n transform: translateX(var(--cx, 0)) scale(0.5) rotate(var(--r, -45deg));\n top: 26px;\n right: 16px;\n transition: transform 0.3s;\n}\n\n.continue-application:after {\n --r: 45deg;\n}\n\n.continue-application:hover {\n --cx: 2px;\n --bg: var(--background-hover);\n --fx: -40px;\n --fr: -60deg;\n --fd: .15s;\n --fds: 0s;\n --pbx: 3px;\n --pby: -3px;\n --pbd: .15s;\n --pex: -24px;\n}\n"},{"created":"2024-01-22T16:59:10.000Z","isPrivate":0,"projectId":"8c98ca","snapshot":"https://s1.qingting.work/runjs/10ec724d75c2.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by adamgiebl","updated":"2024-01-22T18:59:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":486,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n position: relative;\n display: inline-block;\n margin: 15px;\n padding: 15px 30px;\n text-align: center;\n font-size: 18px;\n letter-spacing: 1px;\n text-decoration: none;\n color: #725AC1;\n background: transparent;\n cursor: pointer;\n transition: ease-out 0.5s;\n border: 2px solid #725AC1;\n border-radius: 10px;\n box-shadow: inset 0 0 0 0 #725AC1;\n}\n\nbutton:hover {\n color: white;\n box-shadow: inset 0 -100px 0 0 #725AC1;\n}\n\nbutton:active {\n transform: scale(0.9);\n}"},{"created":"2024-01-22T16:59:10.000Z","isPrivate":0,"projectId":"ebeb38","snapshot":"https://s1.qingting.work/runjs/38792081c4a3.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by gagan-gv","updated":"2024-01-22T18:59:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4131,"cssLen":676,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n height: 4em;\n width: 15em;\n border: none;\n border-radius: 40px;\n background-color: #fff;\n cursor: pointer;\n}\n\nbutton span {\n z-index: 1;\n display: inline-block;\n background-color: black;\n height: 3em;\n width: 11.5em;\n border-radius: 25px;\n color: #fff;\n line-height: 55px;\n font-size: 18px;\n letter-spacing: 3px;\n transition: all 0.5s;\n}\n\nbutton .container {\n z-index: -1;\n width: 0;\n position: relative;\n display: flex;\n justify-content: center;\n transform: translateY(-50px);\n transition: all 0.4s;\n}\n\nbutton .container svg {\n padding: 0 10px;\n}\n\nbutton:hover span {\n width: 0;\n}\n\nbutton:hover .container {\n z-index: 2;\n width: 100%;\n}\n"},{"created":"2024-01-22T16:59:10.000Z","isPrivate":0,"projectId":"3c7228","snapshot":"https://s1.qingting.work/runjs/59d64d3a4a74.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T18:59:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1023,"cssLen":563,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 6px 12px;\n gap: 8px;\n height: 36px;\n width: 120px;\n border: none;\n background: #5e41de33;\n border-radius: 20px;\n cursor: pointer;\n}\n\n.lable {\n line-height: 20px;\n font-size: 17px;\n color: #5D41DE;\n font-family: sans-serif;\n letter-spacing: 1px;\n}\n\n.button:hover {\n background: #5e41de4d;\n}\n\n.button:hover .svg-icon {\n animation: spin 2s linear infinite;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:59:10.000Z","isPrivate":0,"projectId":"46e073","snapshot":"https://s1.qingting.work/runjs/0e7f8ece360d.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by satyamchaudharydev","updated":"2024-01-22T18:59:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":537,"cssLen":1968,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Download

\n \n \n \n

","css":".button {\n --width: 100px;\n --height: 35px;\n --tooltip-height: 35px;\n --tooltip-width: 90px;\n --gap-between-tooltip-to-button: 18px;\n --button-color: #1163ff;\n --tooltip-color: #fff;\n width: var(--width);\n height: var(--height);\n background: var(--button-color);\n position: relative;\n text-align: center;\n border-radius: 0.45em;\n font-family: \"Arial\";\n transition: background 0.3s;\n}\n\n.button::before {\n position: absolute;\n content: attr(data-tooltip);\n width: var(--tooltip-width);\n height: var(--tooltip-height);\n background-color: var(--tooltip-color);\n font-size: 0.9rem;\n color: #111;\n border-radius: .25em;\n line-height: var(--tooltip-height);\n bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) + 10px);\n left: calc(50% - var(--tooltip-width) / 2);\n}\n\n.button::after {\n position: absolute;\n content: '';\n width: 0;\n height: 0;\n border: 10px solid transparent;\n border-top-color: var(--tooltip-color);\n left: calc(50% - 10px);\n bottom: calc(100% + var(--gap-between-tooltip-to-button) - 10px);\n}\n\n.button::after,.button::before {\n opacity: 0;\n visibility: hidden;\n transition: all 0.5s;\n}\n\n.text {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.button-wrapper,.text,.icon {\n overflow: hidden;\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n color: #fff;\n}\n\n.text {\n top: 0\n}\n\n.text,.icon {\n transition: top 0.5s;\n}\n\n.icon {\n color: #fff;\n top: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.icon svg {\n width: 24px;\n height: 24px;\n}\n\n.button:hover {\n background: #6c18ff;\n}\n\n.button:hover .text {\n top: -100%;\n}\n\n.button:hover .icon {\n top: 0;\n}\n\n.button:hover:before,.button:hover:after {\n opacity: 1;\n visibility: visible;\n}\n\n.button:hover:after {\n bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) - 20px);\n}\n\n.button:hover:before {\n bottom: calc(var(--height) + var(--gap-between-tooltip-to-button));\n}\n"},{"created":"2024-01-22T16:59:10.000Z","isPrivate":0,"projectId":"bd44d9","snapshot":"https://s1.qingting.work/runjs/81701948f0ef.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by Wendell47","updated":"2024-01-22T18:59:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":91,"cssLen":1101,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 15px 30px;\n border: 0;\n position: relative;\n overflow: hidden;\n border-radius: 10rem;\n transition: all 0.02s;\n font-weight: bold;\n color: rgb(37, 37, 37);\n z-index: 0;\n box-shadow: 0 0px 7px -5px rgba(0, 0, 0, 0.5);\n}\n\n.button:hover {\n background: rgb(193, 228, 248);\n color: rgb(33, 0, 85);\n}\n\n.button:active {\n transform: scale(0.97);\n}\n\n.hoverEffect {\n position: absolute;\n bottom: 0;\n top: 0;\n left: 0;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1;\n}\n\n.hoverEffect div {\n background: rgb(222,0,75);\n background: linear-gradient(90deg, rgba(222,0,75,1) 0%, rgba(191,70,255,1) 49%, rgba(0,212,255,1) 100%);\n border-radius: 40rem;\n width: 10rem;\n height: 10rem;\n transition: 0.4s;\n filter: blur(20px);\n animation: effect infinite 3s linear;\n opacity: 0.5;\n}\n\n.button:hover .hoverEffect div {\n width: 8rem;\n height: 8rem;\n}\n\n@keyframes effect {\n\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:59:10.000Z","isPrivate":0,"projectId":"831035","snapshot":"https://s1.qingting.work/runjs/6bf043a432fd.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by satyamchaudharydev","updated":"2024-01-22T18:59:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":185,"cssLen":1005,"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 cursor: pointer;\n}\n\n/* button styling */\n.button {\n --border-right: 6px;\n --text-stroke-color: rgba(255,255,255,0.6);\n --animation-color: #37FF8B;\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 0 23px var(--animation-color))\n}"},{"created":"2024-01-22T16:59:10.000Z","isPrivate":0,"projectId":"32e447","snapshot":"https://s1.qingting.work/runjs/0e7d601f6a5b.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T18:59:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":549,"cssLen":564,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 6px 12px;\n gap: 8px;\n height: 34px;\n width: 112px;\n border: none;\n background: #ff362b34;\n border-radius: 20px;\n cursor: pointer;\n}\n\n.lable {\n line-height: 20px;\n font-size: 17px;\n color: #FF342B;\n font-family: sans-serif;\n letter-spacing: 1px;\n}\n\n.button:hover {\n background: #ff362b52;\n}\n\n.button:hover .svg-icon {\n animation: spin 2s linear infinite;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(-360deg);\n }\n}"}]}},"actionData":null,"errors":null}