{"loaderData":{"0":null,"0-2":{"total":7074,"projects":[{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"a8bd06","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":98709,"cssLen":717,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n \n Contact someone\n

","css":".container {\n position: relative;\n width: 250px;\n /* choose your size */\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n}\n\n.container button {\n width: 50px;\n height: 50px;\n border: none;\n background-color: #313638;\n transition: 0.3s;\n cursor: pointer;\n}\n\n.icon {\n width: 26px;\n height: 26px;\n fill: #fff;\n}\n\n.container button:nth-child(1):hover {\n background-color: #2753a7;\n}\n\n.container button:nth-child(2):hover {\n background-color: #cd242b;\n}\n\n.container button:nth-child(3):hover {\n background-color: #55acee;\n}\n\n.container button:nth-child(4):hover {\n background-color: #0274b3;\n}\n\n.title {\n color: gray;\n font-weight: 700;\n font-size: 17px;\n position: absolute;\n top: -35px;\n left: 0;\n}"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"23fd27","snapshot":null,"tags":null,"title":"button by irfnmdlptra","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":55,"cssLen":778,"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 padding: 12px 30px;\n font-size: 18px;\n text-align: center;\n text-transform: uppercase;\n letter-spacing: 2px;\n border-radius: 40px;\n background: linear-gradient(45deg, #FF0080, #FF8C00);\n color: #fff;\n border: none;\n cursor: pointer;\n overflow: hidden;\n z-index: 1;\n}\n\n.button:before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0;\n height: 0;\n background: rgba(255, 255, 255, 0.2);\n border-radius: 100%;\n z-index: -1;\n transition: all 0.5s ease;\n}\n\n.button:hover:before {\n width: 500px;\n height: 500px;\n}\n\n.button span {\n position: relative;\n z-index: 2;\n transition: all 0.3s ease;\n}\n\n.button:hover span {\n transform: scale(1.2);\n}\n"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"dc3e5a","snapshot":null,"tags":null,"title":"button by KSAplay","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":63,"cssLen":1121,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n padding: 1em 2em;\n font-size: 15px;\n font-weight: bold;\n border-width: 0;\n border-radius: 1.5em;\n text-transform: uppercase;\n transition: .2s ease;\n}\n\n.text {\n font-size: 1.2em;\n color: white;\n z-index: 1;\n}\n\n.btn::before {\n position: absolute;\n content: '';\n width: 120%;\n height: 260%;\n background-image: linear-gradient(135deg, rgba(0,5,255,1) 0%, rgba(255,0,159,1) 100%);\n}\n\n.btn::after {\n position: absolute;\n content: '';\n width: 88%;\n height: 80%;\n border-width: 0;\n border-radius: 1.2em;\n background-color: black;\n opacity: .7;\n transition: 100ms ease;\n}\n\n.btn:hover.btn {\n transform: scale(1.1);\n}\n\n.btn:hover.btn::after {\n opacity: .5;\n}\n\n.btn:hover.btn::before {\n animation: turn_4810 .4s infinite linear;\n}\n\n.btn:active.btn {\n transform: scale(1.05);\n}\n\n.btn:active.btn::before {\n transform: scale(1.05);\n animation: turn_4810 .2s infinite linear;\n}\n\n@keyframes turn_4810 {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"95a0fd","snapshot":null,"tags":null,"title":"button by abassj1","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":40,"cssLen":866,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"/* Modified code from @gagan-gv */\n.button {\n padding: 1em 2em;\n font-size: 17px;\n background: transparent;\n border: none;\n position: relative;\n color: yellow;\n z-index: 1;\n}\n\n.button::after,\n .button::before {\n content: '';\n position: absolute;\n bottom: 0;\n right: 0;\n z-index: -99999;\n transition: all .4s;\n}\n\n.button::before {\n transform: translate(0%, 0%);\n width: 100%;\n height: 100%;\n background: darkslategray;\n border-radius: 50px;\n}\n\n.button::after {\n transform: translate(0px, 0px);\n width: 10px;\n height: 10px;\n background: #ffffff15;\n backdrop-filter: blur(5px);\n border-radius: 50px;\n}\n\n.button:hover::before {\n transform: translate(5%, 20%);\n width: 10px;\n height: 10px;\n}\n\n.button:hover::after {\n border-radius: 50px;\n transform: translate(0, 0);\n width: 100%;\n height: 100%;\n}\n\n.button:active::after {\n transition: 0s;\n transform: translate(0, 5%);\n}"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"24acea","snapshot":null,"tags":null,"title":"button by akshat-patel28","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1763,"cssLen":943,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n\n

","css":".button {\n width: 80px;\n height: 80px;\n border-radius: 15px;\n -webkit-backdrop-filter: blur(10px);\n backdrop-filter: blur(10px);\n background-color: rgba(255, 255, 255, 0.1);\n border: 0px;\n cursor: pointer;\n outline: 0px;\n padding: 0 2px;\n font-weight: 600;\n font-size: 18px;\n color: white;\n box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;\n}\n\n.backdrop {\n position: absolute;\n width: 70px;\n height: 70px;\n background-color: rgb(183, 8, 199);\n z-index: -1;\n top: 50%;\n left: 50%;\n border-radius: 15px;\n transform: translateX(-50%) translateY(-50%);\n transition: all ease-in-out 0.5s;\n}\n\n.icon {\n font-size: 28px;\n margin-top: 5px;\n}\n\n.button:hover + .backdrop {\n top: 48%;\n box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;\n transform: rotate(15deg) translateX(-50%) translateY(-50%);\n}\n\n.button:active,.button:active +.backdrop {\n box-shadow: none;\n}"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"7f2fbe","snapshot":null,"tags":null,"title":"button by PriyanshuGupta28","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":47,"cssLen":980,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"/* styles.css */\n\n/* Reset default styles for the button */\nbutton {\n border: none;\n outline: none;\n padding: 10px 20px;\n font-size: 16px;\n border-radius: 4px;\n cursor: pointer;\n background-color: #4158D0;\n background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);\n color: #fff;\n position: relative;\n overflow: hidden;\n}\n\n/* Add a pseudo-element for the animation effect */\nbutton::before {\n content: '';\n position: absolute;\n top: 0;\n left: 50%;\n width: 0;\n height: 100%;\n background-color: rgba(255, 255, 255, 0.2);\n transform: translateX(-50%);\n transition: width 0.3s ease;\n}\n\n/* Hover effect for the button */\nbutton:hover::before {\n width: 100%;\n}\n\n/* Active effect for the button */\nbutton:active::before {\n background-color: rgba(255, 255, 255, 0.4);\n transition: none;\n animation: ripple 0.4s ease;\n}\n\n/* Keyframes animation for the active effect */\n@keyframes ripple {\n to {\n transform: scale(2);\n opacity: 0;\n }\n}\n"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"9ab662","snapshot":null,"tags":null,"title":"button by benjimich","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1147,"cssLen":678,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n cursor: pointer;\n background: none;\n border: none;\n display: flex;\n flex-direction: column;\n width: 70px;\n gap: 4px;\n}\n\n.button:hover {\n animation: move 2s infinite ease;\n}\n\n@keyframes move {\n 0% {\n transform: translateX(0);\n }\n\n 50% {\n transform: translateX(20px);\n }\n\n 100% {\n transform: translateX(0);\n }\n}\n\n.round {\n width: 6px;\n height: 6px;\n background: #3da9fc;\n border-radius: 50%;\n}\n\n.line {\n display: flex;\n gap: 4px;\n}\n\n.two {\n transform: translateX(10px);\n}\n\n.three {\n transform: translateX(20px);\n}\n\n.four {\n transform: translateX(30px);\n}\n\n.five {\n transform: translateX(20px);\n}\n\n.six {\n transform: translateX(10px);\n}"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"2cca06","snapshot":null,"tags":null,"title":"button by 212004ALJI","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":8842,"cssLen":1987,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n --color2: #ff206e;\n padding: 15px 30px;\n border-radius: 18px;\n border: 1px solid #282828;\n background-color: #212121;\n box-shadow: inset 2px 2px 5px rgb(22, 22, 22);\n position: relative;\n overflow: hidden;\n}\n\nbutton::after {\n content: '';\n height: 30px;\n width: 60px;\n position: absolute;\n box-shadow: 0 0 20px 10px var(--color2);\n bottom: -45px;\n left: 21%;\n transition: 0.4s 0.3s;\n}\n\nbutton svg {\n --move2: inset(31% 0 40% 0);\n --move3: inset(39% 0 15% 0);\n --move4: inset(45% 0 40% 0);\n --move5: inset(45% 0 6% 0);\n --move6: inset(14% 0 61% 0);\n --move7: inset(0 0 0 0);\n clip-path: inset(50% 50% 50% 50%);\n margin-left: 5px;\n transition: 0.4s;\n}\n\nbutton:hover svg {\n clip-path: var(--move7);\n animation: glitch_4011 0.4s;\n animation-timing-function: steps(2, end);\n}\n\nbutton:hover:after {\n bottom: -40px;\n width: 100px;\n}\n\nbutton .icon_shadow {\n display: flex;\n align-items: center;\n transition: 0.4s;\n color: var(--color2);\n font-weight: bold;\n filter: drop-shadow(0 0 10px var(--color2));\n}\n\nbutton:hover .icon_shadow {\n filter: drop-shadow(0 0 10px var(--color2));\n}\n\n@keyframes glitch_4011 {\n 0% {\n clip-path: var(--move1);\n transform: translate(0px,-10px);\n }\n\n 10% {\n clip-path: var(--move2);\n transform: translate(-10px,10px);\n }\n\n 20% {\n clip-path: var(--move3);\n transform: translate(10px,0px);\n }\n\n 30% {\n clip-path: var(--move4);\n transform: translate(-10px,10px);\n }\n\n 40% {\n clip-path: var(--move5);\n transform: translate(10px,-10px);\n }\n\n 50% {\n clip-path: var(--move6);\n transform: translate(-10px,10px);\n }\n\n 60% {\n clip-path: var(--move1);\n transform: translate(10px,-10px);\n }\n\n 70% {\n clip-path: var(--move3);\n transform: translate(-10px,10px);\n }\n\n 80% {\n clip-path: var(--move2);\n transform: translate(10px,-10px);\n }\n\n 90% {\n clip-path: var(--move4);\n transform: translate(-10px,10px);\n }\n\n 100% {\n transform: translate(0);\n }\n}\n"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"14d3c0","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1376,"cssLen":948,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" \n\n\n","css":"button {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n padding: 0 10px;\n color: white;\n text-shadow: 2px 2px #000;\n text-transform: uppercase;\n border: solid 2px #fff;\n letter-spacing: 1px;\n font-weight: 600;\n font-size: 17px;\n background-color: rgba(88, 101, 242, 1);\n border-radius: 50px;\n position: relative;\n overflow: hidden;\n transition: all .5s ease;\n}\n\nbutton:active {\n transform: scale(.9);\n transition: all 100ms ease;\n}\n\nbutton svg {\n transition: all .5s ease;\n z-index: 2;\n}\n\n.play {\n transition: all .5s ease;\n transition-delay: 300ms;\n}\n\nbutton:hover svg {\n transform: scale(1.3) translate(-40%);\n}\n\n.now {\n position: absolute;\n left: 0;\n transform: translateX(290%);\n transition: all .5s ease;\n z-index: 2;\n}\n\nbutton:hover .now {\n transform: translateX(90%);\n transition-delay: 300ms;\n}\n\nbutton:hover .play {\n transform: translateX(200%);\n transition-delay: 300ms;\n}\n\n\n"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"51c859","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":314,"cssLen":797,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".Btn {\n width: 45px;\n height: 45px;\n background: linear-gradient(#44ea76, #39fad7);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n cursor: pointer;\n position: relative;\n border: none;\n}\n\n.arrow path {\n fill: white;\n}\n\n.text {\n font-size: 0.7em;\n width: 100px;\n position: absolute;\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n bottom: -18px;\n opacity: 0;\n transition-duration: .7s;\n}\n\n.Btn:hover .text {\n opacity: 1;\n transition-duration: .7s;\n}\n\n.Btn:hover .arrow {\n animation: slide-in-bottom .7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;\n}\n\n@keyframes slide-in-bottom {\n 0% {\n transform: translateY(10px);\n opacity: 0;\n }\n\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n}\n"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"74020f","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1584,"cssLen":832,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n position: relative;\n width: 130px;\n height: 35px;\n border-radius: 30px;\n background-color: white;\n border: 1px #00acee solid;\n overflow: hidden;\n}\n\n.text1 {\n font-size: 17px;\n font-weight: 700;\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: #00acee;\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:22.000Z","isPrivate":0,"projectId":"96426f","snapshot":null,"tags":null,"title":"button by ItsEnigma143","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":286,"cssLen":1372,"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":".h-\\[40px\\] {\n height: 40px;\n}\n.h-\\[50px\\] {\n height: 50px;\n}\n.w-\\[140px\\] {\n width: 140px;\n}\n.w-\\[150px\\] {\n width: 150px;\n}\n.bg-sky-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(2 132 199 / var(--tw-bg-opacity));\n}\n.font-bold {\n font-weight: 700;\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.outline {\n outline-style: solid;\n}\n.outline-1 {\n outline-width: 1px;\n}\n.outline-offset-2 {\n outline-offset: 2px;\n}\n.outline-sky-600 {\n outline-color: #0284c7;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.hover\\:scale-\\[1\\.03\\]:hover {\n --tw-scale-x: 1.03;\n --tw-scale-y: 1.03;\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\\:outline-none:hover {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.active\\:scale-\\[0\\.99\\]:active {\n --tw-scale-x: 0.99;\n --tw-scale-y: 0.99;\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"}]}},"actionData":null,"errors":null}