{"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:48.000Z","isPrivate":0,"projectId":"48177b","snapshot":"https://s1.qingting.work/runjs/f890594c7f56.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by benjimich","updated":"2024-01-24T03:03:40.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":867,"jsLen":0,"cssLen":713,"pureCSS":1,"html":"

\n \n \n \n \n \n \n \n \n \n \n

","css":".container {\n display: inline-flex;\n position: relative;\n}\n\n.button {\n cursor: pointer;\n background: none;\n border: none;\n border-radius: 8px;\n padding: .5em 1.5em;\n font-size: 20px;\n font-weight: 600;\n color: #7f5af0;\n transition: all .3s ease;\n}\n\n.arrow {\n fill: #94a1b2;\n position: absolute;\n pointer-events: none;\n width: 24px;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n\n.button:hover {\n letter-spacing: 2px;\n}\n\n.button:hover ~.second {\n opacity: .66;\n right: -20px;\n transition-delay: 50ms;\n}\n\n.button:hover ~.third {\n opacity: .33;\n right: -40px;\n transition-delay: 100ms;\n}\n\n.second, \n.third {\n opacity: 0;\n}"},{"created":"2024-01-22T17:00:48.000Z","isPrivate":0,"projectId":"6b675e","snapshot":null,"tags":null,"title":"button by boryanakrasteva","updated":"2024-01-22T17:00:48.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":389,"jsLen":0,"cssLen":710,"pureCSS":1,"html":"","css":".btn {\n background-color: transparent;\n position: relative;\n border: none;\n}\n\n.btn::after {\n content: 'delete';\n position: absolute;\n top: -130%;\n left: 50%;\n transform: translateX(-50%);\n width: fit-content;\n height: fit-content;\n background-color: rgb(168, 7, 7);\n padding: 4px 8px;\n border-radius: 5px;\n transition: .2s linear;\n transition-delay: .2s;\n color: white;\n text-transform: uppercase;\n font-size: 12px;\n opacity: 0;\n visibility: hidden;\n}\n\n.icon {\n transform: scale(1.2);\n transition: .2s linear;\n}\n\n.btn:hover > .icon {\n transform: scale(1.5);\n}\n\n.btn:hover > .icon path {\n fill: rgb(168, 7, 7);\n}\n\n.btn:hover::after {\n visibility: visible;\n opacity: 1;\n top: -160%;\n}\n"},{"created":"2024-01-22T17:00:48.000Z","isPrivate":0,"projectId":"8b9272","snapshot":null,"tags":null,"title":"button by glisovic01","updated":"2024-01-22T17:00:48.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":39,"jsLen":0,"cssLen":728,"pureCSS":1,"html":"","css":".btn {\n display: inline-block;\n font-family: sans-serif;\n font-weight: 600;\n font-size: 16px;\n color: #fff;\n margin: 1rem auto;\n padding: 0.7rem 2rem;\n border-radius: 30em;\n border-style: none;\n position: relative;\n z-index: 1;\n overflow: hidden;\n text-decoration: none;\n text-transform: uppercase;\n letter-spacing: 2px;\n background-color: transparent;\n box-shadow: 1px 1px 12px #000000;\n}\n\n.btn::before {\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n background-color: #fff;\n transform: translateX(-101%);\n transition: all .3s ease;\n z-index: -1;\n}\n\n.btn:hover {\n color: #272727;\n transition: all .3s ease;\n}\n\n.btn:hover::before {\n transform: translateX(0);\n}"},{"created":"2024-01-22T17:00:48.000Z","isPrivate":0,"projectId":"9e0478","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:48.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":45,"jsLen":0,"cssLen":658,"pureCSS":1,"html":"","css":".button {\n display: flex;\n align-items: center;\n justify-content: center;\n line-height: 1;\n text-decoration: none;\n color: #0000FF;\n font-size: 17px;\n border-radius: 5px;\n width: 160px;\n height: 40px;\n border: 1px solid #0000FF;\n position: relative;\n transition: 0.3s;\n background-color: #ffffff;\n font-weight: 600;\n}\n\n.button::before {\n content: \"FREE\";\n display: block;\n font-size: 13px;\n background-color: #0000FF;\n color: #fff;\n border-radius: 3px;\n padding: 3px 5px;\n position: absolute;\n top: 0;\n left: 0;\n transform: translate(-5px, -30%);\n transition: .3s;\n}\n\n.button:hover::before {\n transform: translate(-5px, -50%);\n}\n\n"},{"created":"2024-01-22T17:00:48.000Z","isPrivate":0,"projectId":"9fd887","snapshot":null,"tags":null,"title":"button by Cevorob","updated":"2024-01-22T17:00:48.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":3022,"jsLen":0,"cssLen":585,"pureCSS":1,"html":"","css":"button {\n border: 0;\n background: ghostwhite;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1em 1em 1em 3em;\n position: relative;\n overflow: hidden;\n font-size: 17px;\n font-family: inherit;\n border-radius: 12px;\n box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;\n}\n\nbutton svg {\n position: absolute;\n left: .4em;\n width: 40px;\n height: 40px;\n transform: rotateY(-180deg);\n transition: transform .4s cubic-bezier(0.68, -0.6, 0.32, 1.6);\n}\n\nbutton:hover svg {\n transform: rotateY(-180deg) translateX(-.25em);\n}\n\nbutton:active {\n transform: scale(0.98);\n}"},{"created":"2024-01-22T17:00:48.000Z","isPrivate":0,"projectId":"a077aa","snapshot":null,"tags":null,"title":"button by Rodrypaladin","updated":"2024-01-22T17:00:48.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":42,"jsLen":0,"cssLen":709,"pureCSS":1,"html":"","css":".button {\n padding: 10px 20px;\n font-size: 1.1rem;\n background-color: rgb(151, 151, 151);\n border: none;\n color: white;\n position: relative;\n width: 120px;\n height: 45px;\n transition: background-color 0.2s ease-in, all 0.15s ease-in;\n}\n\nbutton::after {\n display: flex;\n align-items: center;\n justify-content: center;\n content: \"Button\";\n width: 120px;\n height: 45px;\n position: absolute;\n top: 0;\n left: 0;\n transform: translate(5px, 5px);\n background-color: rgb(109, 109, 109);\n transition: all 0.15s ease-in;\n}\n\nbutton:hover::after {\n transform: translate(-5px, -5px);\n}\n\nbutton:hover {\n transform: translate(5px, 5px);\n}\n\nbutton:active::after {\n background-color: rgb(85, 85, 85);\n}"},{"created":"2024-01-22T17:00:48.000Z","isPrivate":0,"projectId":"aa25ec","snapshot":null,"tags":null,"title":"button by Yaya12085","updated":"2024-01-22T17:00:48.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":807,"jsLen":0,"cssLen":496,"pureCSS":1,"html":"","css":".button {\n display: flex;\n background-color: #0A66C2;\n color: #ffffff;\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 vertical-align: middle;\n align-items: center;\n border-radius: 0.5rem;\n gap: 0.75rem;\n border: none;\n cursor: pointer;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n transition: .6s ease;\n}\n\n.button svg {\n height: 30px;\n}\n\n.button:hover {\n box-shadow: none;\n}"},{"created":"2024-01-22T17:00:48.000Z","isPrivate":0,"projectId":"aafbe0","snapshot":null,"tags":null,"title":"button by cybrejon","updated":"2024-01-22T17:00:48.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":526,"jsLen":0,"cssLen":743,"pureCSS":1,"html":"\n \n","css":"a {\n color: rgba(255, 255, 255, 0.692);\n padding: 10px 15px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n text-shadow: 0 0 20px rgba(255, 255, 255, 0.397);\n background: rgba(255, 255, 255, 0.068);\n overflow: hidden;\n font-size: 0.9rem;\n font-weight: 600;\n gap: 8px;\n border-radius: 5px;\n margin: 0 5px;\n transition: 0.2s;\n border: 1px solid transparent;\n}\n\na:hover {\n border-color: rgba(255, 255, 255, 0.623);\n background: linear-gradient(\n to bottom,\n rgba(255, 255, 255, 0.144),\n rgba(255, 255, 255, 0.247),\n rgba(255, 255, 255, 0.39)\n );\n box-shadow: 0 6px rgba(255, 255, 255, 0.623);\n transform: translateY(-6px);\n}\n\na:active {\n transform: translateY(2px);\n box-shadow: none;\n}\n"},{"created":"2024-01-22T17:00:48.000Z","isPrivate":0,"projectId":"ac089d","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:48.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":1950,"jsLen":0,"cssLen":832,"pureCSS":1,"html":"","css":"button {\n position: relative;\n width: 130px;\n height: 35px;\n border-radius: 30px;\n background-color: white;\n border: 1px #2867b2 solid;\n overflow: hidden;\n}\n\n.text1 {\n font-size: 15px;\n font-weight: 600;\n margin-left: 22%;\n}\n\n.text2 {\n position: absolute;\n top: 25%;\n left: -50px;\n font-weight: 700;\n font-size: 14px;\n color: white;\n}\n\n.icon {\n position: absolute;\n top: 0;\n left: 0;\n transition: transform 0.5s;\n}\n\n.icon::before {\n position: absolute;\n left: -100px;\n top: 0;\n z-index: -1;\n content: '';\n width: 130px;\n height: 33px;\n border-radius: 30px;\n background-color: #2867b2;\n}\n\nbutton:hover .icon {\n transform: translateX(96px);\n transition: transform 0.5s;\n}\n\nbutton:hover .text2 {\n transform: translateX(100px);\n transition: transform 0.6s;\n}\n\nbutton:active {\n transform: scale(1.03);\n}"},{"created":"2024-01-22T17:00:48.000Z","isPrivate":0,"projectId":"b8d33f","snapshot":null,"tags":null,"title":"button by doniaskima","updated":"2024-01-22T17:00:48.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":52,"jsLen":0,"cssLen":1970,"pureCSS":1,"html":"\n","css":".btn-11,\n.btn-11 *,\n.btn-11 :after,\n.btn-11 :before,\n.btn-11:after,\n.btn-11:before {\n border: 0 solid;\n box-sizing: border-box;\n}\n\n.btn-11 {\n -webkit-tap-highlight-color: transparent;\n -webkit-appearance: button;\n background-color: #000;\n background-image: none;\n color: #fff;\n cursor: pointer;\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,\n Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,\n Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n font-size: 100%;\n font-weight: 900;\n line-height: 1.5;\n margin: 0;\n -webkit-mask-image: -webkit-radial-gradient(#000, #fff);\n padding: 0;\n text-transform: uppercase;\n}\n\n.btn-11:disabled {\n cursor: default;\n}\n\n.btn-11:-moz-focusring {\n outline: auto;\n}\n\n.btn-11 svg {\n display: block;\n vertical-align: middle;\n}\n\n.btn-11 [hidden] {\n display: none;\n}\n\n.btn-11 {\n border-radius: 99rem;\n border-width: 2px;\n overflow: hidden;\n padding: 0.8rem 3rem;\n position: relative;\n}\n\n.btn-11 span {\n mix-blend-mode: difference;\n}\n\n.btn-11:before {\n -webkit-animation: bg-scroll 3s linear infinite;\n animation: bg-scroll 3s linear infinite;\n -webkit-animation-play-state: paused;\n animation-play-state: paused;\n background: repeating-linear-gradient(\n 45deg,\n hsla(0, 0%, 100%, 0.2),\n hsla(0, 0%, 100%, 0.2) 0.7%,\n transparent 0,\n transparent 4%\n );\n content: \"\";\n display: block;\n height: 300%;\n left: -100%;\n opacity: 0;\n position: absolute;\n top: 0;\n transition: opacity 0.3s, background-color 0.2s;\n width: 300%;\n}\n\n.btn-11:hover:before {\n -webkit-animation-play-state: running;\n animation-play-state: running;\n opacity: 1;\n}\n\n.btn-11:active:before {\n background-color: #fff;\n}\n\n@-webkit-keyframes bg-scroll {\n 0% {\n transform: translateX(0);\n }\n\n to {\n transform: translateX(33%);\n }\n}\n\n@keyframes bg-scroll {\n 0% {\n transform: translateX(0);\n }\n\n to {\n transform: translateX(33%);\n }\n}\n"},{"created":"2024-01-22T17:00:48.000Z","isPrivate":0,"projectId":"d8536d","snapshot":null,"tags":null,"title":"button by Deri-Kurniawan","updated":"2024-01-22T17:00:48.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":46,"jsLen":0,"cssLen":779,"pureCSS":1,"html":"\n","css":".button {\n position: relative;\n padding: 12px 32px;\n font-size: 16px;\n font-weight: 700;\n text-transform: uppercase;\n color: #000;\n background-color: #fff;\n border: none;\n border-radius: 50px;\n overflow: hidden;\n z-index: 1;\n transition: all 0.3s ease-in-out;\n box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);\n cursor: pointer;\n}\n\n.button:hover {\n transform: scale(1.05);\n color: #000;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);\n}\n\n.button:active {\n transform: scale(0.9);\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n top: 0;\n right: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(to right, #007bff, #00bfff);\n transition: all 0.85s ease-in-out;\n z-index: -1;\n border-radius: 50px;\n}\n\n.button:hover::before {\n right: 100%;\n}"},{"created":"2024-01-22T17:00:47.000Z","isPrivate":0,"projectId":"89c4b6","snapshot":null,"tags":null,"title":"button by Lealdos","updated":"2024-01-22T17:00:47.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":627,"jsLen":0,"cssLen":1111,"pureCSS":1,"html":"\n","css":".Btn {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: 45px;\n height: 45px;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n transition-duration: 0.3s;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);\n background-color: RGB(29, 185, 84);\n}\n\n/* plus sign */\n.sign {\n width: 100%;\n transition-duration: 0.3s;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.sign svg {\n width: 18px;\n}\n\n.sign svg path {\n fill: black;\n}\n/* text */\n.text {\n position: absolute;\n right: 0%;\n width: 0%;\n opacity: 0;\n color: black;\n font-size: 1.2em;\n font-weight: 600;\n transition-duration: 0.3s;\n}\n/* hover effect on button width */\n.Btn:hover {\n width: 125px;\n border-radius: 40px;\n transition-duration: 0.3s;\n}\n\n.Btn:hover .sign {\n width: 30%;\n transition-duration: 0.3s;\n padding-left: 20px;\n}\n/* hover effect button's text */\n.Btn:hover .text {\n opacity: 1;\n width: 70%;\n transition-duration: 0.3s;\n padding-right: 10px;\n}\n/* button click effect*/\n.Btn:active {\n transform: translate(2px, 2px);\n}\n"}]}},"actionData":null,"errors":null}