{"loaderData":{"0":null,"0-3":{"total":7311,"projects":[{"created":"2024-01-22T16:59:09.000Z","isPrivate":0,"projectId":"a4deba","snapshot":"https://s1.qingting.work/runjs/776fcc2a58f8.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T18:59:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":666,"cssLen":947,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n width: 200px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 10px;\n padding: 0px 15px;\n background-color: rgb(66, 66, 66);\n border-radius: 10px;\n color: white;\n border: none;\n position: relative;\n cursor: pointer;\n transition-duration: .2s;\n}\n\n.bell {\n width: 13px;\n}\n\n.bell path {\n fill: rgb(0, 206, 62);\n}\n\n.arrow {\n position: absolute;\n right: 0;\n width: 30px;\n height: 100%;\n font-size: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.button:hover {\n background-color: rgb(77, 77, 77);\n transition-duration: .2s;\n}\n\n.button:hover .arrow {\n animation: slide-right .6s ease-out both;\n}\n/* arrow animation */\n@keyframes slide-right {\n 0% {\n transform: translateX(-10px);\n opacity: 0;\n }\n\n 100% {\n transform: translateX(0);\n opacity: 1;\n }\n}\n\n.button:active {\n transform: translate(1px , 1px);\n transition-duration: .2s;\n}\n"},{"created":"2024-01-22T16:59:09.000Z","isPrivate":0,"projectId":"626858","snapshot":"https://s1.qingting.work/runjs/fb1e01653a1d.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by zjssun","updated":"2024-01-22T18:59:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":33,"cssLen":566,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n padding: 10px 20px;\n text-transform: uppercase;\n border-radius: 8px;\n font-size: 17px;\n font-weight: 500;\n color: #ffffff80;\n text-shadow: none;\n background: transparent;\n cursor: pointer;\n box-shadow: transparent;\n border: 1px solid #ffffff80;\n transition: 0.5s ease;\n user-select: none;\n}\n\n#btn:hover,\n:focus {\n color: #ffffff;\n background: #008cff;\n border: 1px solid #008cff;\n text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 20px #ffffff;\n box-shadow: 0 0 5px #008cff, 0 0 20px #008cff, 0 0 50px #008cff,\n 0 0 100px #008cff;\n}\n"},{"created":"2024-01-22T16:59:09.000Z","isPrivate":0,"projectId":"ed5407","snapshot":"https://s1.qingting.work/runjs/0f0d9f5fe853.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by JkHuger","updated":"2024-01-22T18:59:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":98,"cssLen":849,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".rainbow-hover {\n font-size: 16px;\n font-weight: 700;\n color: #ff7576;\n background-color: #2B3044;\n border: none;\n outline: none;\n cursor: pointer;\n padding: 12px 24px;\n position: relative;\n line-height: 24px;\n border-radius: 9px;\n box-shadow: 0px 1px 2px #2B3044,\n 0px 4px 16px #2B3044;\n transform-style: preserve-3d;\n transform: scale(var(--s, 1)) perspective(600px)\n rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));\n perspective: 600px;\n transition: transform 0.1s;\n}\n\n.sp {\n background: linear-gradient(\n 90deg,\n #866ee7,\n #ea60da,\n #ed8f57,\n #fbd41d,\n #2cca91\n );\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n text-fill-color: transparent;\n display: block;\n}\n\n.rainbow-hover:active {\n transition: 0.3s;\n transform: scale(0.93);\n}"},{"created":"2024-01-22T16:59:09.000Z","isPrivate":0,"projectId":"b1cff0","snapshot":"https://s1.qingting.work/runjs/cb6891811710.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by KINGFRESS","updated":"2024-01-22T18:59:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":226,"cssLen":974,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n font-family: Arial, Helvetica, sans-serif;\n font-weight: bold;\n color: white;\n background-color: #171717;\n padding: 1em 2em;\n border: none;\n border-radius: .6rem;\n position: relative;\n cursor: pointer;\n overflow: hidden;\n}\n\nbutton span:not(:nth-child(6)) {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n height: 30px;\n width: 30px;\n background-color: #0c66ed;\n border-radius: 50%;\n transition: .6s ease;\n}\n\nbutton span:nth-child(6) {\n position: relative;\n}\n\nbutton span:nth-child(1) {\n transform: translate(-3.3em, -4em);\n}\n\nbutton span:nth-child(2) {\n transform: translate(-6em, 1.3em);\n}\n\nbutton span:nth-child(3) {\n transform: translate(-.2em, 1.8em);\n}\n\nbutton span:nth-child(4) {\n transform: translate(3.5em, 1.4em);\n}\n\nbutton span:nth-child(5) {\n transform: translate(3.5em, -3.8em);\n}\n\nbutton:hover span:not(:nth-child(6)) {\n transform: translate(-50%, -50%) scale(4);\n transition: 1.5s ease;\n}\n "},{"created":"2024-01-22T16:59:09.000Z","isPrivate":0,"projectId":"dd177c","snapshot":"https://s1.qingting.work/runjs/bd5be0402436.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by eirikvold","updated":"2024-01-22T18:59:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":467,"cssLen":1058,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n font-family: inherit;\n font-size: 18px;\n background: linear-gradient(to bottom, #4dc7d9 0%,#66a6ff 100%);\n color: white;\n padding: 0.8em 1.2em;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: 25px;\n box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);\n transition: all 0.3s;\n}\n\nbutton:hover {\n transform: translateY(-3px);\n box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);\n}\n\nbutton:active {\n transform: scale(0.95);\n box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);\n}\n\nbutton span {\n display: block;\n margin-left: 0.4em;\n transition: all 0.3s;\n}\n\nbutton svg {\n width: 18px;\n height: 18px;\n fill: white;\n transition: all 0.3s;\n}\n\nbutton .svg-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n background-color: rgba(255, 255, 255, 0.2);\n margin-right: 0.5em;\n transition: all 0.3s;\n}\n\nbutton:hover .svg-wrapper {\n background-color: rgba(255, 255, 255, 0.5);\n}\n\nbutton:hover svg {\n transform: rotate(45deg);\n}\n\n"},{"created":"2024-01-22T16:59:09.000Z","isPrivate":0,"projectId":"28ac93","snapshot":"https://s1.qingting.work/runjs/e78d958715ce.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by SujitAdroja","updated":"2024-01-22T18:59:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":47,"cssLen":532,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n color: purple;\n text-transform: uppercase;\n text-decoration: none;\n border: 2px solid purple;\n padding: 10px 20px;\n font-size: 17px;\n font-weight: bold;\n background: transparent;\n position: relative;\n transition: all 1s;\n overflow: hidden;\n}\n\n.btn:hover {\n color: white;\n}\n\n.btn::before {\n content: '';\n position: absolute;\n height: 100%;\n width: 0%;\n top: 0;\n left: -40px;\n transform: skewX(45deg);\n background-color: purple;\n z-index: -1;\n transition: all 1s;\n}\n\n.btn:hover::before {\n width: 160%;\n}"},{"created":"2024-01-22T16:59:09.000Z","isPrivate":0,"projectId":"b18e68","snapshot":"https://s1.qingting.work/runjs/d8f0a448f91b.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by MuhammadHasann","updated":"2024-01-22T18:59:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4576,"cssLen":2511,"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 35px;\n background: #fec195;\n font-size: 17px;\n font-weight: 500;\n color: #181818;\n border: 3px solid #fec195;\n border-radius: 8px;\n box-shadow: 0 0 0 #fec1958c;\n transition: all 0.3s ease-in-out;\n cursor: pointer;\n}\n\n.star-1 {\n position: absolute;\n top: 20%;\n left: 20%;\n width: 25px;\n height: auto;\n filter: drop-shadow(0 0 0 #fffdef);\n z-index: -5;\n transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);\n}\n\n.star-2 {\n position: absolute;\n top: 45%;\n left: 45%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 0 #fffdef);\n z-index: -5;\n transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);\n}\n\n.star-3 {\n position: absolute;\n top: 40%;\n left: 40%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 0 #fffdef);\n z-index: -5;\n transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);\n}\n\n.star-4 {\n position: absolute;\n top: 20%;\n left: 40%;\n width: 8px;\n height: auto;\n filter: drop-shadow(0 0 0 #fffdef);\n z-index: -5;\n transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01);\n}\n\n.star-5 {\n position: absolute;\n top: 25%;\n left: 45%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 0 #fffdef);\n z-index: -5;\n transition: all 0.6s cubic-bezier(0, 0.4, 0, 1.01);\n}\n\n.star-6 {\n position: absolute;\n top: 5%;\n left: 50%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 0 #fffdef);\n z-index: -5;\n transition: all 0.8s ease;\n}\n\nbutton:hover {\n background: transparent;\n color: #fec195;\n box-shadow: 0 0 25px #fec1958c;\n}\n\nbutton:hover .star-1 {\n position: absolute;\n top: -80%;\n left: -30%;\n width: 25px;\n height: auto;\n filter: drop-shadow(0 0 10px #fffdef);\n z-index: 2;\n}\n\nbutton:hover .star-2 {\n position: absolute;\n top: -25%;\n left: 10%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 10px #fffdef);\n z-index: 2;\n}\n\nbutton:hover .star-3 {\n position: absolute;\n top: 55%;\n left: 25%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 10px #fffdef);\n z-index: 2;\n}\n\nbutton:hover .star-4 {\n position: absolute;\n top: 30%;\n left: 80%;\n width: 8px;\n height: auto;\n filter: drop-shadow(0 0 10px #fffdef);\n z-index: 2;\n}\n\nbutton:hover .star-5 {\n position: absolute;\n top: 25%;\n left: 115%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 10px #fffdef);\n z-index: 2;\n}\n\nbutton:hover .star-6 {\n position: absolute;\n top: 5%;\n left: 60%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 10px #fffdef);\n z-index: 2;\n}\n\n.fil0 {\n fill: #fffdef;\n}\n"},{"created":"2024-01-22T16:59:09.000Z","isPrivate":0,"projectId":"94f824","snapshot":"https://s1.qingting.work/runjs/c17b36a5ef02.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by Yaya12085","updated":"2024-01-22T18:59:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":777,"cssLen":706,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n GET IT ON\n Google Play\n \n","css":".playstore-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 2px solid #000;\n border-radius: 9999px;\n background-color: rgba(0, 0, 0, 1);\n padding: 0.625rem 1.5rem;\n text-align: center;\n color: rgba(255, 255, 255, 1);\n outline: 0;\n transition: all .2s ease;\n text-decoration: none;\n}\n\n.playstore-button:hover {\n background-color: transparent;\n color: rgba(0, 0, 0, 1);\n}\n\n.icon {\n height: 1.5rem;\n width: 1.5rem;\n}\n\n.texts {\n margin-left: 1rem;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n line-height: 1;\n}\n\n.text-1 {\n margin-bottom: 0.25rem;\n font-size: 0.75rem;\n line-height: 1rem;\n}\n\n.text-2 {\n font-weight: 600;\n}"},{"created":"2024-01-22T16:59:09.000Z","isPrivate":0,"projectId":"f85647","snapshot":"https://s1.qingting.work/runjs/adef6a245fb1.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by OnCloud125252","updated":"2024-01-22T18:59:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":284,"cssLen":1434,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":"/* Note that you only needs to edit the config to customize the button! */\n\n.plusButton {\n /* Config start */\n --plus_sideLength: 2.5rem;\n --plus_topRightTriangleSideLength: 0.9rem;\n /* Config end */\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid white;\n width: var(--plus_sideLength);\n height: var(--plus_sideLength);\n background-color: #000000;\n overflow: hidden;\n}\n\n.plusButton::before {\n position: absolute;\n content: \"\";\n top: 0;\n right: 0;\n width: 0;\n height: 0;\n border-width: 0 var(--plus_topRightTriangleSideLength) var(--plus_topRightTriangleSideLength) 0;\n border-style: solid;\n border-color: transparent white transparent transparent;\n transition-timing-function: ease-in-out;\n transition-duration: 0.2s;\n}\n\n.plusButton:hover {\n cursor: pointer;\n}\n\n.plusButton:hover::before {\n --plus_topRightTriangleSideLength: calc(var(--plus_sideLength) * 2);\n}\n\n.plusButton:focus-visible::before {\n --plus_topRightTriangleSideLength: calc(var(--plus_sideLength) * 2);\n}\n\n.plusButton>.plusIcon {\n fill: white;\n width: calc(var(--plus_sideLength) * 0.7);\n height: calc(var(--plus_sideLength) * 0.7);\n z-index: 1;\n transition-timing-function: ease-in-out;\n transition-duration: 0.2s;\n}\n\n.plusButton:hover>.plusIcon {\n fill: black;\n transform: rotate(180deg);\n}\n\n.plusButton:focus-visible>.plusIcon {\n fill: black;\n transform: rotate(180deg);\n}"},{"created":"2024-01-22T16:59:09.000Z","isPrivate":0,"projectId":"66906e","snapshot":"https://s1.qingting.work/runjs/18c47917d86e.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by Galahhad","updated":"2024-01-22T18:59:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":64,"cssLen":2355,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".ui-btn {\n --btn-default-bg: rgb(41, 41, 41);\n --btn-padding: 15px 20px;\n --btn-hover-bg: rgb(51, 51, 51);\n --btn-transition: .3s;\n --btn-letter-spacing: .1rem;\n --btn-animation-duration: 1.2s;\n --btn-shadow-color: rgba(0, 0, 0, 0.137);\n --btn-shadow: 0 2px 10px 0 var(--btn-shadow-color);\n --hover-btn-color: #FAC921;\n --default-btn-color: #fff;\n --font-size: 16px;\n /* 👆 this field should not be empty */\n --font-weight: 600;\n --font-family: Menlo,Roboto Mono,monospace;\n /* 👆 this field should not be empty */\n}\n\n/* button settings 👆 */\n\n.ui-btn {\n box-sizing: border-box;\n padding: var(--btn-padding);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--default-btn-color);\n font: var(--font-weight) var(--font-size) var(--font-family);\n background: var(--btn-default-bg);\n border: none;\n cursor: pointer;\n transition: var(--btn-transition);\n overflow: hidden;\n box-shadow: var(--btn-shadow);\n}\n\n.ui-btn span {\n letter-spacing: var(--btn-letter-spacing);\n transition: var(--btn-transition);\n box-sizing: border-box;\n position: relative;\n background: inherit;\n}\n\n.ui-btn span::before {\n box-sizing: border-box;\n position: absolute;\n content: \"\";\n background: inherit;\n}\n\n.ui-btn:hover, .ui-btn:focus {\n background: var(--btn-hover-bg);\n}\n\n.ui-btn:hover span, .ui-btn:focus span {\n color: var(--hover-btn-color);\n}\n\n.ui-btn:hover span::before, .ui-btn:focus span::before {\n animation: chitchat linear both var(--btn-animation-duration);\n}\n\n@keyframes chitchat {\n 0% {\n content: \"#\";\n }\n\n 5% {\n content: \".\";\n }\n\n 10% {\n content: \"^{\";\n }\n\n 15% {\n content: \"-!\";\n }\n\n 20% {\n content: \"#$_\";\n }\n\n 25% {\n content: \"№:0\";\n }\n\n 30% {\n content: \"#{+.\";\n }\n\n 35% {\n content: \"@}-?\";\n }\n\n 40% {\n content: \"?{4@%\";\n }\n\n 45% {\n content: \"=.,^!\";\n }\n\n 50% {\n content: \"?2@%\";\n }\n\n 55% {\n content: \"\\;1}]\";\n }\n\n 60% {\n content: \"?{%:%\";\n right: 0;\n }\n\n 65% {\n content: \"|{f[4\";\n right: 0;\n }\n\n 70% {\n content: \"{4%0%\";\n right: 0;\n }\n\n 75% {\n content: \"'1_0<\";\n right: 0;\n }\n\n 80% {\n content: \"{0%\";\n right: 0;\n }\n\n 85% {\n content: \"]>'\";\n right: 0;\n }\n\n 90% {\n content: \"4\";\n right: 0;\n }\n\n 95% {\n content: \"2\";\n right: 0;\n }\n\n 100% {\n content: \"\";\n right: 0;\n }\n}"},{"created":"2024-01-22T16:59:09.000Z","isPrivate":0,"projectId":"87a967","snapshot":"https://s1.qingting.work/runjs/afa53c8be10b.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by catraco","updated":"2024-01-22T18:59:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":455,"cssLen":1691,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".absolute{position:absolute}.relative{position:relative}.-top-\\[150\\%\\]{top:-150%}.left-0{left:0px}.inline-flex{display:inline-flex}.h-\\[5px\\]{height:5px}.w-80{width:20rem}.overflow-hidden{overflow:hidden}.rounded-md{border-radius:0.375rem}.border{border-width:1px}.border-b-4{border-bottom-width:4px}.border-red-400{--tw-border-opacity:1;border-color:rgb(248 113 113 / var(--tw-border-opacity))}.bg-red-400{--tw-bg-opacity:1;background-color:rgb(248 113 113 / var(--tw-bg-opacity))}.bg-red-950{--tw-bg-opacity:1;background-color:rgb(69 10 10 / var(--tw-bg-opacity))}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.font-medium{font-weight:500}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113 / var(--tw-text-opacity))}.opacity-50{opacity:0.5}.shadow-\\[0_0_10px_10px_rgba\$0\\2c 0\\2c 0\\2c 0\\.3\$\\]{--tw-shadow:0 0 10px 10px rgba(0,0,0,0.3);--tw-shadow-colored:0 0 10px 10px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-red-400{--tw-shadow-color:#f87171;--tw-shadow:var(--tw-shadow-colored)}.outline-none{outline:2px solid transparent;outline-offset:2px}.duration-300{transition-duration:300ms}.duration-500{transition-duration:500ms}.hover\\:border-b:hover{border-bottom-width:1px}.hover\\:border-t-4:hover{border-top-width:4px}.hover\\:brightness-150:hover{--tw-brightness:brightness(1.5);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.active\\:opacity-75:active{opacity:0.75}.group:hover .group-hover\\:top-\\[150\\%\\]{top:150%}"},{"created":"2024-01-22T16:59:09.000Z","isPrivate":0,"projectId":"cfdad1","snapshot":"https://s1.qingting.work/runjs/666659dab226.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by TISEPSE","updated":"2024-01-22T18:59:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":83,"cssLen":1008,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn2 {\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 transition: 0.3s;\n}\n\n.btn2::before {\n content: '';\n position: absolute;\n top: -2px;\n left: -2px;\n width: calc(100% + 4px);\n height: calc(100% - -2px);\n background-color: #212121;\n transition: 0.3s ease-out;\n transform: scaleY(1);\n}\n\n.btn2::after {\n content: '';\n position: absolute;\n top: -2px;\n left: -2px;\n width: calc(100% + 4px);\n height: calc(100% - 50px);\n background-color: #212121;\n transition: 0.3s ease-out;\n transform: scaleY(1);\n}\n\n.btn2:hover::before {\n transform: translateY(-25px);\n height: 0;\n}\n\n.btn2:hover::after {\n transform: scaleX(0);\n transition-delay: 0.15s;\n}\n\n.btn2:hover {\n border: 2px solid #fefefe;\n}\n\n.btn2 span {\n position: relative;\n z-index: 3;\n}\n\nbutton {\n text-decoration: none;\n border: none;\n background-color: transparent;\n}"}]}},"actionData":null,"errors":null}