{"loaderData":{"0":null,"0-2":{"total":7067,"projects":[{"created":"2024-01-22T17:00:40.000Z","isPrivate":0,"projectId":"48cfae","snapshot":null,"tags":null,"title":"button by Saad3092003","updated":"2024-01-22T17:00:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":171,"cssLen":2065,"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 display: inline-block;\n cursor: pointer;\n outline: none;\n border: 0;\n vertical-align: middle;\n text-decoration: none;\n background: transparent;\n padding: 0;\n font-size: inherit;\n font-family: inherit;\n}\n\nbutton.learn-more {\n width: 12rem;\n height: auto;\n}\n\nbutton.learn-more .circle {\n transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);\n box-shadow: 0 0 5px 1px white;\n position: relative;\n display: block;\n margin: 0;\n width: 3rem;\n height: 3rem;\n background: #282936;\n border-radius: 1.625rem;\n}\n\nbutton.learn-more .circle .icon {\n transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);\n position: absolute;\n top: 0;\n bottom: 0;\n margin: auto;\n background: #fff;\n}\n\nbutton.learn-more .circle .icon.arrow {\n transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);\n left: 0.625rem;\n width: 1.125rem;\n height: 0.125rem;\n background: none;\n}\n\nbutton.learn-more .circle .icon.arrow::before {\n position: absolute;\n content: \"\";\n top: -0.29rem;\n right: 0.0625rem;\n width: 0.625rem;\n height: 0.625rem;\n border-top: 0.125rem solid #fff;\n border-right: 0.125rem solid #fff;\n transform: rotate(45deg);\n}\n\nbutton.learn-more .button-text {\n transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n padding: 0.75rem 0;\n margin: 0 0 0 1.85rem;\n color: rgba(255, 255, 255, 0.493);\n font-weight: 700;\n line-height: 1.6;\n text-align: center;\n text-transform: uppercase;\n}\n\nbutton:hover .circle {\n width: 100%;\n box-shadow: 0 0 10px 2px white;\n}\n\nbutton:hover .button-text {\n transform: translate(-1.7rem, 0);\n}\n\nbutton:hover .circle .icon.arrow {\n background: #fff;\n transform: translate(8.7rem, 0);\n}\n\nbutton:active .circle .icon.arrow {\n transform: translate(9.5rem, 0);\n transition: all 0.3s;\n}\n\nbutton:active .circle {\n transform: scale(0.9);\n transition: all 0.3s;\n box-shadow: 0 0 5px 0.5px white;\n}\n\nbutton:hover .button-text {\n color: #fff;\n}\n\nbutton:active .button-text {\n color: rgba(255, 255, 255, 0.459);\n}"},{"created":"2024-01-22T17:00:40.000Z","isPrivate":0,"projectId":"25f983","snapshot":null,"tags":null,"title":"button by SteveBloX","updated":"2024-01-22T17:00:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1771,"cssLen":506,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 10px 15px;\n gap: 15px;\n background-color: #03c6d7;\n outline: 3px #03c6d7 solid;\n outline-offset: -3px;\n border-radius: 5px;\n border: none;\n cursor: pointer;\n transition: 400ms;\n}\n\n.button .text {\n color: white;\n font-weight: 700;\n font-size: 1em;\n transition: 400ms;\n}\n\n.button svg path {\n transition: 400ms;\n}\n\n.button:hover {\n background-color: transparent;\n}\n\n.button:hover .text {\n color: #007ACC;\n}"},{"created":"2024-01-22T17:00:40.000Z","isPrivate":0,"projectId":"e17773","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":46,"cssLen":434,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n --font-color: #323232;\n --bg-color: #fff;\n --main-color: #323232;\n width: 120px;\n height: 40px;\n border-radius: 5px;\n border: 2px solid var(--main-color);\n background-color: var(--bg-color);\n box-shadow: 4px 4px var(--main-color);\n font-size: 17px;\n font-weight: 600;\n color: var(--font-color);\n cursor: pointer;\n}\n\n.button:active {\n box-shadow: 0px 0px var(--main-color);\n transform: translate(3px, 3px);\n}\n"},{"created":"2024-01-22T17:00:40.000Z","isPrivate":0,"projectId":"5c4feb","snapshot":null,"tags":null,"title":"button by VashonG","updated":"2024-01-22T17:00:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":91,"cssLen":2243,"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","css":".container {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-around;\n width: 200px;\n}\n\n.container .btn {\n height: 50px;\n margin: 20px;\n margin-bottom: 40px;\n position: relative;\n width: 155px;\n}\n\n.container .btn a {\n align-items: center;\n background: rgba(255, 255, 255, 0.05);\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 box-shadow: 0 15px 35px rgba(255, 255, 255, 0.2);\n color: #fff;\n display: flex;\n font-size: 18px;\n font-weight: 700;\n left: 0;\n top: 0;\n position: absolute;\n height: 100%;\n width: 100%;\n justify-content: center;\n letter-spacing: 1px;\n text-decoration: none;\n overflow: hidden;\n -webkit-backdrop-filter: blur(10px);\n backdrop-filter: blur(15px);\n z-index: 1;\n transition: 0.5s;\n}\n\n.container .btn:hover a {\n letter-spacing: 2px;\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,\n rgba(255,255,255,0.15),\n transparent);\n transform: skewX(45deg) translateX(0);\n transition: 0.5s;\n}\n\n.container .btn:hover a::before {\n transform: skewX(45deg) translateX(200%);\n}\n\n.container .btn::before {\n content: '';\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n bottom: -5px;\n height: 10px;\n width: 30px;\n background: rgb(249, 26, 1);\n border-radius: 10px;\n transition: 0.5s;\n transition-delay: 0s;\n}\n\n.container .btn:hover::before {\n bottom: 0;\n height: 50%;\n width: 80%;\n border-radius: 30px;\n transition-delay: 0.5s;\n}\n\n.container .btn::after {\n content: '';\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n top: -5px;\n height: 10px;\n width: 30px;\n background: rgb(255, 0, 0);\n border-radius: 10px;\n transition: 0.5s;\n transition-delay: 0s;\n}\n\n.container .btn:hover::after {\n top: 0;\n height: 50%;\n width: 80%;\n border-radius: 30px;\n transition-delay: 0.5s;\n}\n\n.container .btn:nth-child(1):before,\n.container .btn:nth-child(1)::after {\n background: #ff0000;\n box-shadow: 0 0 5px #ff00008a,\n 0 0 15px #ff2b2b,\n 0 0 30px #ff2b2b,\n 0 0 60px #ff2b2b;\n}\n\n.container .btn:active a {\n color: #000;\n}\n"},{"created":"2024-01-22T17:00:39.000Z","isPrivate":0,"projectId":"82f85e","snapshot":null,"tags":null,"title":"button by reshades","updated":"2024-01-22T17:00:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":389,"cssLen":435,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n width: 10em;\n height: 3em;\n border-radius: 8px;\n border: 0.15em solid rgb(162, 63, 255);\n color: rgb(162, 63, 255);\n background-color: #00000000;\n transition: all 0.5s ease;\n}\n\n.button .text {\n display: none\n}\n\n.button:hover>.text {\n display: block;\n}\n\n.button:hover>svg {\n display: none;\n}\n\n.button:hover {\n background-color: rgb(162, 63, 255);\n color: #fff\n}\n\n.button svg {\n width: 1.5em;\n margin-top: 3px;\n}"},{"created":"2024-01-22T17:00:39.000Z","isPrivate":0,"projectId":"c54c92","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T17:00:39.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: #3d8bfd;\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: white;\n padding: 1rem;\n}\n\n.btn::before {\n content: '';\n z-index: -1;\n background-color: var(--color);\n border: 2px solid white;\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:39.000Z","isPrivate":0,"projectId":"380807","snapshot":null,"tags":null,"title":"button by ashish-yadv","updated":"2024-01-22T17:00:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":86,"cssLen":584,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Buy\n \n

\n","css":".button {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n}\n\n#buy {\n padding: 1.2rem 6rem;\n border: 0.065rem solid #000;\n border-radius: 6px;\n color: #fff;\n font-size: 1.5rem;\n font-weight: 600;\n letter-spacing: 0.111rem;\n transition: all 0.15s ease-in-out;\n background-color: #000;\n}\n\n#buy:hover {\n cursor: pointer;\n background-color: #ff91e7;\n color: #000;\n scale: 0.9;\n}\n\n#btn_back {\n width: 100%;\n height: 100%;\n background-color: #000;\n position: absolute;\n bottom: 0;\n right: 0;\n border-radius: 6px;\n z-index: -1;\n}\n"},{"created":"2024-01-22T17:00:39.000Z","isPrivate":0,"projectId":"04c665","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":33,"cssLen":1232,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n width: 45px;\n height: 45px;\n background-color: #3b5998;\n border: none;\n border-radius: 50%;\n position: relative;\n z-index: 1;\n overflow: hidden;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.185),\n 0px 3px 3px rgba(255, 255, 255, 0.178) inset,\n 0px -3px 3px rgba(0, 0, 0, 0.281) inset;\n transition: all .3s;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n padding-bottom: 3px;\n}\n\n.button::before {\n background-color: transparent;\n content: \"f\";\n font-size: 1.6em;\n font-weight: 700;\n color: white;\n z-index: 5;\n transition: all .3s;\n font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;\n}\n\n.button::after {\n content: \"acebook\";\n background-color: transparent;\n font-size: 0;\n opacity: 0;\n font-weight: 700;\n color: white;\n z-index: 5;\n transition: all .3s;\n transform: translateX(60px);\n font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;\n}\n\n.button:hover {\n width: 160px;\n border-radius: 30px;\n}\n\n.button:hover::after {\n opacity: 1;\n font-size: 1.6em;\n transform: translateX(0px);\n}\n\n.button:hover .shine {\n transform: translate(-70px ,10px);\n}"},{"created":"2024-01-22T17:00:39.000Z","isPrivate":0,"projectId":"c54130","snapshot":null,"tags":null,"title":"button by SteveBloX","updated":"2024-01-22T17:00:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":43,"cssLen":2760,"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 padding: 12px 24px;\n border-radius: 8px;\n border: none;\n color: #fff;\n cursor: pointer;\n background-color: #ff7f50;\n transition: all 0.2s ease;\n}\n\n.button:active {\n transform: scale(0.95);\n}\n\n.button:before,\n.button:after {\n position: absolute;\n content: \"\";\n width: 150%;\n left: 50%;\n height: 100%;\n transform: translateX(-50%);\n z-index: -1000;\n background-repeat: no-repeat;\n}\n\n.button:hover:before {\n top: -70%;\n background-image: radial-gradient(circle, #ff7f50 20%, transparent 20%),\n radial-gradient(circle, transparent 20%, #ff7f50 20%, transparent 30%),\n radial-gradient(circle, #ff7f50 20%, transparent 20%),\n radial-gradient(circle, #ff7f50 20%, transparent 20%),\n radial-gradient(circle, transparent 10%, #ff7f50 15%, transparent 20%),\n radial-gradient(circle, #ff7f50 20%, transparent 20%),\n radial-gradient(circle, #ff7f50 20%, transparent 20%),\n radial-gradient(circle, #ff7f50 20%, transparent 20%),\n radial-gradient(circle, #ff7f50 20%, transparent 20%);\n background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,\n 10% 10%, 18% 18%;\n background-position: 50% 120%;\n animation: orangeTopBubbles 0.6s ease;\n}\n\n@keyframes orangeTopBubbles {\n 0% {\n background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,\n 40% 90%, 55% 90%, 70% 90%;\n }\n\n 50% {\n background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,\n 50% 50%, 65% 20%, 90% 30%;\n }\n\n 100% {\n background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,\n 50% 40%, 65% 10%, 90% 20%;\n background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;\n }\n}\n\n.button:hover::after {\n bottom: -70%;\n background-image: radial-gradient(circle, #ff7f50 20%, transparent 20%),\n radial-gradient(circle, #ff7f50 20%, transparent 20%),\n radial-gradient(circle, transparent 10%, #ff7f50 15%, transparent 20%),\n radial-gradient(circle, #ff7f50 20%, transparent 20%),\n radial-gradient(circle, #ff7f50 20%, transparent 20%),\n radial-gradient(circle, #ff7f50 20%, transparent 20%),\n radial-gradient(circle, #ff7f50 20%, transparent 20%);\n background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;\n background-position: 50% 0%;\n animation: orangeBottomBubbles 0.6s ease;\n}\n\n@keyframes orangeBottomBubbles {\n 0% {\n background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,\n 70% -10%, 70% 0%;\n }\n\n 50% {\n background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,\n 105% 0%;\n }\n\n 100% {\n background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,\n 110% 10%;\n background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;\n }\n}"},{"created":"2024-01-22T17:00:39.000Z","isPrivate":0,"projectId":"7d38ee","snapshot":null,"tags":null,"title":"button by cohencoo","updated":"2024-01-22T17:00:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":450,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background: #282936;\n padding: 10px 2rem;\n outline: 2.5px solid #FEBF00;\n outline-offset: 3px;\n border: 0;\n color: white;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n font-size: 1rem;\n border-radius: 100rem;\n transition: 0.4s;\n font-weight: 600;\n}\n\nbutton:hover {\n outline-offset: 4.5px;\n background: #FEBF00;\n font-size: 1.1rem;\n}"},{"created":"2024-01-22T17:00:39.000Z","isPrivate":0,"projectId":"473d02","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":46,"cssLen":434,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n --font-color: #fefefe;\n --bg-color: #111;\n --main-color: #fefefe;\n width: 120px;\n height: 40px;\n border-radius: 5px;\n border: 2px solid var(--main-color);\n background-color: var(--bg-color);\n box-shadow: 4px 4px var(--main-color);\n font-size: 17px;\n font-weight: 600;\n color: var(--font-color);\n cursor: pointer;\n}\n\n.button:active {\n box-shadow: 0px 0px var(--main-color);\n transform: translate(3px, 3px);\n}\n"},{"created":"2024-01-22T17:00:39.000Z","isPrivate":0,"projectId":"6c5e89","snapshot":null,"tags":null,"title":"button by rhino-corey","updated":"2024-01-22T17:00:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":35,"cssLen":641,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n display: inline-block;\n position: relative;\n color: #fff;\n font-weight: 500;\n font-size: 14px;\n text-decoration: none;\n text-transform: uppercase;\n padding: 15px 30px;\n text-align: center;\n border: none;\n clip-path: polygon(7% 0, 93% 0, 100% 50%, 93% 100%, 7% 100%, 0 50%);\n background-color: #000000;\n background-image: radial-gradient(200% 70% at center 20%, rgba(48,44,45,1) -30%, rgba(50,46,47,1) 49%, rgba(22,18,19,1) 50%, rgba(22,18,19,1) 150%);\n background-repeat: no-repeat;\n transition: background-position-y ease-in-out 250ms;\n}\n\nbutton:hover {\n background-position-y: -50px;\n}\n\nbutton:active {\n transform: scale(0.99);\n}"}]}},"actionData":null,"errors":null}