{"loaderData":{"0":null,"0-2":{"total":7074,"projects":[{"created":"2024-01-22T17:00:21.000Z","isPrivate":0,"projectId":"5b8ba6","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":44,"cssLen":2093,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n position: relative;\n display: inline-block;\n cursor: pointer;\n outline: none;\n border: 0;\n vertical-align: middle;\n text-decoration: none;\n font-family: inherit;\n font-size: 15px;\n}\n\nbutton.learn-more {\n font-weight: 600;\n color: #2c2f33;\n text-transform: uppercase;\n padding: 1.25em 2em;\n background: #f6f8fa;\n border: 2px solid #ccd6dd;\n border-radius: 0.75em;\n -webkit-transform-style: preserve-3d;\n transform-style: preserve-3d;\n -webkit-transition: background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);\n transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);\n}\n\nbutton.learn-more::before {\n position: absolute;\n content: '';\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: #e9ebee;\n border-radius: inherit;\n -webkit-box-shadow: 0 0 0 2px #ccd6dd, 0 0.625em 0 0 #ffffff;\n box-shadow: 0 0 0 2px #ccd6dd, 0 0.625em 0 0 #ffffff;\n -webkit-transform: translate3d(0, 0.75em, -1em);\n transform: translate3d(0, 0.75em, -1em);\n transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);\n}\n\nbutton.learn-more:hover {\n background: #dce0e3;\n -webkit-transform: translate(0, 0.25em);\n transform: translate(0, 0.25em);\n}\n\nbutton.learn-more:hover::before {\n -webkit-box-shadow: 0 0 0 2px #ccd6dd, 0 0.5em 0 0 #ffffff;\n box-shadow: 0 0 0 2px #ccd6dd, 0 0.5em 0 0 #ffffff;\n -webkit-transform: translate3d(0, 0.5em, -1em);\n transform: translate3d(0, 0.5em, -1em);\n}\n\nbutton.learn-more:active {\n background: #dce0e3;\n -webkit-transform: translate(0em, 0.75em);\n transform: translate(0em, 0.75em);\n}\n\nbutton.learn-more:active::before {\n -webkit-box-shadow: 0 0 0 2px #ccd6dd, 0 0 #ffffff;\n box-shadow: 0 0 0 2px #ccd6dd, 0 0 #ffffff;\n -webkit-transform: translate3d(0, 0, -1em);\n transform: translate3d(0, 0, -1em);\n}"},{"created":"2024-01-22T17:00:21.000Z","isPrivate":0,"projectId":"1cd7a3","snapshot":null,"tags":null,"title":"button by csemszepp","updated":"2024-01-22T17:00:21.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: #2db2ff;\n box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff,\n\t\t0 0 60px #2db2ff;\n}\n"},{"created":"2024-01-22T17:00:21.000Z","isPrivate":0,"projectId":"ac835e","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":615,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n --color: #560bad;\n font-family: inherit;\n display: inline-block;\n width: 6em;\n height: 2.6em;\n line-height: 2.5em;\n overflow: hidden;\n margin: 20px;\n font-size: 17px;\n z-index: 1;\n color: var(--color);\n border: 2px solid var(--color);\n border-radius: 6px;\n position: relative;\n}\n\nbutton::before {\n position: absolute;\n content: \"\";\n background: var(--color);\n width: 150px;\n height: 200px;\n z-index: -1;\n border-radius: 50%;\n}\n\nbutton:hover {\n color: white;\n}\n\nbutton:before {\n top: 100%;\n left: 100%;\n transition: .3s all;\n}\n\nbutton:hover::before {\n top: -30px;\n left: -30px;\n}"},{"created":"2024-01-22T17:00:21.000Z","isPrivate":0,"projectId":"21e2d2","snapshot":null,"tags":null,"title":"button by tarantino421","updated":"2024-01-22T17:00:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":803,"cssLen":1280,"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

","css":".box {\n --clr-shadow__border: #5987a3;\n --clr-text: #F6F4EB;\n --clr-rain: #192333;\n --clr-raindrop: #E9F8F9;\n --size: 3rem;\n position: relative;\n outline: 1px solid var(--clr-shadow__border);\n}\n\n.button {\n font-weight: 600;\n font-size: 1.5rem;\n background: transparent;\n padding: calc(var(--size) / 3) var(--size);\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),\n -2px 0px var(--clr-shadow__border), 0px -2px var(--clr-shadow__border);\n}\n\n.rain {\n width: 100%;\n height: 100%;\n bottom: 0%;\n gap: 0.6rem;\n z-index: -1;\n opacity: 0;\n transition: 0.5s ease-in-out;\n overflow: hidden;\n position: absolute;\n display: flex;\n background: var(--clr-rain);\n}\n\n.box:hover .rain {\n opacity: 1;\n}\n\n.raindrop {\n height: 1.4rem;\n min-width: 0.1rem;\n box-shadow: 60px 100px var(--clr-raindrop),-40px -90px var(--clr-raindrop);\n background-color: var(--clr-raindrop);\n animation: rain-animation calc(0.05s * var(--i)) linear infinite;\n opacity: .3;\n}\n\n@keyframes rain-animation {\n 0% {\n transform: rotate(20deg) translateY(calc(-100% * var(--i)));\n }\n\n 100% {\n transform: rotate(20deg) translateY(calc(100% * var(--i)));\n }\n}\n\n\n\n\n\n\n\n"},{"created":"2024-01-22T17:00:21.000Z","isPrivate":0,"projectId":"00923f","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":517,"cssLen":934,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".Btn {\n width: 145px;\n height: 45px;\n background: linear-gradient(-45deg, #6bc5f8, #cf59e6, #6bc5f8, #cf59e6);\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n box-shadow: 5px 5px 0px #4dc6d93d;\n background-size: 400% 400%;\n}\n\n.svgContainer {\n width: 45px;\n height: 100%;\n background-color: rgba(255, 255, 255, 0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.svgContainer svg {\n width: 16px;\n}\n\n.svgContainer svg path {\n fill: white;\n}\n\n.textContainer {\n width: 100px;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n}\n\n.Btn:hover {\n animation: gradient 5s ease infinite;\n}\n/* Button's gradient animation */\n@keyframes gradient {\n 0% {\n background-position: 0 50%;\n }\n\n 50% {\n background-position: 100% 50%;\n }\n\n 100% {\n background-position: 0 50%;\n }\n}"},{"created":"2024-01-22T17:00:21.000Z","isPrivate":0,"projectId":"0a585d","snapshot":null,"tags":null,"title":"button by ShrinilDhorda","updated":"2024-01-22T17:00:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":510,"cssLen":758,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n padding: 0.8rem 4rem;\n border: none;\n outline: none;\n font-size: 1.3rem;\n border-radius: 0.3rem;\n font-weight: 600;\n background-color: rgba(255, 255, 255, 0.953);\n position: relative;\n overflow: hidden;\n cursor: pointer;\n transition: 0.4s ease-in-out;\n}\n\n.button .text {\n position: absolute;\n left: 1.8rem;\n top: 1.3rem;\n transition: 0.4s ease-in-out;\n color: rgb(50, 50, 50);\n}\n\n.svg {\n transform: translateY(-20px) rotate(30deg);\n opacity: 0;\n width: 2rem;\n transition: 0.4s ease-in-out;\n}\n\n.button:hover {\n background-color: rgb(50, 50, 50);\n}\n\n.button:hover .svg {\n display: inline-block;\n transform: translateY(0px) rotate(0deg);\n opacity: 1;\n}\n\n.button:hover .text {\n opacity: 0;\n}\n\n.button:active {\n scale: 0.97;\n}"},{"created":"2024-01-22T17:00:21.000Z","isPrivate":0,"projectId":"74a2df","snapshot":null,"tags":null,"title":"button by SmookyDev","updated":"2024-01-22T17:00:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":403,"cssLen":2032,"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.isolation-auto {\n isolation: auto\n}\n\n.z-10 {\n z-index: 10\n}\n\n.overflow-hidden {\n overflow: hidden\n}\n\n.rounded-md {\n border-radius: 0.375rem\n}\n\n.border-2 {\n border-width: 2px\n}\n\n.border-lime-500 {\n --tw-border-opacity: 1;\n border-color: rgb(132 204 22 / var(--tw-border-opacity))\n}\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n}\n\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n\n.before\\:absolute::before {\n content: var(--tw-content);\n position: absolute\n}\n\n.before\\:-right-full::before {\n content: var(--tw-content);\n right: -100%\n}\n\n.before\\:-z-10::before {\n content: var(--tw-content);\n z-index: -10\n}\n\n.before\\:aspect-square::before {\n content: var(--tw-content);\n aspect-ratio: 1 / 1\n}\n\n.before\\:w-full::before {\n content: var(--tw-content);\n width: 100%\n}\n\n.before\\:rounded-full::before {\n content: var(--tw-content);\n border-radius: 9999px\n}\n\n.before\\:bg-lime-500::before {\n content: var(--tw-content);\n --tw-bg-opacity: 1;\n background-color: rgb(132 204 22 / var(--tw-bg-opacity))\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-700::before {\n content: var(--tw-content);\n transition-duration: 700ms\n}\n\n.before\\:hover\\:right-0:hover::before {\n content: var(--tw-content);\n right: 0px\n}\n\n.before\\:hover\\:w-full:hover::before {\n content: var(--tw-content);\n width: 100%\n}\n\n.before\\:hover\\:scale-150:hover::before {\n content: var(--tw-content);\n --tw-scale-x: 1.5;\n --tw-scale-y: 1.5;\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.before\\:hover\\:duration-700:hover::before {\n content: var(--tw-content);\n transition-duration: 700ms\n}"},{"created":"2024-01-22T17:00:21.000Z","isPrivate":0,"projectId":"44141b","snapshot":null,"tags":null,"title":"button by MusKRI","updated":"2024-01-22T17:00:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":74,"cssLen":1151,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n padding: 15px 40px;\n background: linear-gradient(to right, #09021c, #0c061d);\n color: white;\n border: 1px solid transparent;\n border-radius: 8px;\n cursor: pointer;\n transition: all 300ms ease-in-out;\n position: relative;\n isolation: isolate;\n overflow: hidden;\n}\n\n.button > span {\n position: absolute;\n z-index: -1;\n background: transparent;\n opacity: 0.5;\n width: 33.333%;\n height: 100%;\n}\n\n.button > :first-child {\n left: 0;\n top: 0;\n}\n\n.button > :last-child {\n right: 0;\n top: 0;\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n z-index: -1;\n background: hsl(236, 19%, 25%);\n opacity: 0;\n width: 10%;\n aspect-ratio: 1;\n border-radius: 50%;\n inset: 0;\n margin: auto;\n transition: opacity 1000ms 200ms ease-in-out, transform 200ms ease-in-out;\n}\n\n.button:active::before {\n transform: scale(13);\n opacity: 1;\n transition: all 400ms ease-in-out;\n}\n\n.button:has(:first-child:active)::before {\n margin-left: 0;\n}\n\n.button:has(:last-child:active)::before {\n margin-right: 0;\n}\n\n.button:has(:first-child:active)::before,\n.button:has(:last-child:active)::before {\n transition: all 400ms ease-in-out;\n}"},{"created":"2024-01-22T17:00:20.000Z","isPrivate":0,"projectId":"3d324b","snapshot":null,"tags":null,"title":"button by EcheverriaJesus","updated":"2024-01-22T17:00:20.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1073,"cssLen":2473,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n Button\n \n\n","css":".flex {\n display: flex;\n}\n.h-12 {\n height: 3rem;\n}\n.h-6 {\n height: 1.5rem;\n}\n.w-28 {\n width: 7rem;\n}\n.w-5 {\n width: 1.25rem;\n}\n.w-6 {\n width: 1.5rem;\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.items-center {\n align-items: center;\n}\n.justify-center {\n justify-content: center;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.bg-gradient-to-r {\n background-image: linear-gradient(to right, var(--tw-gradient-stops));\n}\n.from-\\[\\#fb7185\\] {\n --tw-gradient-from: #fb7185 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(251 113 133 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.via-\\[\\#e11d48\\] {\n --tw-gradient-to: rgb(225 29 72 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from),\n #e11d48 var(--tw-gradient-via-position), var(--tw-gradient-to);\n}\n.to-\\[\\#be123c\\] {\n --tw-gradient-to: #be123c var(--tw-gradient-to-position);\n}\n.fill-white {\n fill: #fff;\n}\n.font-semibold {\n font-weight: 600;\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.shadow-2xl {\n --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.duration-300 {\n transition-duration: 300ms;\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))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.hover\\:from-\\[\\#be123c\\]:hover {\n --tw-gradient-from: #be123c var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(190 18 60 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.hover\\:to-\\[\\#fb7185\\]:hover {\n --tw-gradient-to: #fb7185 var(--tw-gradient-to-position);\n}\n.hover\\:shadow-xl:hover {\n --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),\n 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),\n 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.hover\\:shadow-red-500:hover {\n --tw-shadow-color: #ef4444;\n --tw-shadow: var(--tw-shadow-colored);\n}\n"},{"created":"2024-01-22T17:00:20.000Z","isPrivate":0,"projectId":"9d53f6","snapshot":null,"tags":null,"title":"button by Codecite","updated":"2024-01-22T17:00:20.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":48,"cssLen":484,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n border: 0 solid;\n cursor: pointer;\n font-family: system-ui;\n font-size: 100%;\n background: linear-gradient(90deg, blue, red);\n border-radius: 999px;\n font-weight: 900;\n padding: 1.8rem 5rem;\n position: relative;\n text-transform: uppercase;\n}\n\n.btn span {\n background: #1e293b;\n border-radius: 999px;\n color: #fff;\n display: grid;\n inset: 5px;\n place-items: center;\n position: absolute;\n transition: background 0.3s;\n}\n\n.btn:hover span {\n background: none;\n}"},{"created":"2024-01-22T17:00:20.000Z","isPrivate":0,"projectId":"d81951","snapshot":null,"tags":null,"title":"button by satyamchaudharydev","updated":"2024-01-22T17:00:20.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":34,"cssLen":1617,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n border: none;\n width: 140px;\n height: 55px;\n color: #fff;\n font-family: \"Arial\";\n letter-spacing: 1.2px;\n font-weight: bold;\n z-index: 1;\n display: flex;\n background: #000;\n position: relative;\n}\n\nbutton p {\n margin: 0 auto;\n align-self: center;\n font-size: 1.5em;\n text-align: center;\n}\n\nbutton::after, button::before {\n position: absolute;\n content: \"\";\n width: 100%;\n z-index: -1;\n height: 10%;\n clip-path: polygon(0% 74%, 4% 75%, 8% 76%, 11% 77%, 15% 78%, 20% 78%, 25% 77%, 32% 77%, 37% 75%, 40% 74%, 43% 74%, 46% 73%, 52% 72%, 57% 72%, 65% 74%, 66% 75%, 71% 78%, 75% 82%, 81% 86%, 83% 88%, 88% 91%, 90% 94%, 94% 96%, 98% 98%, 100% 100%, 82% 100%, 0 100%);\n background: #97c45d;\n transition: 0.2s cubic-bezier(.02,.02,.23,.73);\n}\n\nbutton::after {\n bottom: 0;\n}\n\nbutton::before {\n transform: rotate(180deg);\n}\n\nbutton:hover::after {\n clip-path: path('M0 199.88C8.33 270.71 16.67 306.13 25 306.13C37.5 306.13 35.91 231.4 50 231.13C64.09 230.85 62.5 284.25 75 284.25C87.5 284.25 87.17 208.05 100 212.38C112.83 216.7 112.71 300.8 125 300.47C137.29 300.13 137.76 239.04 150.48 237.38C163.19 235.71 162.16 293.63 174.54 293.63C182.79 293.63 191.28 262.38 200 199.88L200 0.13L0 0.13L0 199.88Z');\n height: 30%;\n}\n\nbutton:hover::before {\n clip-path: path('M0 199.88C8.33 270.71 16.67 306.13 25 306.13C37.5 306.13 35.91 231.4 50 231.13C64.09 230.85 62.5 284.25 75 284.25C87.5 284.25 87.17 208.05 100 212.38C112.83 216.7 112.71 300.8 125 300.47C137.29 300.13 137.76 239.04 150.48 237.38C163.19 235.71 162.16 293.63 174.54 293.63C182.79 293.63 191.28 262.38 200 199.88L200 0.13L0 0.13L0 199.88Z');\n height: 100%;\n}\n"},{"created":"2024-01-22T17:00:20.000Z","isPrivate":0,"projectId":"219512","snapshot":null,"tags":null,"title":"button by Deri-Kurniawan","updated":"2024-01-22T17:00:20.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":509,"cssLen":3169,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n HOVER ME!\n\n","css":".relative{position:relative}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:9999px}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.px-8{padding-left:2rem;padding-right:2rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-base{font-size:1rem;line-height:1.5rem}.font-bold{font-weight:700}.text-black{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity))}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.before\\:absolute::before{content:var(--tw-content);position:absolute}.before\\:-left-full::before{content:var(--tw-content);left:-100%}.before\\:top-0::before{content:var(--tw-content);top:0px}.before\\:z-\\[-1\\]::before{content:var(--tw-content);z-index:-1}.before\\:h-full::before{content:var(--tw-content);height:100%}.before\\:w-full::before{content:var(--tw-content);width:100%}.before\\:rounded-full::before{content:var(--tw-content);border-radius:9999px}.before\\:bg-gradient-to-r::before{content:var(--tw-content);background-image:linear-gradient(to right, var(--tw-gradient-stops))}.before\\:from-blue-500::before{content:var(--tw-content);--tw-gradient-from:#3b82f6 var(--tw-gradient-from-position);--tw-gradient-to:rgb(59 130 246 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.before\\:to-blue-300::before{content:var(--tw-content);--tw-gradient-to:#93c5fd var(--tw-gradient-to-position)}.before\\:transition-all::before{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.before\\:duration-500::before{content:var(--tw-content);transition-duration:500ms}.before\\:ease-in-out::before{content:var(--tw-content);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.hover\\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;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))}.hover\\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.hover\\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.hover\\:before\\:left-0:hover::before{content:var(--tw-content);left:0px}.active\\:scale-90:active{--tw-scale-x:.9;--tw-scale-y:.9;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))}"}]}},"actionData":null,"errors":null}