{"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-20T08:29:28.000Z","isPrivate":0,"projectId":"62f1c1","snapshot":"https://s1.qingting.work/runjs/0c6a73c65207.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by MuhammadHasann","updated":"2024-01-20T10:34:10.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":15419,"jsLen":0,"cssLen":4179,"pureCSS":1,"html":"\n","css":"body {\n padding: 120px 0 0 40px;\n}\nbutton {\n position: relative;\n padding: 13px 35px;\n background: #f5ddb7;\n font-size: 17px;\n font-weight: 900;\n color: #181818;\n border: none;\n border-radius: 8px;\n box-shadow: 2px 2px 5px #18181869, inset 2px 2px 10px #ffffffb0;\n transition: all .3s ease-in-out;\n}\n\n.icon-1 {\n position: absolute;\n top: 10%;\n left: 50%;\n transform: translate(-50%, 0);\n width: 0px;\n height: auto;\n transition: all .5s ease-in-out;\n z-index: -1;\n}\n\n.icon-2 {\n position: absolute;\n top: 10%;\n left: 50%;\n transform: translate(-50%, 0);\n width: 0px;\n height: auto;\n transition: all .5s ease-in-out;\n z-index: -2;\n}\n\n.icon-3 {\n position: absolute;\n top: 10%;\n left: 50%;\n transform: translate(-50%, 0);\n width: 0px;\n height: auto;\n transition: all .5s ease-in-out;\n z-index: -2;\n}\n\n.icon-4 {\n position: absolute;\n top: 10%;\n left: 50%;\n transform: translate(-50%, 0);\n width: 0px;\n height: auto;\n transition: all .5s ease-in-out;\n z-index: -2;\n}\n\n.icon-5 {\n position: absolute;\n top: 10%;\n left: 50%;\n transform: translate(-50%, 0);\n width: 0px;\n height: auto;\n transition: all .5s ease-in-out;\n z-index: -2;\n}\n\nbutton:hover {\n padding: 13px 25px;\n border-radius: 8px 8px 24px 24px;\n}\n\nbutton:hover .icon-1 {\n top: -250%;\n left: 50%;\n transform: translate(-50%, 0);\n width: 50px;\n height: auto;\n animation: inIcon1 1s ease .45s forwards;\n}\n\n@keyframes inIcon1 {\n 0% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n\n 25% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(5deg);\n }\n\n 50% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(1deg);\n }\n\n 65% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(3deg);\n }\n\n 100% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n}\n\nbutton:hover .icon-2 {\n position: absolute;\n top: -200%;\n left: 90%;\n transform: translate(-50%, 0);\n width: 75px;\n height: auto;\n animation: inIcon2 1s ease .45s forwards;\n}\n\n@keyframes inIcon2 {\n 0% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n\n 35% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(10deg);\n }\n\n 50% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(4deg);\n }\n\n 80% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(5deg);\n }\n\n 100% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n}\n\nbutton:hover .icon-3 {\n position: absolute;\n top: -130%;\n left: 20%;\n transform: translate(-50%, 0);\n width: 60px;\n height: auto;\n animation: inIcon3 1s ease .45s forwards;\n}\n\n@keyframes inIcon3 {\n 0% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n\n 35% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(-2deg);\n }\n\n 100% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n}\n\nbutton:hover .icon-4 {\n position: absolute;\n top: -300%;\n left: 10%;\n transform: translate(-50%, 0);\n width: 85px;\n height: auto;\n animation: inIcon4 1s ease .45s forwards;\n}\n\n@keyframes inIcon4 {\n 0% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n\n 40% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(-3deg);\n }\n\n 100% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n}\n\nbutton:hover .icon-5 {\n position: absolute;\n top: -350%;\n left: 90%;\n transform: translate(-50%, 0);\n width: 85px;\n height: auto;\n animation: inIcon5 1s ease .45s forwards;\n}\n\n@keyframes inIcon5 {\n 0% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n\n 35% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(-3deg);\n }\n\n 100% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n}\n\n.fil-leaf-1 {\n fill: #7B9B3A\n}\n\n.fil-leaf-2 {\n fill: #556729;\n fill-rule: nonzero\n}\n\n.fil-leaf-3 {\n fill: #556729\n}\n\n.fil-leaf-4 {\n fill: #3C4819\n}\n\n.fil-leaf-5 {\n fill: #3C4819\n}"},{"created":"2024-01-20T08:28:49.000Z","isPrivate":0,"projectId":"f5697b","snapshot":"https://s1.qingting.work/runjs/6f8cba74267f.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by lenfear23","updated":"2024-01-20T10:28:50.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":29,"jsLen":0,"cssLen":900,"pureCSS":1,"html":"","css":"button {\n display: flex;\n align-items: center;\n justify-content: center;\n outline: none;\n cursor: pointer;\n width: 150px;\n height: 50px;\n background-image: linear-gradient(to top, #D8D9DB 0%, #fff 80%, #FDFDFD 100%);\n border-radius: 30px;\n border: 1px solid #8F9092;\n transition: all 0.2s ease;\n font-family: \"Source Sans Pro\", sans-serif;\n font-size: 14px;\n font-weight: 600;\n color: #606060;\n text-shadow: 0 1px #fff;\n}\n\nbutton:hover {\n box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 3px 3px #CECFD1;\n}\n\nbutton:active {\n box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 5px 3px #999, inset 0 0 30px #aaa;\n}\n\nbutton:focus {\n box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 5px 3px #999, inset 0 0 30px #aaa;\n}\n\n\n"},{"created":"2024-01-20T03:59:38.000Z","isPrivate":0,"projectId":"7c0f32","snapshot":"https://s1.qingting.work/runjs/f87518802093.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by satyamchaudharydev","updated":"2024-01-20T08:19:56.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":506,"jsLen":0,"cssLen":1571,"pureCSS":1,"html":"\n","css":"body {\n background-color: black;\n}\nbutton {\n width: 140px;\n height: 56px;\n overflow: hidden;\n border: none;\n color: #fff;\n background: none;\n position: relative;\n padding-bottom: 2em;\n cursor: pointer;\n}\n\nbutton > div,\nbutton > svg {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n}\n\nbutton:before {\n content: \"\";\n position: absolute;\n height: 2px;\n bottom: 0;\n left: 0;\n width: 100%;\n transform: scaleX(0);\n transform-origin: bottom right;\n background: currentColor;\n transition: transform 0.25s ease-out;\n}\n\nbutton:hover:before {\n transform: scaleX(1);\n transform-origin: bottom left;\n}\n\nbutton .clone > *,\nbutton .text > * {\n opacity: 1;\n font-size: 1.3rem;\n transition: 0.2s;\n margin-left: 4px;\n}\n\nbutton .clone > * {\n transform: translateY(60px);\n}\n\nbutton:hover .clone > * {\n opacity: 1;\n transform: translateY(0px);\n transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;\n}\n\nbutton:hover .text > * {\n opacity: 1;\n transform: translateY(-60px);\n transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;\n}\n\nbutton:hover .clone > :nth-child(1) {\n transition-delay: 0.15s;\n}\n\nbutton:hover .clone > :nth-child(2) {\n transition-delay: 0.2s;\n}\n\nbutton:hover .clone > :nth-child(3) {\n transition-delay: 0.25s;\n}\n\nbutton:hover .clone > :nth-child(4) {\n transition-delay: 0.3s;\n}\n/* icon style and hover */\nbutton svg {\n width: 20px;\n right: 0;\n top: 50%;\n transform: translateY(-50%) rotate(-50deg);\n transition: 0.2s ease-out;\n}\n\nbutton:hover svg {\n transform: translateY(-50%) rotate(-90deg);\n}\n"},{"created":"2024-01-20T03:58:19.000Z","isPrivate":0,"projectId":"df467d","snapshot":"https://s1.qingting.work/runjs/7bdb7e30284c.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by doniaskima","updated":"2024-01-20T08:20:02.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":122,"jsLen":0,"cssLen":1927,"pureCSS":1,"html":"\n","css":".btn-23,\n.btn-23 *,\n.btn-23 :after,\n.btn-23 :before,\n.btn-23:after,\n.btn-23:before {\n border: 0 solid;\n box-sizing: border-box;\n}\n\n.btn-23 {\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-23:disabled {\n cursor: default;\n}\n\n.btn-23:-moz-focusring {\n outline: auto;\n}\n\n.btn-23 svg {\n display: block;\n vertical-align: middle;\n}\n\n.btn-23 [hidden] {\n display: none;\n}\n\n.btn-23 {\n border-radius: 99rem;\n border-width: 2px;\n overflow: hidden;\n padding: 0.8rem 3rem;\n position: relative;\n}\n\n.btn-23 span {\n display: grid;\n inset: 0;\n place-items: center;\n position: absolute;\n transition: opacity 0.2s ease;\n}\n\n.btn-23 .marquee {\n --spacing: 5em;\n --start: 0em;\n --end: 5em;\n -webkit-animation: marquee 1s linear infinite;\n animation: marquee 1s linear infinite;\n -webkit-animation-play-state: paused;\n animation-play-state: paused;\n opacity: 0;\n position: relative;\n text-shadow: #fff var(--spacing) 0, #fff calc(var(--spacing) * -1) 0,\n #fff calc(var(--spacing) * -2) 0;\n}\n\n.btn-23:hover .marquee {\n -webkit-animation-play-state: running;\n animation-play-state: running;\n opacity: 1;\n}\n\n.btn-23:hover .text {\n opacity: 0;\n}\n\n@-webkit-keyframes marquee {\n 0% {\n transform: translateX(var(--start));\n }\n\n to {\n transform: translateX(var(--end));\n }\n}\n\n@keyframes marquee {\n 0% {\n transform: translateX(var(--start));\n }\n\n to {\n transform: translateX(var(--end));\n }\n}\n"},{"created":"2024-01-20T03:56:25.000Z","isPrivate":0,"projectId":"ac00ff","snapshot":"https://s1.qingting.work/runjs/7ed87685f7de.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by alexmaracinaru","updated":"2024-01-20T08:20:08.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":711,"jsLen":0,"cssLen":507,"pureCSS":1,"html":"","css":"button {\n cursor: pointer;\n font-weight: 700;\n font-family: Helvetica,\"sans-serif\";\n transition: all .2s;\n padding: 10px 20px;\n border-radius: 100px;\n background: #cfef00;\n border: 1px solid transparent;\n display: flex;\n align-items: center;\n font-size: 15px;\n}\n\nbutton:hover {\n background: #c4e201;\n}\n\nbutton > svg {\n width: 34px;\n margin-left: 10px;\n transition: transform .3s ease-in-out;\n}\n\nbutton:hover svg {\n transform: translateX(5px);\n}\n\nbutton:active {\n transform: scale(0.95);\n}\n\n"},{"created":"2024-01-20T03:41:08.000Z","isPrivate":0,"projectId":"3dc4a4","snapshot":"https://s1.qingting.work/runjs/d60f04450316.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by MuhammadHasann","updated":"2024-01-20T05:41:10.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":16897,"jsLen":0,"cssLen":2062,"pureCSS":1,"html":"\n","css":"button {\n position: relative;\n padding: 15px 45px;\n background: #fec195;\n font-size: 17px;\n font-weight: 500;\n color: #181818;\n cursor: pointer;\n border: 1px solid #fec195;\n border-radius: 8px;\n filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.2));\n}\n\nbutton:hover {\n border: 1px solid #f3b182;\n background: linear-gradient(\n 85deg,\n #fec195,\n #fcc196,\n #fabd92,\n #fac097,\n #fac39c\n );\n animation: wind 2s ease-in-out infinite;\n}\n\n@keyframes wind {\n 0% {\n background-position: 0% 50%;\n }\n\n 0% {\n background-position: 50% 100%;\n }\n\n 0% {\n background-position: 0% 50%;\n }\n}\n\n.icon-1 {\n position: absolute;\n top: 0;\n right: 0;\n width: 25px;\n transform-origin: 0 0;\n transform: rotate(10deg);\n transition: all 0.5s ease-in-out;\n filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));\n}\n\nbutton:hover .icon-1 {\n animation: slay-1 3s cubic-bezier(0.52, 0, 0.58, 1) infinite;\n transform: rotate(10deg);\n}\n\n@keyframes slay-1 {\n 0% {\n transform: rotate(10deg);\n }\n\n 50% {\n transform: rotate(-5deg);\n }\n\n 100% {\n transform: rotate(10deg);\n }\n}\n\n.icon-2 {\n position: absolute;\n top: 0;\n left: 25px;\n width: 12px;\n transform-origin: 50% 0;\n transform: rotate(10deg);\n transition: all 1s ease-in-out;\n filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.5));\n}\n\nbutton:hover .icon-2 {\n animation: slay-2 3s cubic-bezier(0.52, 0, 0.58, 1) 1s infinite;\n transform: rotate(0);\n}\n\n@keyframes slay-2 {\n 0% {\n transform: rotate(0deg);\n }\n\n 50% {\n transform: rotate(15deg);\n }\n\n 100% {\n transform: rotate(0);\n }\n}\n\n.icon-3 {\n position: absolute;\n top: 0;\n left: 0;\n width: 18px;\n transform-origin: 50% 0;\n transform: rotate(-5deg);\n transition: all 1s ease-in-out;\n filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.5));\n}\n\nbutton:hover .icon-3 {\n animation: slay-3 2s cubic-bezier(0.52, 0, 0.58, 1) 1s infinite;\n transform: rotate(0);\n}\n\n@keyframes slay-3 {\n 0% {\n transform: rotate(0deg);\n }\n\n 50% {\n transform: rotate(-5deg);\n }\n\n 100% {\n transform: rotate(0);\n }\n}\n"},{"created":"2024-01-20T03:39:04.000Z","isPrivate":0,"projectId":"4fba46","snapshot":"https://s1.qingting.work/runjs/85b0327aa860.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by nikk7007","updated":"2024-01-20T05:39:05.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":27,"jsLen":0,"cssLen":573,"pureCSS":1,"html":"","css":"button {\n padding: 0.8em 1.8em;\n border: 2px solid #17C3B2;\n position: relative;\n overflow: hidden;\n background-color: transparent;\n text-align: center;\n text-transform: uppercase;\n font-size: 16px;\n transition: .3s;\n z-index: 1;\n font-family: inherit;\n color: #17C3B2;\n}\n\nbutton::before {\n content: '';\n width: 0;\n height: 300%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(45deg);\n background: #17C3B2;\n transition: .5s ease;\n display: block;\n z-index: -1;\n}\n\nbutton:hover::before {\n width: 105%;\n}\n\nbutton:hover {\n color: #111;\n}\n"},{"created":"2024-01-20T03:37:11.000Z","isPrivate":0,"projectId":"147cd4","snapshot":"https://s1.qingting.work/runjs/cd48acf15f6e.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by adamgiebl","updated":"2024-01-20T05:37:13.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":170,"jsLen":0,"cssLen":1392,"pureCSS":1,"html":"\n","css":"button {\n position: relative;\n font-family: inherit;\n font-size: 18px;\n border-radius: 40em;\n width: 8em;\n height: 3em;\n z-index: 1;\n color: white;\n cursor: pointer;\n overflow: hidden;\n border: none;\n}\n\nbutton .text {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n line-height: 3em;\n border-radius: 40em;\n border: none;\n background: linear-gradient(\n rgba(255, 255, 255, 0.473),\n rgba(150, 150, 150, 0.25)\n );\n z-index: 1;\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n}\n\nbutton .blob {\n position: absolute;\n z-index: -1;\n border-radius: 5em;\n width: 5em;\n height: 3em;\n transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;\n}\n\nbutton .blob:nth-child(2) {\n left: 0em;\n top: 0;\n background: #ff930f;\n}\n\nbutton .blob:nth-child(3) {\n left: 1.8em;\n top: 0;\n z-index: -1;\n background: #bf0fff;\n}\n\nbutton .blob:nth-child(4) {\n left: 4em;\n top: -1em;\n background: #ff1b6b;\n}\n\nbutton .blob:nth-child(5) {\n left: 4.3em;\n top: 1.6em;\n background: #0061ff;\n}\n\nbutton:hover .blob:nth-child(2) {\n background: #0061ff;\n}\n\nbutton:hover .blob:nth-child(3) {\n background: #ff1b6b;\n}\n\nbutton:hover .blob:nth-child(4) {\n background: #bf0fff;\n}\n\nbutton:hover .blob:nth-child(5) {\n background: #ff930f;\n}\n\nbutton:hover .blob {\n transform: scale(1.3);\n}\n\nbutton:active {\n border: 2px solid white;\n}\n"},{"created":"2024-01-20T03:35:05.000Z","isPrivate":0,"projectId":"6c4789","snapshot":"https://s1.qingting.work/runjs/80663513b370.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by felipesntr","updated":"2024-01-20T05:35:06.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":32,"jsLen":0,"cssLen":278,"pureCSS":1,"html":"","css":"button {\n padding: 0.6em 1em;\n border: 4px solid #fa725a;\n transition: ease-in-out 0.3s;\n background-color: transparent;\n color: #fa725a;\n font-weight: bolder;\n font-size: 16px;\n}\n\nbutton:hover {\n transform: scale(1.2) rotate(10deg);\n background-color: #fa725a;\n color: white;\n}"},{"created":"2024-01-20T03:33:53.000Z","isPrivate":0,"projectId":"df51eb","snapshot":"https://s1.qingting.work/runjs/d3cec88a8673.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by adamgiebl","updated":"2024-01-20T05:33:55.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":543,"jsLen":0,"cssLen":608,"pureCSS":1,"html":"","css":".cssbuttons-io-button {\n display: flex;\n align-items: center;\n font-family: inherit;\n font-weight: 500;\n font-size: 17px;\n padding: 0.8em 1.5em 0.8em 1.2em;\n color: white;\n background: #ad5389;\n background: linear-gradient(0deg, rgba(77,54,208,1) 0%, rgba(132,116,254,1) 100%);\n border: none;\n box-shadow: 0 0.7em 1.5em -0.5em #4d36d0be;\n letter-spacing: 0.05em;\n border-radius: 20em;\n}\n\n.cssbuttons-io-button svg {\n margin-right: 8px;\n}\n\n.cssbuttons-io-button:hover {\n box-shadow: 0 0.5em 1.5em -0.5em #4d36d0be;\n}\n\n.cssbuttons-io-button:active {\n box-shadow: 0 0.3em 1em -0.5em #4d36d0be;\n}"},{"created":"2024-01-20T03:32:50.000Z","isPrivate":0,"projectId":"9f5127","snapshot":"https://s1.qingting.work/runjs/7019beed74eb.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by andrew-demchenk0","updated":"2024-01-20T05:32:51.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":465,"jsLen":0,"cssLen":716,"pureCSS":1,"html":"","css":".button {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 8px 12px 8px 16px;\n gap: 8px;\n height: 40px;\n width: 128px;\n border: none;\n background: #056bfa27;\n border-radius: 20px;\n cursor: pointer;\n}\n\n.lable {\n margin-top: 1px;\n font-size: 19px;\n line-height: 22px;\n color: #056DFA;\n font-family: sans-serif;\n letter-spacing: 1px;\n}\n\n.button:hover {\n background: #056bfa49;\n}\n\n.button:hover .svg-icon {\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 25% {\n transform: rotate(-8deg);\n }\n\n 50% {\n transform: rotate(0deg);\n }\n\n 75% {\n transform: rotate(8deg);\n }\n\n 100% {\n transform: rotate(0deg);\n }\n}"},{"created":"2024-01-20T03:32:13.000Z","isPrivate":0,"projectId":"990780","snapshot":"https://s1.qingting.work/runjs/fa88e1d1403e.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by alexreyes091","updated":"2024-01-20T05:32:15.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":37,"jsLen":0,"cssLen":686,"pureCSS":1,"html":"","css":".btn {\n padding: 1rem 2rem;\n font-weight: 700;\n background: rgb(255, 255, 255);\n color: blueviolet;\n border-radius: .5rem;\n border-bottom: 2px solid blueviolet;\n border-right: 2px solid blueviolet;\n border-top: 2px solid white;\n border-left: 2px solid white;\n transition-duration: 1s;\n transition-property: border-top, \n border-left, \n border-bottom,\n border-right,\n box-shadow;\n}\n\n.btn:hover {\n border-top: 2px solid blueviolet;\n border-left: 2px solid blueviolet;\n border-bottom: 2px solid rgb(238, 103, 238);\n border-right: 2px solid rgb(238, 103, 238);\n box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px;\n}"}]}},"actionData":null,"errors":null}