{"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":"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":"f4ac1f","snapshot":null,"tags":null,"title":"button by LightAndy1","updated":"2024-01-22T17:00:47.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":1180,"jsLen":0,"cssLen":620,"pureCSS":1,"html":"\n","css":".signin {\n float: right;\n max-width: 320px;\n display: flex;\n padding: 0.5rem 1.4rem;\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 700;\n text-align: center;\n font-family: \"Montserrat\", sans-serif;\n vertical-align: middle;\n align-items: center;\n border-radius: 0.5rem;\n border: 1px solid rgba(255, 255, 255, 0.25);\n gap: 0.75rem;\n color: #c4d2dc;\n background-color: #19242b;\n cursor: pointer;\n transition: all 0.25s cubic-bezier(0, 0.87, 0.12, 1);\n}\n\n.signin:hover {\n transform: scale(1.025);\n}\n\n.signin:active {\n transform: scale(0.975);\n}\n\nbutton svg {\n height: 24px;\n width: auto;\n}\n"},{"created":"2024-01-22T17:00:46.000Z","isPrivate":0,"projectId":"12848a","snapshot":null,"tags":null,"title":"button by ercnersoy","updated":"2024-01-22T17:00:46.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":43,"jsLen":0,"cssLen":831,"pureCSS":1,"html":"\n","css":".button {\n cursor: pointer;\n padding: 1rem 4rem;\n border: 0;\n background-color: rebeccapurple;\n color: white;\n box-shadow: 0px 10px 0px 0px rgb(68, 37, 99);\n transition: all 0.9s ease-in-out;\n font-weight: 600;\n font-family: \"Lucida Sans\", \"Lucida Sans Regular\", \"Lucida Grande\",\n \"Lucida Sans Unicode\", Geneva, Verdana, sans-serif;\n font-size: 1rem;\n position: relative;\n}\n.button:hover {\n box-shadow: 0px 10px 0px 0px rgb(122, 71, 173);\n background-color: rgb(80, 31, 129);\n}\n.button:active {\n box-shadow: 0px 5px 0px 0px rgb(122, 71, 173);\n text-shadow: 0 0px 0px #000;\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n left: 0;\n bottom: 0px;\n box-shadow: 0px 10px 0px 0px rgb(229, 104, 9);\n width: 0;\n height: 10px;\n transition: all 0.9s ease-in-out;\n}\n.button:hover::before {\n width: 100%;\n}\n"},{"created":"2024-01-22T17:00:46.000Z","isPrivate":0,"projectId":"3db11a","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:46.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":358,"jsLen":0,"cssLen":695,"pureCSS":1,"html":"","css":".button {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 6px 12px;\n gap: 4px;\n height: 32px;\n width: 81px;\n border: none;\n background: #1b1b1cd0;\n border-radius: 20px;\n cursor: pointer;\n}\n\n.lable {\n line-height: 22px;\n font-size: 17px;\n color: #DE8A2A;\n font-family: sans-serif;\n letter-spacing: 1px;\n}\n\n.button:hover {\n background: #1b1b1cea;\n}\n\n.button:hover .svg-icon {\n animation: rotate 1.3s linear infinite;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n\n 25% {\n transform: rotate(10deg);\n }\n\n 50% {\n transform: rotate(0deg);\n }\n\n 75% {\n transform: rotate(-10deg);\n }\n\n 100% {\n transform: rotate(0deg);\n }\n}"},{"created":"2024-01-22T17:00:46.000Z","isPrivate":0,"projectId":"4cf177","snapshot":null,"tags":null,"title":"button by felipesntr","updated":"2024-01-22T17:00:46.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":1370,"jsLen":0,"cssLen":687,"pureCSS":1,"html":"\n","css":"button {\n color: rgb(53, 188, 250);\n padding: 1em 2em 1em 2em;\n border: 2px solid rgb(53, 188, 250);\n border-radius: 0 1em 1em 1em;\n position: relative;\n overflow: hidden;\n transition: 0.3s;\n font-size: 1rem;\n font-weight: 600;\n cursor: pointer;\n}\n\nbutton:hover {\n border: 2px solid rgb(75, 228, 157);\n}\n\nbutton span {\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: rgb(75, 228, 157);\n transition: ease-in-out 0.3s;\n color: #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1em;\n}\n\nbutton span svg {\n width: 1.1em;\n height: 1.1em;\n margin-right: 0.5em;\n}\n\nbutton:hover span {\n left: 0%;\n}\n"},{"created":"2024-01-22T17:00:46.000Z","isPrivate":0,"projectId":"69e460","snapshot":null,"tags":null,"title":"button by Yaya12085","updated":"2024-01-22T17:00:46.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":24,"jsLen":0,"cssLen":1533,"pureCSS":1,"html":" ","css":"button {\n font-size: 28px;\n color: rgb(35, 75, 83);\n background-color: rgb(217, 238, 242);\n background-image: linear-gradient(180deg, rgb(201, 194, 240) 30%, transparent 70%);\n background-repeat: no-repeat;\n background-position: center 45%;\n background-size: 100% 200%;\n padding: 10px 30px;\n border-radius: 30px;\n border: none;\n box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px;\n position: relative;\n transition: all 0.5s ease;\n outline: none;\n}\n\nbutton::before, button::after {\n content: \"\";\n inset: 0;\n position: absolute;\n border-radius: 5em;\n}\n\nbutton::before {\n background-image: radial-gradient(ellipse, rgba(204, 246, 255, 0.8) 20%, transparent 50%, transparent 200%), linear-gradient(90deg, #404040 -10%, transparent 30%, transparent 70%, #404040 110%);\n box-shadow: inset 0 0.25em 0.75em rgba(0, 0, 0, 0.8), inset 0 -0.05em 0.2em rgba(255, 255, 255, 0.4), inset 0 -1px 3px rgba(25, 196, 230, 0.75);\n background-blend-mode: overlay;\n background-repeat: no-repeat;\n background-size: 200% 80%, cover;\n background-position: center 220%;\n mix-blend-mode: overlay;\n filter: blur(0);\n}\n\nbutton::after {\n background: linear-gradient(180deg, rgba(213, 204, 255, 0.726), rgba(92, 74, 181, 0.75) 40%, transparent 80%);\n top: 0.075em;\n left: 0.75em;\n right: 0.75em;\n bottom: 1.4em;\n filter: blur(1px);\n mix-blend-mode: screen;\n}\n\nbutton:hover, button:active, button:focus {\n outline: none;\n box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;\n background-position: center calc( 45% - 0.75em );\n}\n"},{"created":"2024-01-22T17:00:46.000Z","isPrivate":0,"projectId":"6b0a0b","snapshot":null,"tags":null,"title":"button by Sujanthapast0","updated":"2024-01-22T17:00:46.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":27,"jsLen":0,"cssLen":444,"pureCSS":1,"html":"","css":"button {\n border: 1px solid black;\n padding: 12px 30px 12px 30px;\n border-radius: 30px;\n background-color: #fa70fa;\n font-weight: bolder;\n font-size: 15px;\n box-shadow: 0px 0px 1px;\n transform: all 2s esase;\n transition-duration: .3s;\n}\n\nbutton:hover {\n transform: translateY(-10px);\n box-shadow: 0px 7px 1px rgb(0, 0, 0);\n border: 1px solid black;\n}\n\nbutton:active {\n transform: translateY(10px);\n box-shadow: 0px 0px 1px;\n}\n \n\n"},{"created":"2024-01-22T17:00:46.000Z","isPrivate":0,"projectId":"6ba912","snapshot":null,"tags":null,"title":"button by RichestsoftSukhbir","updated":"2024-01-22T17:00:46.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":46,"jsLen":0,"cssLen":543,"pureCSS":1,"html":"\n","css":".button {\n padding: 12px 25px;\n background: #fff;\n border: 1px solid #121212;\n color: #121212;\n font-weight: 700;\n cursor: pointer;\n border-radius: 50px;\n position: relative;\n z-index: 2;\n overflow: hidden;\n transition: all 0.5s ease;\n}\n.button::after {\n content: \"\";\n width: 100%;\n height: 100%;\n background: #121212;\n position: absolute;\n bottom: -100%;\n left: 0;\n border-radius: 50%;\n z-index: -1;\n transition: all 0.5s ease;\n}\n.button:hover {\n color: #fff;\n}\n.button:hover::after {\n bottom: 0;\n border-radius: 0;\n}\n"},{"created":"2024-01-22T17:00:46.000Z","isPrivate":0,"projectId":"a45349","snapshot":null,"tags":null,"title":"button by Peary74","updated":"2024-01-22T17:00:46.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":334,"jsLen":0,"cssLen":502,"pureCSS":1,"html":"","css":".btn {\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 10px;\n border: none;\n background-color: transparent;\n position: relative;\n}\n\n.btn:hover > .icon {\n transform: scale(1.2);\n cursor: pointer;\n transition: .2s linear;\n}\n\n.btn:focus > .icon {\n fill: #fd1853;\n animation: grosseur .2s linear;\n}\n\n@keyframes grosseur {\n 0% {\n width: 50px;\n height: 50px;\n fill: #fd1853;\n }\n\n 100% {\n width: 30px;\n height: 30px;\n fill: #fd1853;\n }\n}\n\n\n\n\n\n"},{"created":"2024-01-22T17:00:46.000Z","isPrivate":0,"projectId":"b463fa","snapshot":null,"tags":null,"title":"button by Laurits123456","updated":"2024-01-22T17:00:46.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":176,"jsLen":0,"cssLen":1122,"pureCSS":1,"html":"\n \n \n \n \n","css":"/*pushing a hamburger menu into a pillow texture like background*/\n\n.menuButton {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n gap: 13%;\n color: #090909;\n width: 3.5em;\n height: 3.5em;\n border-radius: 0.5em;\n background: #171717;\n border: 1px solid #171717;\n transition: all .3s;\n box-shadow: inset 4px 4px 12px #3a3a3a,\n inset -4px -4px 12px #000000;\n}\n\n.menuButton:hover {\n border: 1px solid black;\n}\n\n.menuButton:active {\n color: #666;\n box-shadow: 6px 6px 12px #3a3a3a,\n -6px -6px 12px #000000;\n}\n\ninput[type = \"checkbox\"] {\n -webkit-appearance: none;\n display: none;\n visibility: hidden;\n}\n\n.menuButton span {\n width: 30px;\n height: 4px;\n background: rgb(200,200,200);\n border-radius: 100px;\n transition: 0.3s ease;\n}\n\ninput[type]:checked ~ span.top {\n transform: translateY(290%)rotate(45deg);\n width: 40px;\n}\n\ninput[type]:checked ~ span.bot {\n transform: translateY(-270%) rotate(-45deg);\n width: 40px;\n box-shadow: 0 0 10px #495057;\n}\n\ninput[type]:checked ~ span.mid {\n transform: translateX(-20px);\n opacity: 0;\n}"},{"created":"2024-01-22T17:00:46.000Z","isPrivate":0,"projectId":"b810b2","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:46.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":50,"jsLen":0,"cssLen":471,"pureCSS":1,"html":"","css":".cyberpunk-button {\n background-color: #2f3640;\n color: #fff;\n border: 2px solid #ff7979;\n border-radius: 5px;\n padding: 10px 15px;\n font-size: 18px;\n text-transform: uppercase;\n letter-spacing: 2px;\n font-weight: bold;\n box-shadow: 2px 2px 10px #ff7979;\n transition: all 0.2s ease-in-out;\n}\n\n.cyberpunk-button:hover {\n background-color: #ff7979;\n color: #2f3640;\n border-color: #2f3640;\n box-shadow: 2px 2px 20px #2f3640;\n transform: translateY(-2px);\n}\n"},{"created":"2024-01-22T17:00:46.000Z","isPrivate":0,"projectId":"badc43","snapshot":null,"tags":null,"title":"button by GetYourCode8605","updated":"2024-01-22T17:00:46.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":76,"jsLen":0,"cssLen":1159,"pureCSS":1,"html":"","css":".glow-on-hover {\n width: 220px;\n height: 50px;\n border: none;\n outline: none;\n color: #fff;\n background: rgb(17, 17, 17);\n cursor: pointer;\n position: relative;\n z-index: 0;\n border-radius: 10px;\n font-weight: 600;\n}\n\n.glow-on-hover:before {\n content: '';\n background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);\n position: absolute;\n top: -2px;\n left: -2px;\n background-size: 400%;\n z-index: -1;\n filter: blur(5px);\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n animation: glowing_54134 20s linear infinite;\n opacity: 0;\n transition: opacity .3s ease-in-out;\n border-radius: 10px;\n}\n\n.glow-on-hover:active {\n color: #000\n}\n\n.glow-on-hover:active:after {\n background: transparent;\n}\n\n.glow-on-hover:hover:before {\n opacity: 1;\n}\n\n.glow-on-hover:after {\n z-index: -1;\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n background: #111;\n left: 0;\n top: 0;\n border-radius: 10px;\n}\n\n@keyframes glowing_54134 {\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}"}]}},"actionData":null,"errors":null}