{"loaderData":{"0":null,"0-3":{"total":7405,"projects":[{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"b8a741","snapshot":null,"tags":null,"title":"button by Wlidha09","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":56,"cssLen":1323,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn-white {\n display: inline-flex;\n align-items: center;\n color: #fff;\n border: 1px solid #fff;\n min-height: 50px;\n padding: 0 20px;\n font-size: 17px;\n text-transform: uppercase;\n z-index: 1;\n position: relative;\n background-color: transparent;\n}\n\n.btn-white::before {\n content: \"\";\n background-color: #fff;\n display: block;\n width: 45px;\n height: 1px;\n margin-right: 20px;\n}\n\n.btn-white::after {\n content: \"\";\n background-color: #fff;\n display: block;\n width: 0%;\n height: 100%;\n right: 0;\n top: 0;\n position: absolute;\n z-index: -1;\n -webkit-transition: all 0.3s ease-out;\n -moz-transition: all 0.3s ease-out;\n -o-transition: all 0.3s ease-out;\n transition: all 0.3s ease-out;\n}\n\n.btn-white:hover {\n color: #232963;\n text-decoration: none;\n -webkit-transition: all 0.3s ease-out;\n -moz-transition: all 0.3s ease-out;\n -o-transition: all 0.3s ease-out;\n transition: all 0.3s ease-out;\n}\n\n.btn-white:hover::after {\n width: 100%;\n -webkit-transition: all 0.3s ease-out;\n -moz-transition: all 0.3s ease-out;\n -o-transition: all 0.3s ease-out;\n transition: all 0.3s ease-out;\n}\n\n.btn-white:hover::before {\n background-color: #232963;\n -webkit-transition: all 0.3s ease-out;\n -moz-transition: all 0.3s ease-out;\n -o-transition: all 0.3s ease-out;\n transition: all 0.3s ease-out;\n}"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"46c548","snapshot":null,"tags":null,"title":"button by PozDevill","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":23,"cssLen":691,"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 font-family: 'Heebo', sans-serif;\n padding: 12px 40px;\n border: 0;\n background: rgb(148, 1, 1);\n color: #ffffff;\n font-weight: 500;\n font-size: 1em;\n border-radius: 8px;\n overflow: hidden;\n cursor: pointer;\n transition: 0.3s ease-in-out;\n}\n\nbutton:hover {\n text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.562);\n transform: scale(1.01);\n box-shadow: inset 0px 0px 10px rgba(255, 0, 0, 0.575);\n}\n\nbutton::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: -100px;\n width: 50%;\n height: 100%;\n transform: rotate(80deg);\n background: #ffffff77;\n filter: blur(10px);\n transition: 0.6s ease-in-out;\n}\n\nbutton:hover::after {\n left: 100%;\n}"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"29addf","snapshot":null,"tags":null,"title":"button by TISEPSE","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":70,"cssLen":1033,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".vlrt {\n height: 75px;\n width: 170px;\n border-radius: 4px;\n font-size: 18px;\n border: 3px solid;\n color: #f5f5f5;\n border-color: #b6b6b6;\n background-color: rgba(0, 0, 0, 0.15);\n backdrop-filter: blur(50px);\n transition: 0.2s;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n}\n\n.vlrt:hover {\n border-color: #16ff00;\n letter-spacing: 2px;\n font-size: 19px;\n color: #fefefe;\n text-shadow: 0 0.3rem rgb(51, 51, 51);\n box-shadow: #16ff00 0px -30px 40px -30px inset;\n}\n\n.vlrt .green {\n content: \"\";\n width: 25px;\n height: 25px;\n position: absolute;\n top: 0;\n left: 0;\n background-color: #16ff00;\n}\n\n.vlrt .green {\n content: \"\";\n width: 45px;\n height: 45px;\n position: absolute;\n top: 0px;\n left: 0px;\n background-color: rgb(182, 182, 182);\n transform: rotate(49deg) translateX(-32px) translateY(0px);\n}\n\n.vlrt:hover .green {\n background-color: #16ff00;\n transition: 0.5s;\n}\n\n.vlrt:active {\n letter-spacing: 0px;\n text-shadow: 0 0rem #333;\n transition: 0.1s;\n background-color: #1abc9c;\n}\n"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"488681","snapshot":null,"tags":null,"title":"button by aaronross1","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":768,"cssLen":1207,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".edit-button {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background-color: rgb(20, 20, 20);\n border: none;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.164);\n cursor: pointer;\n transition-duration: 0.3s;\n overflow: hidden;\n position: relative;\n text-decoration: none !important;\n}\n\n.edit-svgIcon {\n width: 17px;\n transition-duration: 0.3s;\n}\n\n.edit-svgIcon path {\n fill: white;\n}\n\n.edit-button:hover {\n width: 120px;\n border-radius: 50px;\n transition-duration: 0.3s;\n background-color: rgb(255, 69, 69);\n align-items: center;\n}\n\n.edit-button:hover .edit-svgIcon {\n width: 20px;\n transition-duration: 0.3s;\n transform: translateY(60%);\n -webkit-transform: rotate(360deg);\n -moz-transform: rotate(360deg);\n -o-transform: rotate(360deg);\n -ms-transform: rotate(360deg);\n transform: rotate(360deg);\n}\n\n.edit-button::before {\n display: none;\n content: \"Edit\";\n color: white;\n transition-duration: 0.3s;\n font-size: 2px;\n}\n\n.edit-button:hover::before {\n display: block;\n padding-right: 10px;\n font-size: 13px;\n opacity: 1;\n transform: translateY(0px);\n transition-duration: 0.3s;\n}\n"},{"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"}]}},"actionData":null,"errors":null}