{"loaderData":{"0":null,"0-2":{"total":7073,"projects":[{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"4c3c02","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":628,"cssLen":944,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n --color: #3dd5f3;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all .5s;\n border: none;\n background-color: transparent;\n}\n\n.btn div {\n letter-spacing: 2px;\n font-weight: bold;\n background: var(--color);\n border-radius: 2rem;\n color: black;\n padding: 1rem;\n}\n\n.btn::before {\n content: '';\n z-index: -1;\n background-color: var(--color);\n border: 2px solid black;\n border-radius: 2rem;\n width: 110%;\n height: 100%;\n position: absolute;\n transform: rotate(10deg);\n transition: .5s;\n opacity: 0.2;\n}\n\n.btn:hover {\n cursor: pointer;\n filter: brightness(1.2);\n transform: scale(1.1);\n}\n\n.btn:hover::before {\n transform: rotate(0deg);\n opacity: 1;\n}\n\n.btn svg {\n transform: translateX(-200%);\n transition: .5s;\n width: 0;\n opacity: 0;\n}\n\n.btn:hover svg {\n width: 25px;\n transform: translateX(0%);\n opacity: 1;\n}\n\n.btn:active {\n filter: brightness(1.4);\n}"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"8f640d","snapshot":null,"tags":null,"title":"button by csemszepp","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":86,"cssLen":2163,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\t

\n\t\t

\n\t

\t\n","css":".container {\n width: 1000px;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-around;\n}\n\n.container .btn {\n position: relative;\n top: 0;\n left: 0;\n width: 250px;\n height: 50px;\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.container .btn a {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n background: rgba(255, 255, 255, 0.05);\n box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 30px;\n padding: 10px;\n letter-spacing: 1px;\n text-decoration: none;\n overflow: hidden;\n color: #fff;\n font-weight: 400px;\n z-index: 1;\n transition: 0.5s;\n backdrop-filter: blur(15px);\n}\n\n.container .btn:hover a {\n letter-spacing: 3px;\n}\n\n.container .btn a::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 50%;\n height: 100%;\n background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);\n transform: skewX(45deg) translate(0);\n transition: 0.5s;\n filter: blur(0px);\n}\n\n.container .btn:hover a::before {\n transform: skewX(45deg) translate(200px);\n}\n\n.container .btn::before {\n content: \"\";\n position: absolute;\n left: 50%;\n transform: translatex(-50%);\n bottom: -5px;\n width: 30px;\n height: 10px;\n background: #f00;\n border-radius: 10px;\n transition: 0.5s;\n transition-delay: 0.5;\n}\n\n.container .btn:hover::before /*lightup button*/ {\n bottom: 0;\n height: 50%;\n width: 80%;\n border-radius: 30px;\n}\n\n.container .btn::after {\n content: \"\";\n position: absolute;\n left: 50%;\n transform: translatex(-50%);\n top: -5px;\n width: 30px;\n height: 10px;\n background: #f00;\n border-radius: 10px;\n transition: 0.5s;\n transition-delay: 0.5;\n}\n\n.container .btn:hover::after /*lightup button*/ {\n top: 0;\n height: 50%;\n width: 80%;\n border-radius: 30px;\n}\n\n.container .btn:nth-child(1)::before,\n.container .btn:nth-child(1)::after {\n background: #1eff45;\n box-shadow: 0 0 5px #1eff45, 0 0 15px #1eff45, 0 0 30px #1eff45,\n\t\t0 0 60px #1eff45;\n}\n"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"1ea4f1","snapshot":null,"tags":null,"title":"button by Bodyhc","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":968,"cssLen":535,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgb(66, 13, 240);\n width: 200px;\n height: 50px;\n border-radius: 10px;\n font-size: 18px;\n outline: 3px solid #270092;\n cursor: pointer;\n transition: ease-out .5s;\n}\n\n.button:hover {\n width: 180px;\n height: 60px;\n outline-offset: 4px;\n transform: scale(1.3) rotate(2deg);\n background-color: blue;\n box-shadow: 5px 20px #cdcbd4\n}\n\n.icon {\n color: #270092;\n margin-right: 5px;\n}\n\n.share {\n margin-left: 5px;\n color: #fff;\n}\n\n"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"dae43f","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":24,"cssLen":1326,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n height: 50px;\n margin: 5px;\n width: 120px;\n cursor: pointer;\n background: #7C4DFF;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n font-family: Consolas, Courier New, monospace;\n border: solid #754CFF 1px;\n font-size: 16px;\n color: rgb(161, 161, 161);\n -webkit-transition: 500ms;\n transition: 500ms;\n border-radius: 5px;\n background: linear-gradient(145deg, #4A2A99, #360E6F);\n -webkit-box-shadow: -1px -5px 15px #471C8B, \n 5px 5px 15px #471C8B, \n inset 5px 5px 10px #360E6F, \n inset -5px -5px 10px #360E6F;\n box-shadow: -1px -5px 15px #471C8B, \n 5px 5px 15px #471C8B, \n inset 5px 5px 10px #360E6F, \n inset -5px -5px 10px #360E6F;\n}\n\nbutton:hover {\n -webkit-box-shadow: 1px 1px 13px #300A67,\n -1px -1px 13px #4A2A99;\n box-shadow: 1px 1px 13px #300A67,\n -1px -1px 13px #4A2A99;\n color: #d6d6d6;\n -webkit-transition: 500ms;\n transition: 500ms;\n}\n\nbutton:active {\n -webkit-box-shadow: 1px 1px 13px #300A67,\n -1px -1px 33px #4A2A99;\n box-shadow: 1px 1px 13px #300A67,\n -1px -1px 33px #4A2A99;\n color: #d6d6d6;\n -webkit-transition: 100ms;\n transition: 100ms;\n}"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"b5de3e","snapshot":null,"tags":null,"title":"button by flxderdev","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":45,"cssLen":1512,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n height: 55px;\n width: 175px;\n margin: auto;\n align-items: center;\n border-radius: 50px;\n border: none;\n text-align: center;\n color: transparent;\n text-shadow: 0 0 0 rgb(255, 255, 255);\n font-size: 17px;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n box-sizing: border-box;\n cursor: pointer;\n transition: transform 50ms ease;\n background: linear-gradient(90deg, #fdec53, #f441a5, #b81fff, #5f03f4);\n color: #ffffff;\n text-shadow: rgba(140, 0, 255, 0.9) 0px 0px 20px;\n background-size: 400%;\n animation: welcome 0.5s ease 0s 1 normal forwards;\n display: block;\n margin-right: auto;\n margin-left: auto;\n font-family: \"Montserrat\", sans-serif;\n}\n\n.button:hover {\n -webkit-box-shadow: 0px 0px 15px 0px rgba(230, 219, 67, 0.9);\n -moz-box-shadow: 0px 0px 15px 0px rgba(224, 178, 78, 0.9);\n box-shadow: 0px 0px 15px 0px rgba(212, 133, 109, 0.9);\n animation: animate 8s ease infinite;\n transition: box-shadow, 0.4s;\n border: none;\n font-size: 19px;\n transform: scale(1.05, 1.05);\n background: linear-gradient(90deg, #fdec53, #cc5e4a, #dfad41, #fdec53);\n background-size: 400%;\n animation: animate 7s cubic-bezier(0.75, 0.75, 0.75, 0.75) infinite,\n}\n\n@keyframes animate {\n 0% {\n background-position: 0%;\n }\n\n 100% {\n background-position: 400%;\n }\n}\n\n@keyframes spin {\n 0% {\n --rotate: 0deg;\n }\n\n 100% {\n --rotate: 360deg;\n }\n}\n\n.button:hover:before {\n filter: blur(20px);\n opacity: 1;\n animation: animate 8s linear infinite;\n}"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"ec2f2a","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":521,"cssLen":1136,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n --main-focus: #2d8cf0;\n --font-color: #323232;\n --bg-color-sub: #dedede;\n --bg-color: #eee;\n --main-color: #323232;\n position: relative;\n width: 150px;\n height: 40px;\n cursor: pointer;\n display: flex;\n align-items: center;\n border: 2px solid var(--main-color);\n box-shadow: 4px 4px var(--main-color);\n background-color: var(--bg-color);\n border-radius: 10px;\n overflow: hidden;\n}\n\n.button, .button__icon, .button__text {\n transition: all 0.3s;\n}\n\n.button .button__text {\n transform: translateX(30px);\n color: var(--font-color);\n font-weight: 600;\n}\n\n.button .button__icon {\n position: absolute;\n transform: translateX(109px);\n height: 100%;\n width: 39px;\n background-color: var(--bg-color-sub);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.button .svg {\n width: 20px;\n fill: var(--main-color);\n}\n\n.button:hover {\n background: var(--bg-color);\n}\n\n.button:hover .button__text {\n color: transparent;\n}\n\n.button:hover .button__icon {\n width: 148px;\n transform: translateX(0);\n}\n\n.button:active {\n transform: translate(3px, 3px);\n box-shadow: 0px 0px var(--main-color);\n}"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"afe182","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":626,"cssLen":745,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n \n \n\n","css":".cursor-pointer {\n cursor: pointer;\n}\n.fill-none {\n fill: none;\n}\n.stroke-red-400 {\n stroke: #f87171;\n}\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.hover\\:rotate-90:hover {\n --tw-rotate: 90deg;\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\\:fill-red-800 {\n fill: #991b1b;\n}\n.group:active .group-active\\:fill-red-600 {\n fill: #dc2626;\n}\n.group:active .group-active\\:stroke-red-200 {\n stroke: #fecaca;\n}\n.group:active .group-active\\:duration-0 {\n transition-duration: 0s;\n}\n"},{"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}"}]}},"actionData":null,"errors":null}