{"loaderData":{"0":null,"0-2":{"total":7073,"projects":[{"created":"2024-01-22T17:00:23.000Z","isPrivate":0,"projectId":"56bb6e","snapshot":null,"tags":null,"title":"button by SteveBloX","updated":"2024-01-22T17:00:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":24,"cssLen":317,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n width: 150px;\n height: 60px;\n border: 3px solid #343a40;\n border-radius: 45px;\n transition: all 0.3s;\n cursor: pointer;\n background: white;\n font-size: 1.2em;\n font-weight: 550;\n font-family: \"Montserrat\", sans-serif;\n}\n\nbutton:hover {\n background: #343a40;\n color: white;\n font-size: 1.5em;\n}\n"},{"created":"2024-01-22T17:00:23.000Z","isPrivate":0,"projectId":"132a57","snapshot":null,"tags":null,"title":"button by tranphattrien","updated":"2024-01-22T17:00:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":509,"cssLen":3327,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".relative {\n position: relative\n}\n\n.my-3 {\n margin-top: 0.75rem;\n margin-bottom: 0.75rem\n}\n\n.flex {\n display: flex\n}\n\n.h-\\[50px\\] {\n height: 50px\n}\n\n.w-\\[150px\\] {\n width: 150px\n}\n\n.cursor-pointer {\n cursor: pointer\n}\n\n.items-center {\n align-items: center\n}\n\n.justify-center {\n justify-content: center\n}\n\n.overflow-hidden {\n overflow: hidden\n}\n\n.rounded-xl {\n border-radius: 0.75rem\n}\n\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity))\n}\n\n.text-\\[\\#fff\\] {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}\n\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms\n}\n\n.duration-500 {\n transition-duration: 500ms\n}\n\n.ease-in-out {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)\n}\n\n.before\\:absolute::before {\n content: var(--tw-content);\n position: absolute\n}\n\n.before\\:-left-full::before {\n content: var(--tw-content);\n left: -100%\n}\n\n.before\\:top-0::before {\n content: var(--tw-content);\n top: 0px\n}\n\n.before\\:z-\\[-1\\]::before {\n content: var(--tw-content);\n z-index: -1\n}\n\n.before\\:h-full::before {\n content: var(--tw-content);\n height: 100%\n}\n\n.before\\:w-full::before {\n content: var(--tw-content);\n width: 100%\n}\n\n.before\\:rounded-xl::before {\n content: var(--tw-content);\n border-radius: 0.75rem\n}\n\n.before\\:bg-gradient-to-r::before {\n content: var(--tw-content);\n background-image: linear-gradient(to right, var(--tw-gradient-stops))\n}\n\n.before\\:from-\\[\\#009b49\\]::before {\n content: var(--tw-content);\n --tw-gradient-from: #009b49 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(0 155 73 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)\n}\n\n.before\\:to-\\[rgb\\(105\\2c 184\\2c 141\\)\\]::before {\n content: var(--tw-content);\n --tw-gradient-to: rgb(105,184,141) var(--tw-gradient-to-position)\n}\n\n.before\\:transition-all::before {\n content: var(--tw-content);\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms\n}\n\n.before\\:duration-500::before {\n content: var(--tw-content);\n transition-duration: 500ms\n}\n\n.before\\:ease-in-out::before {\n content: var(--tw-content);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)\n}\n\n.hover\\:scale-105:hover {\n --tw-scale-x: 1.05;\n --tw-scale-y: 1.05;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}\n\n.hover\\:shadow-lg:hover {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n.hover\\:before\\:left-0:hover::before {\n content: var(--tw-content);\n left: 0px\n}"},{"created":"2024-01-22T17:00:23.000Z","isPrivate":0,"projectId":"b50b41","snapshot":null,"tags":null,"title":"button by killiandvcz","updated":"2024-01-22T17:00:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":36,"cssLen":412,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n padding: 7px 25px;\n border: none;\n background: linear-gradient(-15deg, rgb(31, 33, 124) 0 50%, rgb(202, 76, 214) 90% 95%, rgb(221, 36, 83) 100%);\n box-shadow: inset rgba(255, 255, 255, 0.418) 3px 3px 5px;\n color: white;\n font-family: 'Lora', serif;\n font-style: italic;\n border-radius: 50px;\n transition: all .4s;\n}\n\nbutton:hover {\n box-shadow: inset rgba(255, 255, 255, 0.473) 4px 4px 5px;\n}"},{"created":"2024-01-22T17:00:23.000Z","isPrivate":0,"projectId":"3d8ac1","snapshot":null,"tags":null,"title":"button by R0G3RF4","updated":"2024-01-22T17:00:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":489,"cssLen":922,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background: transparent;\n position: relative;\n padding: 5px 15px;\n display: flex;\n align-items: center;\n font-size: 17px;\n font-weight: 600;\n text-decoration: none;\n cursor: pointer;\n border: 1px solid #0163E0;\n border-radius: 25px;\n outline: none;\n overflow: hidden;\n color: #0163E0;\n transition: color 0.3s 0.1s ease-out;\n text-align: center;\n}\n\nbutton svg {\n fill: #0163E0;\n height: 25px;\n width: 25px;\n}\n\nbutton span {\n margin: 10px;\n}\n\nbutton::before {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n content: '';\n border-radius: 50%;\n display: block;\n width: 20em;\n height: 20em;\n left: -5em;\n text-align: center;\n transition: box-shadow 0.5s ease-out;\n z-index: -1;\n}\n\nbutton:hover {\n color: #fff;\n border: 1px solid #0163E0;\n}\n\nbutton:hover svg {\n fill: currentColor;\n}\n\nbutton:hover::before {\n box-shadow: inset 0 0 0 10em #0163E0;\n}"},{"created":"2024-01-22T17:00:23.000Z","isPrivate":0,"projectId":"febb31","snapshot":null,"tags":null,"title":"button by KhaledMatalkah","updated":"2024-01-22T17:00:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":44,"cssLen":960,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n display: inline-block;\n padding: 15px 32px;\n font-size: 17px;\n font-weight: bold;\n color: rgb(0, 0, 0);\n background: transparent;\n border-radius: 50px;\n text-align: center;\n text-decoration: none;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n z-index: 1;\n border-style: solid;\n border: none;\n color: white;\n}\n\n.button:before,\n.button:after {\n content: \"\";\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n opacity: 0.3;\n pointer-events: none;\n}\n\n.button:before {\n left: 90%;\n background: linear-gradient(130deg, rgb(6, 193, 255), rgb(255, 255, 255), rgba(253, 28, 197, 0.985));\n z-index: -1;\n transition: left 0.3s ease-in-out;\n}\n\n.button:hover:before {\n left: 50%;\n}\n\n.button:after {\n right: 90%;\n background: linear-gradient(130deg, rgb(6, 193, 255), rgb(255, 255, 255), rgba(253, 28, 197, 0.985));\n z-index: -1;\n transition: right 0.3s ease-in-out;\n}\n\n.button:hover:after {\n right: 50%;\n}\n\n"},{"created":"2024-01-22T17:00:23.000Z","isPrivate":0,"projectId":"b7a35e","snapshot":null,"tags":null,"title":"button by sammykINC","updated":"2024-01-22T17:00:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":262,"cssLen":716,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"/* works only on a dark background with these paremeters*/\n\n.button {\n border-radius: 50%;\n border: none;\n display: flex;\n place-items: center;\n background-color: transparent;\n cursor: pointer;\n}\n\n.button > svg {\n border-radius: inherit;\n padding: 0.5rem;\n fill: #fff;\n /* SVG color */\n width: 38px;\n /* default width 32px */\n height: 38px;\n /* default height 32px */\n}\n\n.button > svg:active {\n background-color: rgba(65, 65, 65, 0.5);\n}\n\n.button > svg:not(:active) {\n animation: fadeOut 0.9s;\n}\n\n@keyframes fadeOut {\n 0% {\n outline: 1px solid rgba(90, 90, 90, 0.5);\n /* If you use border it will take space inside and slightly move the SVG */\n }\n\n 100% {\n background-color: transparent;\n }\n}\n"},{"created":"2024-01-22T17:00:23.000Z","isPrivate":0,"projectId":"c41268","snapshot":null,"tags":null,"title":"button by wizard503","updated":"2024-01-22T17:00:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4345,"cssLen":2622,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".share {\n width: 150px;\n height: 150px;\n margin: 5em auto;\n background: rgba(10, 237, 189, 1);\n background: -webkit-radial-gradient(\n top left,\n rgba(10, 237, 189, 1),\n rgba(37, 211, 103, 1)\n );\n background: -moz-radial-gradient(\n top left,\n rgba(10, 237, 189, 1),\n rgba(37, 211, 103, 1)\n );\n background: radial-gradient(\n to bottom right,\n rgba(10, 237, 189, 1),\n rgba(37, 211, 103, 1)\n );\n text-align: center;\n border-radius: 100%;\n overflow: hidden;\n position: relative;\n box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);\n}\n\n.share a {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: 90px;\n height: 90px;\n position: relative;\n z-index: 1;\n}\n\n.share::after {\n content: \"Share\";\n position: absolute;\n left: 0;\n right: 0;\n top: 40%;\n font-size: 25px;\n font-weight: bold;\n font-style: italic;\n text-transform: uppercase;\n color: #fff;\n}\n\n.share:hover::after {\n color: transparent;\n}\n\n.share:hover {\n background: rgba(242, 41, 92, 1);\n background: -webkit-radial-gradient(\n top left,\n rgba(242, 41, 92, 1),\n rgba(41, 172, 225, 1)\n );\n background: -moz-radial-gradient(\n top left,\n rgba(242, 41, 92, 1),\n rgba(41, 172, 225, 1)\n );\n background: radial-gradient(\n to bottom right,\n rgba(242, 41, 92, 1),\n rgba(41, 172, 225, 1)\n );\n}\n\n.share a.fb {\n background: #1266f1;\n top: -5.65em;\n left: -2.83em;\n -webkit-transition: all 0.3s ease-in-out;\n transition: all 0.3s ease-in-out;\n}\n\n.share a.tw {\n background: #28abe1;\n top: -6.55em;\n right: -9.39em;\n -webkit-transition: all 0.3s ease-in-out;\n transition: all 0.3s ease-in-out;\n}\n\n.share a.ins {\n background: #f2295b;\n bottom: 6.7em;\n left: -7.5em;\n -webkit-tra3nsition: all 0.3s ease-in-out;\n transition: all 0.3s ease-in-out;\n}\n\n.share a.wh {\n background: #25d366;\n right: -2.81em;\n bottom: 7.5em;\n -webkit-transition: all 0.3s ease-in-out;\n transition: all 0.3s ease-in-out;\n}\n\n.share:hover a.fb {\n top: -0.96em;\n}\n\n.share:hover a.tw {\n right: -2.8em;\n}\n\n.share:hover a.ins {\n left: -2.84em;\n}\n\n.share:hover a.wh {\n bottom: 12.3em;\n}\n\n.facebook {\n padding-top: 45%;\n}\n\n.instagram {\n padding-left: 30%;\n padding-top: 15%;\n}\n\n.whatsapp {\n padding-left: 15%;\n padding-top: 15%;\n}\n\n.twitter {\n padding-top: 25%;\n padding-left: 10%;\n}\n\n.fb:hover {\n box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.5) inset;\n}\n\n.tw:hover {\n box-shadow: 10px 5px 30px 2px rgba(0, 0, 0, 0.5) inset;\n}\n\n.ins:hover {\n box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.5) inset;\n}\n\n.wh:hover {\n box-shadow: 10px 20px 20px rgba(0, 0, 0, 0.5) inset;\n}\n"},{"created":"2024-01-22T17:00:23.000Z","isPrivate":0,"projectId":"17e501","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":1110,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n appearance: button;\n background-color: #999;\n border: solid transparent;\n border-radius: 16px;\n border-width: 0 0 4px;\n box-sizing: border-box;\n color: #FFFFFF;\n cursor: pointer;\n display: inline-block;\n font-size: 15px;\n font-weight: 700;\n letter-spacing: .8px;\n line-height: 20px;\n margin: 0;\n outline: none;\n overflow: visible;\n padding: 13px 19px;\n text-align: center;\n text-transform: uppercase;\n touch-action: manipulation;\n transform: translateZ(0);\n transition: filter .2s;\n user-select: none;\n -webkit-user-select: none;\n vertical-align: middle;\n white-space: nowrap;\n}\n\nbutton:after {\n background-clip: padding-box;\n background-color: #222;\n border: solid transparent;\n border-radius: 16px;\n border-width: 0 0 4px;\n bottom: -4px;\n content: \"\";\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1;\n}\n\nbutton:main, button:focus {\n user-select: auto;\n}\n\nbutton:hover:not(:disabled) {\n filter: brightness(1.1);\n}\n\nbutton:disabled {\n cursor: auto;\n}\n\nbutton:active:after {\n border-width: 0 0 0px;\n}\n\nbutton:active {\n padding-bottom: 10px;\n}"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"1bbbcf","snapshot":null,"tags":null,"title":"button by tarantino421","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":616,"cssLen":1689,"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

","css":".box {\n --clr-shadow__border: #3effff;\n --clr-text: #F6F4EB;\n --clr-soundwave: #83e4ac;\n --clr-music: #30858d;\n --size: 3rem;\n position: relative;\n outline: 1px solid var(--clr-shadow__border);\n}\n\n.button {\n background: transparent;\n padding: calc(var(--size) / 3) var(--size);\n font-weight: 600;\n font-size: 1.5rem;\n border: none;\n cursor: pointer;\n color: var(--clr-text);\n letter-spacing: 0.2rem;\n text-shadow: 2px 0px var(--clr-shadow__border), 0px 2px var(--clr-shadow__border),-2px 0px var(--clr-shadow__border), 0px -2px var(--clr-shadow__border);\n}\n\n.music {\n width: 100%;\n height: 100%;\n bottom: 0%;\n transition: 0.5s ease-in-out;\n z-index: -1;\n opacity: 0;\n overflow: hidden;\n position: absolute;\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n background: var(--clr-music);\n}\n\n.box:hover .music {\n opacity: 1;\n}\n\n.soundwave {\n width: 100%;\n border: 1px solid var(--clr-music);\n border-bottom: none;\n background: linear-gradient(to top, var(--clr-soundwave) 70%, var(--clr-music));\n animation: music-animation calc(0.03s * var(--i)) linear infinite;\n opacity: 1;\n}\n\n@keyframes music-animation {\n 0%, 100% {\n height: calc(0.06rem * var(--i));\n }\n\n 10% {\n height: calc(0.04rem * var(--i));\n }\n\n 20% {\n height: calc(0.05rem * var(--i));\n }\n\n 30% {\n height: calc(0.01rem * var(--i));\n }\n\n 40% {\n height: calc(0.07rem * var(--i));\n }\n\n 50% {\n height: calc(0.04rem * var(--i));\n }\n\n 60% {\n height: calc(0.08rem * var(--i));\n }\n\n 70% {\n height: calc(0.06rem * var(--i));\n }\n\n 80% {\n height: calc(0.09rem * var(--i));\n }\n\n 90% {\n height: calc(0.05rem * var(--i));\n }\n}\n\n\n\n\n\n\n\n"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"95fbb0","snapshot":null,"tags":null,"title":"button by xantha01","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":317,"cssLen":813,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"Get Started ","css":".swipe {\n position: relative;\n background-color: #F1F7F7;\n width: 200px;\n height: 60px;\n color: rgba(255, , 204, 1);\n border-radius: 60px;\n display: flex;\n justify-content: center;\n align-items: center;\n text-decoration: none;\n letter-spacing: 2px;\n border-top: 0.5px solid rgba(0, 0, 0, 0.35);\n border-left: 0.5px solid rgba(0, 0, 0, 0.35);\n padding-left: 40px;\n cursor: pointer;\n transition: 0.35s ease;\n}\n\n.swipe:hover {\n padding-left: 0;\n padding-right: 40px;\n color: #324B4C;\n}\n\n.container {\n position: absolute;\n left: 5px;\n width: 50px;\n height: 50px;\n background: #7AB5B7;\n border-radius: 50%;\n transition: 0.35s ease;\n display: flex;\n justify-content: center;\n align-items: center;\n color: #f1f4f7;\n}\n\n.swipe:hover .container {\n left: calc(100% - 55px);\n color: #324B4C;\n}"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"9d37d2","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":24,"cssLen":1478,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n padding: 10px 40px;\n font-size: 18px;\n background-color: #333;\n color: #fff;\n text-shadow: 0 2px 0 rgb(0 0 0 / 25%);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n border: 0;\n z-index: 1;\n user-select: none;\n cursor: pointer;\n text-transform: uppercase;\n letter-spacing: 1px;\n white-space: unset;\n padding: .8rem 1.5rem;\n text-decoration: none;\n font-weight: 900;\n transition: all 0.7s cubic-bezier(0,.8,.26,.99);\n}\n\nbutton:before {\n position: absolute;\n pointer-events: none;\n top: 0;\n left: 0;\n display: block;\n width: 100%;\n height: 100%;\n content: '';\n transition: .7s cubic-bezier(0,.8,.26,.99);\n z-index: -1;\n background-color: #333!important;\n box-shadow: 0 -4px rgb(0 0 0 / 50%) inset, 0 4px rgb(255 255 255 / 20%) inset, -4px 0 rgb(255 255 255 / 20%) inset, 4px 0 rgb(0 0 0 / 50%) inset;\n}\n\nbutton:after {\n position: absolute;\n pointer-events: none;\n top: 0;\n left: 0;\n display: block;\n width: 100%;\n height: 100%;\n content: '';\n box-shadow: 0 4px 0 0 rgb(0 0 0 / 15%);\n transition: .7s cubic-bezier(0,.8,.26,.99);\n}\n\nbutton:hover:before {\n box-shadow: 0 -4px rgb(0 0 0 / 50%) inset, 0 4px rgb(255 255 255 / 20%) inset, -4px 0 rgb(255 255 255 / 20%) inset, 4px 0 rgb(0 0 0 / 50%) inset;\n}\n\nbutton:hover:after {\n box-shadow: 0 4px 0 0 rgb(0 0 0 / 15%);\n}\n\nbutton:active {\n transform: translateY(4px);\n}\n\nbutton:active:after {\n box-shadow: 0 0px 0 0 rgb(0 0 0 / 15%);\n}"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"ecd330","snapshot":null,"tags":null,"title":"button by Roopaish","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":2343,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n outline: none;\n border: none;\n cursor: pointer;\n padding: 10px 20px;\n font-size: 12px;\n font-weight: 700;\n color: hsl(0, 0%, 100%);\n border-radius: 10px;\n text-transform: uppercase;\n transition: all 0.2s ease-in-out;\n position: relative;\n background-color: #ff0081;\n box-shadow: rgba(233, 30, 99, 0.5);\n}\n\nbutton::after,\nbutton::before {\n transition: all 0.2s ease-in-out;\n}\n\nbutton::before {\n z-index: -1;\n position: absolute;\n content: \"\";\n left: -2em;\n right: -2em;\n top: -2em;\n bottom: -2em;\n background-repeat: no-repeat;\n background-image: radial-gradient(circle, #ff0081 20%, transparent 20%),\n radial-gradient(circle, transparent 10%, #ff0081 20%, transparent 20%),\n radial-gradient(circle, transparent 10%, white 20%, transparent 20%),\n radial-gradient(circle, #ff0081 20%, transparent 20%),\n radial-gradient(circle, transparent 10%, #ff0081 20%, transparent 20%),\n radial-gradient(circle, #ff0081 20%, transparent 20%),\n radial-gradient(circle, transparent 10%, #ff0081 20%, transparent 20%),\n radial-gradient(circle, #ff0081 20%, transparent 20%),\n radial-gradient(circle, transparent 10%, #ff0081 20%, transparent 20%),\n /* */\n radial-gradient(circle, transparent 10%, #ff0081 20%, transparent 20%),\n radial-gradient(circle, #ff0081 20%, transparent 20%),\n radial-gradient(circle, transparent 10%, white 20%, transparent 20%),\n radial-gradient(circle, #ff0081 20%, transparent 20%),\n radial-gradient(circle, transparent 10%, #ff0081 20%, transparent 20%),\n radial-gradient(circle, #ff0081 20%, transparent 20%),\n radial-gradient(circle, transparent 10%, white 20%, transparent 20%);\n background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,\n 10% 10%, 18% 18%, 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%,\n 20% 20%;\n background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%,\n 65% 30%, 80% 32%, 15% 60%, 83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%,\n 64% 70%, 80% 71%;\n}\n\nbutton:hover::before {\n background-position: 5% 44%, -5% 20%, 7% 5%, 23% 0%, 37% 0, 58% -2%, 80% 0%,\n 100% -2%, -5% 80%, 100% 55%, 2% 100%, 23% 100%, 42% 100%, 60% 95%, 70% 96%,\n 100% 100%;\n background-size: 0% 0%;\n transition: background-position 0.5s ease-in-out,\n background-size 0.75s ease-in-out;\n}"}]}},"actionData":null,"errors":null}