{"loaderData":{"0":null,"0-17":{"tags":[{"name":"button","label":"Button","count":1289},{"name":"checkbox","label":"Checkbox","count":139},{"name":"loader","label":"Loader","count":732},{"name":"switch","label":"Switch","count":229},{"name":"card","label":"Card","count":648},{"name":"input","label":"Input","count":158},{"name":"radio-button","label":"Radio Button","count":37},{"name":"form","label":"Form","count":157},{"name":"pattern","label":"Pattern","count":83},{"name":"tooltip","label":"Tooltip","count":33},{"name":"twitter","label":"Twitter","count":5},{"name":"runjscollect","label":"RunJS Collect","count":10}]},"0-17-0":{"total":1289,"projects":[{"created":"2024-01-22T17:00:47.000Z","isPrivate":0,"projectId":"030fd1","snapshot":null,"tags":null,"title":"button by seyed-mohsen-mousavi","updated":"2024-01-22T17:00:47.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":604,"jsLen":0,"cssLen":2050,"pureCSS":1,"html":"\n \n \n \n\n Delete\n\n","css":".mr-2 {\n margin-right: 0.5rem;\n}\n.inline-flex {\n display: inline-flex;\n}\n.h-5 {\n height: 1.25rem;\n}\n.w-5 {\n width: 1.25rem;\n}\n.items-center {\n align-items: center;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.bg-red-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(220 38 38 / var(--tw-bg-opacity));\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.font-medium {\n font-weight: 500;\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.transition {\n transition-property: color, background-color, border-color, fill, stroke,\n opacity, box-shadow, transform, filter, -webkit-text-decoration-color,\n -webkit-backdrop-filter;\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,\n backdrop-filter;\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,\n backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.delay-75 {\n transition-delay: 75ms;\n}\n.ease-in-out {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.hover\\:-translate-y-1:hover {\n --tw-translate-y: -0.25rem;\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\\:scale-110:hover {\n --tw-scale-x: 1.1;\n --tw-scale-y: 1.1;\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\\:bg-red-700:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(185 28 28 / var(--tw-bg-opacity));\n}\n"},{"created":"2024-01-22T17:00:47.000Z","isPrivate":0,"projectId":"34f1c0","snapshot":null,"tags":null,"title":"button by pote-fu","updated":"2024-01-22T17:00:47.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":122,"jsLen":0,"cssLen":822,"pureCSS":1,"html":"","css":"button {\n font-size: 17px;\n padding: 1em 2.7em;\n font-weight: 500;\n background: rgb(0,71,157);\n background: linear-gradient(90deg, rgba(0,71,157,1) 0%, rgba(23,178,255,1) 100%);\n color: #000;\n font-weight: 900;\n border: none;\n position: relative;\n overflow: hidden;\n border-radius: 0.6em;\n box-shadow: 0 0 10px #7f7f7f;\n transition: 0.2s;\n}\n\n.label {\n position: relative;\n top: -1px;\n}\n\n.transition {\n transition-timing-function: cubic-bezier(0.8, 0, 0.2, 1);\n transition-duration: 400ms;\n background: #ffffff;\n border-radius: 9999px;\n width: 10em;\n height: 10em;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n}\n\nbutton:hover .transition {\n width: 0;\n height: 0;\n}\n\nbutton:hover {\n transition: 0.2s;\n color: #fff;\n}\n\nbutton:active {\n transform: scale(0.97);\n}"},{"created":"2024-01-22T17:00:47.000Z","isPrivate":0,"projectId":"4fe1b2","snapshot":null,"tags":null,"title":"button by faxriddin20","updated":"2024-01-22T17:00:47.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":1243,"jsLen":0,"cssLen":2856,"pureCSS":1,"html":"\n","css":".btn {\n height: 4em;\n width: 12em;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border: 0px solid black;\n cursor: pointer;\n font-family: sans-serif;\n font-weight: bold;\n}\n\n.wrapper {\n height: 2em;\n width: 8em;\n position: relative;\n background: transparent;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.text {\n font-size: 17px;\n z-index: 1;\n color: #000;\n padding: 4px 12px;\n border-radius: 4px;\n background: rgba(255, 255, 255, 0.7);\n transition: none 0.5s;\n}\n\n.flower {\n display: grid;\n grid-template-columns: 1em 1em;\n position: absolute;\n transition: none 0.5s;\n}\n\n.flower1 {\n top: -12px;\n left: -13px;\n transform: rotate(5deg);\n}\n\n.flower2 {\n bottom: -5px;\n left: 8px;\n transform: rotate(35deg);\n}\n\n.flower3 {\n bottom: -15px;\n transform: rotate(0deg);\n}\n\n.flower4 {\n top: -14px;\n transform: rotate(15deg);\n}\n\n.flower5 {\n right: 11px;\n top: -3px;\n transform: rotate(25deg);\n}\n\n.flower6 {\n right: -15px;\n bottom: -15px;\n transform: rotate(30deg);\n}\n\n.petal {\n height: 1em;\n width: 1em;\n border-radius: 40% 70% / 7% 90%;\n background: violet;\n border: 0.5px solid purple;\n z-index: 0;\n transition: width 0.4s, height 0.4s step-start;\n}\n\n.two {\n transform: rotate(90deg);\n}\n\n.three {\n transform: rotate(270deg);\n}\n\n.four {\n transform: rotate(180deg);\n}\n\n.btn:hover .petal {\n background: violet;\n border: 0.5px solid purple;\n}\n\n.btn:hover .flower {\n grid-template-columns: 1.5em 1.5em;\n}\n\n.btn:hover .flower .petal {\n width: 1.5em;\n height: 1.5em;\n}\n\n.btn:hover .text {\n background: rgba(255, 255, 255, 0.4);\n}\n\n.btn:hover div.flower1 {\n animation: 15s linear 0s normal none infinite running flower1;\n}\n\n@keyframes flower1 {\n 0% {\n transform: rotate(5deg);\n }\n\n 100% {\n transform: rotate(365deg);\n }\n}\n\n.btn:hover div.flower2 {\n animation: 13s linear 1s normal none infinite running flower2;\n}\n\n@keyframes flower2 {\n 0% {\n transform: rotate(35deg);\n }\n\n 100% {\n transform: rotate(-325deg);\n }\n}\n\n.btn:hover div.flower3 {\n animation: 16s linear 1s normal none infinite running flower3;\n}\n\n@keyframes flower3 {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.btn:hover div.flower4 {\n animation: 17s linear 1s normal none infinite running flower4;\n}\n\n@keyframes flower4 {\n 0% {\n transform: rotate(15deg);\n }\n\n 100% {\n transform: rotate(375deg);\n }\n}\n\n.btn:hover div.flower5 {\n animation: 20s linear 1s normal none infinite running flower5;\n}\n\n@keyframes flower5 {\n 0% {\n transform: rotate(25deg);\n }\n\n 100% {\n transform: rotate(-335deg);\n }\n}\n\n.btn:hover div.flower6 {\n animation: 15s linear 1s normal none infinite running flower6;\n}\n\n@keyframes flower6 {\n 0% {\n transform: rotate(30deg);\n }\n\n 100% {\n transform: rotate(390deg);\n }\n}\n"},{"created":"2024-01-22T17:00:47.000Z","isPrivate":0,"projectId":"66a09b","snapshot":null,"tags":null,"title":"button by ramdaniAli","updated":"2024-01-22T17:00:47.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":27,"jsLen":0,"cssLen":982,"pureCSS":1,"html":"","css":"button {\n color: #4181f098;\n text-transform: uppercase;\n letter-spacing: 5px;\n /* border: none; */\n font-weight: bold;\n font-size: 17px;\n padding: 1rem 2rem;\n border: 1px solid #ffffff1f;\n border-radius: 20px;\n background: #ebebeb;\n -webkit-box-shadow: 5px 5px 15px #cccccc,\n -5px -5px 15px #ffffff;\n box-shadow: 5px 5px 15px #cccccc,\n -5px -5px 15px #ffffff;\n -webkit-transition: box-shadow 0.3s ease-in-out;\n transition: box-shadow 0.3s ease-in-out;\n}\n\nbutton:hover {\n color: #357af0;\n background: linear-gradient(145deg, #d4d4d4, #fbfbfb);\n -webkit-box-shadow: 5px 5px 15px #cccccc,\n -5px -5px 15px #ffffff;\n box-shadow: 5px 5px 15px #cccccc,\n -5px -5px 15px #ffffff;\n}\n\nbutton:active {\n color: #357af0;\n background: #ebebeb;\n -webkit-box-shadow: inset 5px 5px 15px #cccccc,\n inset -5px -5px 15px #ffffff;\n box-shadow: inset 5px 5px 15px #cccccc,\n inset -5px -5px 15px #ffffff;\n}"},{"created":"2024-01-22T17:00:47.000Z","isPrivate":0,"projectId":"68e169","snapshot":null,"tags":null,"title":"button by Pradeepsaranbishnoi","updated":"2024-01-22T17:00:47.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":86,"jsLen":0,"cssLen":2073,"pureCSS":1,"html":"

\n\t\t

\n\t\n\t

\t\t","css":".container .btn {\n position: relative;\n top: 0;\n left: 0;\n width: 160px;\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: #000;\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, /*chnage 1*/\n.container .btn:nth-child(1)::after {\n background: #ff1f71;\n box-shadow: 0 0 5px #ff1f71, 0 0 15px #ff1f71, 0 0 30px #ff1f71,\n\t\t0 0 60px #ff1f71;\n}"},{"created":"2024-01-22T17:00:47.000Z","isPrivate":0,"projectId":"75ad37","snapshot":null,"tags":null,"title":"button by ercnersoy","updated":"2024-01-22T17:00:47.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":101,"jsLen":0,"cssLen":1131,"pureCSS":1,"html":"","css":".button {\n width: 200px;\n padding: 20px 40px;\n position: relative;\n display: block;\n text-decoration: none;\n overflow: hidden;\n border: 0;\n cursor: pointer;\n border-radius: 2rem;\n box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.5);\n}\n\n.button:hover .wave {\n top: -120px;\n}\n\n.text {\n position: relative;\n z-index: 1;\n color: white;\n font-size: 15px;\n letter-spacing: 3px;\n font-weight: 600;\n}\n\n.wave {\n width: 200px;\n height: 200px;\n background-color: #27a9ff;\n box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);\n position: absolute;\n left: 0;\n top: -70px;\n transition: 0.4s;\n}\n\n.wave::before, a .wave::after {\n width: 200%;\n height: 200%;\n content: \"\";\n position: absolute;\n top: 0;\n left: 50%;\n transform: translate(-50%, -75%);\n}\n\n.wave::before {\n border-radius: 45%;\n background-color: #0581b3;\n animation: wave 5s linear infinite;\n}\n\n.wave::after {\n border-radius: 40%;\n background-color: rgba(20, 20, 20, 0.5);\n animation: wave 10s linear infinite;\n}\n\n@keyframes wave {\n 0% {\n transform: translate(-50%, -75%) rotate(0deg);\n }\n\n 100% {\n transform: translate(-50%, -75%) rotate(300deg);\n }\n}"},{"created":"2024-01-22T17:00:47.000Z","isPrivate":0,"projectId":"7a7bb3","snapshot":null,"tags":null,"title":"button by Javierrocadev","updated":"2024-01-22T17:00:47.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":931,"jsLen":0,"cssLen":3029,"pureCSS":1,"html":"\n Hover me!\n \n \n \n Explore!\n\n","css":".absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.-left-2 {\n left: -0.5rem;\n}\n.-top-8 {\n top: -2rem;\n}\n.left-6 {\n left: 1.5rem;\n}\n.top-2 {\n top: 0.5rem;\n}\n.top-2\\.5 {\n top: 0.625rem;\n}\n.z-10 {\n z-index: 10;\n}\n.h-12 {\n height: 3rem;\n}\n.h-32 {\n height: 8rem;\n}\n.w-32 {\n width: 8rem;\n}\n.w-36 {\n width: 9rem;\n}\n.origin-left {\n transform-origin: left;\n}\n.rotate-12 {\n --tw-rotate: 12deg;\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.scale-x-0 {\n --tw-scale-x: 0;\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.transform {\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.cursor-pointer {\n cursor: pointer;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.border-none {\n border-style: none;\n}\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity));\n}\n.bg-indigo-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(129 140 248 / var(--tw-bg-opacity));\n}\n.bg-indigo-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(79 70 229 / var(--tw-bg-opacity));\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.p-2 {\n padding: 0.5rem;\n}\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.opacity-0 {\n opacity: 0;\n}\n.transition-transform {\n transition-property: transform;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-100 {\n transition-duration: 100ms;\n}\n.duration-1000 {\n transition-duration: 1000ms;\n}\n.duration-500 {\n transition-duration: 500ms;\n}\n.duration-700 {\n transition-duration: 700ms;\n}\n.group:hover .group-hover\\:scale-x-100 {\n --tw-scale-x: 1;\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.group:hover .group-hover\\:scale-x-50 {\n --tw-scale-x: 0.5;\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.group:hover .group-hover\\:opacity-100 {\n opacity: 1;\n}\n.group:hover .group-hover\\:duration-1000 {\n transition-duration: 1000ms;\n}\n.group:hover .group-hover\\:duration-500 {\n transition-duration: 500ms;\n}\n.group:hover .group-hover\\:duration-700 {\n transition-duration: 700ms;\n}\n"},{"created":"2024-01-22T17:00:47.000Z","isPrivate":0,"projectId":"7ef6c6","snapshot":null,"tags":null,"title":"button by ArturCodeCraft","updated":"2024-01-22T17:00:47.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":127,"jsLen":0,"cssLen":1360,"pureCSS":1,"html":"

\n \n

","css":"/* ============================ */\nbutton {\n border: none;\n background: none;\n padding: 0;\n margin: 0;\n cursor: pointer;\n font-family: inherit;\n}\n/* ============================ */\n/*