{"loaderData":{"0":null,"0-3":{"total":7311,"projects":[{"created":"2024-01-22T16:59:42.000Z","isPrivate":0,"projectId":"77b6a1","snapshot":null,"tags":null,"title":"button by KINGFRESS","updated":"2024-01-22T16:59:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":326,"cssLen":1385,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n font-weight: bold;\n color: white;\n border-radius: 2rem;\n cursor: pointer;\n width: 95.02px;\n height: 42.66px;\n border: none;\n background-color: #3653f8;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\nbutton .span-mother {\n display: flex;\n overflow: hidden;\n}\n\nbutton:hover .span-mother {\n position: absolute;\n}\n\nbutton:hover .span-mother span {\n transform: translateY(1.2em);\n}\n\nbutton .span-mother span:nth-child(1) {\n transition: 0.2s;\n}\n\nbutton .span-mother span:nth-child(2) {\n transition: 0.3s;\n}\n\nbutton .span-mother span:nth-child(3) {\n transition: 0.4s;\n}\n\nbutton .span-mother span:nth-child(4) {\n transition: 0.5s;\n}\n\nbutton .span-mother span:nth-child(5) {\n transition: 0.6s;\n}\n\nbutton .span-mother span:nth-child(6) {\n transition: 0.7s;\n}\n\nbutton .span-mother2 {\n display: flex;\n position: absolute;\n overflow: hidden;\n}\n\nbutton .span-mother2 span {\n transform: translateY(-1.2em);\n}\n\nbutton:hover .span-mother2 span {\n transform: translateY(0);\n}\n\nbutton .span-mother2 span {\n transition: 0.2s;\n}\n\nbutton .span-mother2 span:nth-child(2) {\n transition: 0.3s;\n}\n\nbutton .span-mother2 span:nth-child(3) {\n transition: 0.4s;\n}\n\nbutton .span-mother2 span:nth-child(4) {\n transition: 0.5s;\n}\n\nbutton .span-mother2 span:nth-child(5) {\n transition: 0.6s;\n}\n\nbutton .span-mother2 span:nth-child(6) {\n transition: 0.7s;\n}\n"},{"created":"2024-01-22T16:59:42.000Z","isPrivate":0,"projectId":"fc2cab","snapshot":null,"tags":null,"title":"button by TISEPSE","updated":"2024-01-22T16:59:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":55,"cssLen":922,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"a {\n position: relative;\n display: inline-block;\n padding: 15px 30px;\n border: 2px solid #fefefe;\n text-transform: uppercase;\n color: #fefefe;\n text-decoration: none;\n font-weight: 600;\n font-size: 20px;\n}\n\na::before {\n content: '';\n position: absolute;\n top: 6px;\n left: -2px;\n width: calc(100% + 4px);\n height: calc(100% - 12px);\n background-color: #212121;\n transition: 0.3s ease-in-out;\n transform: scaleY(1);\n}\n\na:hover::before {\n transform: scaleY(0);\n}\n\na::after {\n content: '';\n position: absolute;\n left: 6px;\n top: -2px;\n height: calc(100% + 4px);\n width: calc(100% - 12px);\n background-color: #212121;\n transition: 0.3s ease-in-out;\n transform: scaleX(1);\n transition-delay: 0.5s;\n}\n\na:hover::after {\n transform: scaleX(0);\n}\n\na span {\n position: relative;\n z-index: 3;\n}\n\nbutton {\n background-color: none;\n text-decoration: none;\n background-color: #212121;\n border: none;\n}"},{"created":"2024-01-22T16:59:42.000Z","isPrivate":0,"projectId":"f533ea","snapshot":null,"tags":null,"title":"button by kirzin","updated":"2024-01-22T16:59:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":944,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n text-decoration: none;\n position: relative;\n border: none;\n font-size: 14px;\n font-family: inherit;\n cursor: pointer;\n color: #fff;\n width: 9em;\n height: 3em;\n line-height: 2em;\n text-align: center;\n background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);\n background-size: 300%;\n border-radius: 30px;\n z-index: 1;\n}\n\nbutton:hover {\n animation: ani 8s linear infinite;\n border: none;\n}\n\n@keyframes ani {\n 0% {\n background-position: 0%;\n }\n\n 100% {\n background-position: 400%;\n }\n}\n\nbutton:before {\n content: \"\";\n position: absolute;\n top: -5px;\n left: -5px;\n right: -5px;\n bottom: -5px;\n z-index: -1;\n background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);\n background-size: 400%;\n border-radius: 35px;\n transition: 1s;\n}\n\nbutton:hover::before {\n filter: blur(20px);\n}\n\nbutton:active {\n background: linear-gradient(32deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);\n}\n"},{"created":"2024-01-22T16:59:42.000Z","isPrivate":0,"projectId":"fe634a","snapshot":null,"tags":null,"title":"button by kamehame-ha","updated":"2024-01-22T16:59:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1636,"cssLen":1614,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n","css":".light-button button.bt {\n position: relative;\n height: 200px;\n display: flex;\n align-items: flex-end;\n outline: none;\n background: none;\n border: none;\n cursor: pointer;\n}\n\n.light-button button.bt .button-holder {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100px;\n width: 100px;\n background-color: #0a0a0a;\n border-radius: 5px;\n color: #0f0f0f;\n font-weight: 700;\n transition: 300ms;\n outline: #0f0f0f 2px solid;\n outline-offset: 20;\n}\n\n.light-button button.bt .button-holder svg {\n height: 50px;\n fill: #0f0f0f;\n transition: 300ms;\n}\n\n.light-button button.bt .light-holder {\n position: absolute;\n height: 200px;\n width: 100px;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.light-button button.bt .light-holder .dot {\n position: absolute;\n top: 0;\n width: 10px;\n height: 10px;\n background-color: #0a0a0a;\n border-radius: 10px;\n z-index: 2;\n}\n\n.light-button button.bt .light-holder .light {\n position: absolute;\n top: 0;\n width: 200px;\n height: 200px;\n clip-path: polygon(50% 0%, 25% 100%, 75% 100%);\n background: transparent;\n}\n\n.light-button button.bt:hover .button-holder svg {\n fill: rgba(88, 101, 242, 1);\n}\n\n.light-button button.bt:hover .button-holder {\n color: rgba(88, 101, 242, 1);\n outline: rgba(88, 101, 242, 1) 2px solid;\n outline-offset: 2px;\n}\n\n.light-button button.bt:hover .light-holder .light {\n background: rgb(255, 255, 255);\n background: linear-gradient(\n 180deg,\n rgba(88, 101, 242, 1) 0%,\n rgba(255, 255, 255, 0) 75%,\n rgba(255, 255, 255, 0) 100%\n );\n}\n"},{"created":"2024-01-22T16:59:42.000Z","isPrivate":0,"projectId":"497a29","snapshot":null,"tags":null,"title":"button by satyamchaudharydev","updated":"2024-01-22T16:59:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":35,"cssLen":2248,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n border: none;\n width: 140px;\n height: 50px;\n color: #fff;\n z-index: 1;\n display: flex;\n background: #000;\n position: relative;\n cursor: pointer;\n}\n\nbutton p {\n margin: 0 auto;\n align-self: center;\n font-size: 17px;\n font-weight: bold;\n text-align: center;\n}\n\nbutton::after {\n position: absolute;\n content: \"\";\n width: 100%;\n z-index: -1;\n height: 10%;\n bottom: 0;\n clip-path: polygon(\n 0% 74%,\n 4% 75%,\n 8% 76%,\n 11% 77%,\n 15% 78%,\n 20% 78%,\n 25% 77%,\n 32% 77%,\n 37% 75%,\n 40% 74%,\n 43% 74%,\n 46% 73%,\n 52% 72%,\n 57% 72%,\n 65% 74%,\n 66% 75%,\n 71% 78%,\n 75% 82%,\n 81% 86%,\n 83% 88%,\n 88% 91%,\n 90% 94%,\n 94% 96%,\n 98% 98%,\n 100% 100%,\n 82% 100%,\n 0 100%\n );\n background: #8792eb;\n transition: 0.2s ease;\n}\n\nbutton::before {\n position: absolute;\n content: \"\";\n /* bottom: 80%; */\n transform: rotate(180deg);\n width: 100%;\n height: 10%;\n transition: 0.2s ease;\n /* bottom:; */\n z-index: -1;\n clip-path: polygon(\n 0% 74%,\n 4% 75%,\n 8% 76%,\n 11% 77%,\n 15% 78%,\n 20% 78%,\n 25% 77%,\n 32% 77%,\n 37% 75%,\n 40% 74%,\n 43% 74%,\n 46% 73%,\n 52% 72%,\n 57% 72%,\n 65% 74%,\n 66% 75%,\n 71% 78%,\n 75% 82%,\n 81% 86%,\n 83% 88%,\n 88% 91%,\n 90% 94%,\n 94% 96%,\n 98% 98%,\n 100% 100%,\n 82% 100%,\n 0 100%\n );\n background: #8792eb;\n}\n\nbutton:hover::after {\n clip-path: polygon(\n 0 30%,\n 9% 34%,\n 7% 39%,\n 11% 43%,\n 13% 33%,\n 17% 30%,\n 24% 34%,\n 25% 35%,\n 30% 31%,\n 30% 38%,\n 39% 33%,\n 35% 43%,\n 43% 45%,\n 55% 46%,\n 65% 74%,\n 67% 66%,\n 81% 57%,\n 75% 82%,\n 81% 86%,\n 83% 88%,\n 88% 91%,\n 90% 94%,\n 94% 96%,\n 98% 98%,\n 100% 100%,\n 82% 100%,\n 0 100%\n );\n height: 80%;\n}\n\nbutton:hover::before {\n clip-path: polygon(\n 0 30%,\n 9% 34%,\n 7% 39%,\n 11% 43%,\n 13% 33%,\n 17% 30%,\n 24% 34%,\n 25% 35%,\n 30% 31%,\n 30% 38%,\n 39% 33%,\n 35% 43%,\n 43% 45%,\n 55% 46%,\n 65% 74%,\n 67% 66%,\n 81% 57%,\n 75% 82%,\n 81% 86%,\n 83% 88%,\n 88% 91%,\n 90% 94%,\n 94% 96%,\n 98% 98%,\n 100% 100%,\n 82% 100%,\n 0 100%\n );\n height: 80%;\n}\n"},{"created":"2024-01-22T16:59:42.000Z","isPrivate":0,"projectId":"5c3fef","snapshot":null,"tags":null,"title":"button by cssbuttons-io","updated":"2024-01-22T16:59:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":704,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n --color: #560bad;\n font-family: inherit;\n display: inline-block;\n width: 8em;\n height: 2.6em;\n line-height: 2.5em;\n margin: 20px;\n position: relative;\n overflow: hidden;\n border: 2px solid var(--color);\n transition: color .5s;\n z-index: 1;\n font-size: 17px;\n border-radius: 6px;\n font-weight: 500;\n color: var(--color);\n}\n\nbutton:before {\n content: \"\";\n position: absolute;\n z-index: -1;\n background: var(--color);\n height: 150px;\n width: 200px;\n border-radius: 50%;\n}\n\nbutton:hover {\n color: #fff;\n}\n\nbutton:before {\n top: 100%;\n left: 100%;\n transition: all .7s;\n}\n\nbutton:hover:before {\n top: -30px;\n left: -30px;\n}\n\nbutton:active:before {\n background: #3a0ca3;\n transition: background 0s;\n}"},{"created":"2024-01-22T16:59:42.000Z","isPrivate":0,"projectId":"051d0c","snapshot":null,"tags":null,"title":"button by sekaiking","updated":"2024-01-22T16:59:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":31,"cssLen":441,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background-color: white;\n color: black;\n border-radius: 10em;\n font-size: 17px;\n font-weight: 600;\n padding: 1em 2em;\n cursor: pointer;\n transition: all 0.3s ease-in-out;\n border: 1px solid black;\n box-shadow: 0 0 0 0 black;\n}\n\nbutton:hover {\n transform: translateY(-4px) translateX(-2px);\n box-shadow: 2px 5px 0 0 black;\n};\n\nbutton:active {\n transform: translateY(2px) translateX(1px);\n box-shadow: 0 0 0 0 black;\n};"},{"created":"2024-01-22T16:59:42.000Z","isPrivate":0,"projectId":"6f22ad","snapshot":null,"tags":null,"title":"button by learnMyHobby","updated":"2024-01-22T16:59:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":40,"cssLen":1675,"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 text-decoration: none;\n font-size: 15px;\n text-transform: uppercase;\n letter-spacing: 5px;\n line-height: 48px;\n width: 160px;\n cursor: pointer;\n font-weight: bold;\n height: 55px;\n -webkit-box-reflect: bottom 1px linear-gradient(transparent, #0004);\n}\n\nbutton span {\n position: absolute;\n display: flex;\n justify-content: center;\n top: 4px;\n right: 4px;\n bottom: 4px;\n left: 4px;\n text-align: center;\n background: #2e2e2e;\n color: rgba(255, 255, 255, 0.781);\n transition: 0.5s;\n z-index: 1;\n}\n\nbutton:hover span {\n color: rgba(255, 255, 255, 1);\n}\n\nbutton::before {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n background-size: 400%;\n opacity: 0;\n transition: 0.5s;\n background: linear-gradient(\n 45deg,\n #91155d,\n #525296,\n #0f0,\n #ff0,\n #fb0094,\n #00f,\n #0f0,\n #ff0\n );\n animation: animate123 20% linear infinte;\n}\n\nbutton::after {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n background-size: 400%;\n filter: blur(20px);\n transition: 0.5s;\n background: linear-gradient(\n 45deg,\n #91155d,\n #525296,\n #0f0,\n #ff0,\n #fb0094,\n #00f,\n #0f0,\n #ff0\n );\n animation: animate123 20% linear infinte;\n}\n\nbutton:hover::before,\nbutton:hover::after {\n opacity: 1;\n}\n\n@keyframes animate123 {\n 0% {\n background-position: 0 0;\n }\n\n 50% {\n background-position: 300% 0;\n }\n\n 100% {\n background-position: 0 0;\n }\n}\n\nbutton span::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 50%;\n background: rgba(255, 255, 255, 0.1);\n}\n"},{"created":"2024-01-22T16:59:42.000Z","isPrivate":0,"projectId":"483446","snapshot":null,"tags":null,"title":"button by barisdogansutcu","updated":"2024-01-22T16:59:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":949,"cssLen":4685,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n font-size: 14px;\n background-image: linear-gradient(#3470fa, #313ed7);\n color: white;\n border: solid 2px #0618db;\n height: 50px;\n padding: 0px 20px;\n border-radius: 5px;\n font-weight: 600;\n transform: scale(0.89);\n position: relative;\n}\n.button:not(:hover) .hide,\n.button:not(:hover) .icon::before,\n.button:not(:hover) .icon::after {\n opacity: 0;\n visibility: hidden;\n transform: scale(1.4);\n}\n.hide {\n transition: all 0.2s ease;\n}\n.button:active {\n background-image: linear-gradient(#313ed7, #3470fa);\n border-color: #313ed7;\n}\n.icon {\n position: relative;\n}\n.icon::before {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n width: 6px;\n height: 6px;\n transform: translate(-50%, -50%);\n background-color: #ffffff;\n border-radius: 100%;\n}\n.icon::after {\n content: \"\";\n position: absolute;\n right: 0;\n bottom: 0;\n transform: translate(-19%, -60%);\n width: 100px;\n height: 33px;\n background-color: transparent;\n border-radius: 12px 22px 2px 2px;\n border-right: solid 2px #ffffff;\n border-top: solid 2px transparent;\n}\n.icon .text-icon {\n color: #ffffff;\n position: absolute;\n font-size: 12px;\n left: -37px;\n top: -38px;\n}\n.icon svg {\n width: 20px;\n height: 20px;\n border: solid 2px transparent;\n display: flex;\n}\n.button:hover .icon svg {\n border: solid 2px #ffffff;\n}\n.padding-left {\n position: absolute;\n width: 20px;\n height: 2px;\n background-color: #ffffff;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n}\n.padding-left:before {\n content: \"\";\n width: 2px;\n height: 10px;\n background-color: #ffffff;\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n}\n.padding-left:after {\n content: \"\";\n width: 2px;\n height: 10px;\n background-color: #ffffff;\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n}\n.padding-left-line {\n position: absolute;\n width: 30px;\n height: 2px;\n background-color: #ffffff;\n left: -24px;\n top: 11px;\n transform: rotate(-50deg);\n}\n.padding-left-line::before {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n width: 6px;\n height: 6px;\n transform: translate(-50%, -50%);\n background-color: #ffffff;\n border-radius: 100%;\n}\n.padding-left-text {\n color: #ffffff;\n font-size: 12px;\n position: absolute;\n white-space: nowrap;\n transform: rotate(50deg);\n bottom: 30px;\n left: -67px;\n}\n\n.padding-right {\n position: absolute;\n width: 20px;\n height: 2px;\n background-color: #ffffff;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n}\n.padding-right:before {\n content: \"\";\n width: 2px;\n height: 10px;\n background-color: #ffffff;\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n}\n.padding-right:after {\n content: \"\";\n width: 2px;\n height: 10px;\n background-color: #ffffff;\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n}\n.padding-right-line {\n position: absolute;\n width: 30px;\n height: 2px;\n background-color: #ffffff;\n right: -24px;\n top: 11px;\n transform: rotate(50deg);\n}\n.padding-right-line::before {\n content: \"\";\n position: absolute;\n left: 30px;\n top: 0;\n width: 6px;\n height: 6px;\n transform: translate(-50%, -50%);\n background-color: #ffffff;\n border-radius: 100%;\n}\n.padding-right-text {\n color: #ffffff;\n font-size: 12px;\n position: absolute;\n white-space: nowrap;\n transform: rotate(-50deg);\n bottom: 34px;\n left: 21px;\n}\n.background {\n position: absolute;\n}\n.background::before {\n content: \"\";\n position: absolute;\n right: 27px;\n bottom: -70px;\n width: 100px;\n height: 53px;\n background-color: transparent;\n border-radius: 0px 0px 22px 22px;\n border-right: solid 2px #ffffff;\n border-bottom: solid 2px transparent;\n}\n.background::after {\n content: \"\";\n position: absolute;\n right: 25px;\n bottom: -20px;\n width: 6px;\n height: 6px;\n background-color: #ffffff;\n border-radius: 100%;\n}\n.background-text {\n position: absolute;\n color: #ffffff;\n font-size: 12px;\n bottom: -70px;\n left: -115px;\n}\n.border {\n position: absolute;\n right: 0;\n top: 0;\n}\n.border:before {\n content: \"\";\n width: 15px;\n height: 15px;\n border: solid 2px #ffffff;\n position: absolute;\n right: 0%;\n top: 0;\n transform: translate(50%, -50%);\n border-radius: 100%;\n}\n.border:after {\n content: \"\";\n width: 2px;\n height: 25px;\n background-color: #ffffff;\n position: absolute;\n right: -10px;\n top: -15px;\n transform: translate(50%, -50%) rotate(60deg);\n}\n.border .border-text {\n position: absolute;\n color: #ffffff;\n font-size: 12px;\n right: -112px;\n top: -30px;\n white-space: nowrap;\n}\n"},{"created":"2024-01-22T16:59:42.000Z","isPrivate":0,"projectId":"7d3e61","snapshot":null,"tags":null,"title":"button by kamehame-ha","updated":"2024-01-22T16:59:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1148,"cssLen":551,"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: #181717;\n outline: 3px #181717 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: #181717;\n}\n\n.button:hover svg path {\n fill: #181717;\n}"},{"created":"2024-01-22T16:59:42.000Z","isPrivate":0,"projectId":"b11e8a","snapshot":null,"tags":null,"title":"button by cssbuttons-io","updated":"2024-01-22T16:59:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":53,"cssLen":841,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n align-items: center;\n background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB);\n border: 0;\n border-radius: 8px;\n box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;\n box-sizing: border-box;\n color: #FFFFFF;\n display: flex;\n font-family: Phantomsans, sans-serif;\n font-size: 18px;\n justify-content: center;\n line-height: 1em;\n max-width: 100%;\n min-width: 140px;\n padding: 3px;\n text-decoration: none;\n user-select: none;\n -webkit-user-select: none;\n touch-action: manipulation;\n white-space: nowrap;\n cursor: pointer;\n transition: all .3s;\n}\n\nbutton:active,\nbutton:hover {\n outline: 0;\n}\n\nbutton span {\n background-color: rgb(5, 6, 45);\n padding: 16px 24px;\n border-radius: 6px;\n width: 100%;\n height: 100%;\n transition: 300ms;\n}\n\nbutton:hover span {\n background: none;\n}\n\nbutton:active {\n transform: scale(0.9);\n}"},{"created":"2024-01-22T16:59:42.000Z","isPrivate":0,"projectId":"90915a","snapshot":null,"tags":null,"title":"button by mobinkakei","updated":"2024-01-22T16:59:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":122,"cssLen":702,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n width: 140px;\n height: 50px;\n background: linear-gradient(to top, #00154c, #12376e, #23487f);\n color: #fff;\n border-radius: 50px;\n border: none;\n outline: none;\n cursor: pointer;\n position: relative;\n box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);\n overflow: hidden;\n}\n\n.btn span {\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 1px;\n transition: top 0.5s;\n}\n\n.btn-text-one {\n position: absolute;\n width: 100%;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n}\n\n.btn-text-two {\n position: absolute;\n width: 100%;\n top: 150%;\n left: 0;\n transform: translateY(-50%);\n}\n\n.btn:hover .btn-text-one {\n top: -100%;\n}\n\n.btn:hover .btn-text-two {\n top: 50%;\n}\n"}]}},"actionData":null,"errors":null}