{"loaderData":{"0":null,"0-3":{"total":7405,"projects":[{"created":"2024-01-22T16:59:51.000Z","isPrivate":0,"projectId":"950f9d","snapshot":null,"tags":null,"title":"button by mrhyddenn","updated":"2024-01-22T16:59:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":111,"cssLen":1303,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n uiverse.io\n \n Tooltip\n \n

","css":".uiverse {\n position: relative;\n background: #ffffff;\n color: #000;\n padding: 15px;\n margin: 10px;\n border-radius: 10px;\n width: 150px;\n height: 50px;\n font-size: 17px;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n.tooltip {\n position: absolute;\n top: 0;\n font-size: 14px;\n background: #ffffff;\n color: #ffffff;\n padding: 5px 8px;\n border-radius: 5px;\n box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);\n opacity: 0;\n pointer-events: none;\n transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n.tooltip::before {\n position: absolute;\n content: \"\";\n height: 8px;\n width: 8px;\n background: #ffffff;\n bottom: -3px;\n left: 50%;\n transform: translate(-50%) rotate(45deg);\n transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n.uiverse:hover .tooltip {\n top: -45px;\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n}\n\nsvg:hover span,\nsvg:hover .tooltip {\n text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);\n}\n\n.uiverse:hover,\n.uiverse:hover .tooltip,\n.uiverse:hover .tooltip::before {\n background: linear-gradient(320deg, rgb(3, 77, 146), rgb(0, 60, 255));\n color: #ffffff;\n}"},{"created":"2024-01-22T16:59:51.000Z","isPrivate":0,"projectId":"bd8c3c","snapshot":null,"tags":null,"title":"button by Navarog21","updated":"2024-01-22T16:59:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":356,"cssLen":2672,"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 width: 11em;\n height: 4em;\n outline: none;\n transition: 0.1s;\n background-color: transparent;\n border: none;\n font-size: 13px;\n font-weight: bold;\n color: #ddebf0;\n}\n\n#clip {\n --color: #2761c3;\n position: absolute;\n top: 0;\n overflow: hidden;\n width: 100%;\n height: 100%;\n border: 5px double var(--color);\n box-shadow: inset 0px 0px 15px #195480;\n -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);\n}\n\n.arrow {\n position: absolute;\n transition: 0.2s;\n background-color: #2761c3;\n top: 35%;\n width: 11%;\n height: 30%;\n}\n\n#leftArrow {\n left: -13.5%;\n -webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);\n}\n\n#rightArrow {\n -webkit-clip-path: polygon(100% 49%, 0 0, 0 100%);\n left: 102%;\n}\n\nbutton:hover #rightArrow {\n background-color: #27c39f;\n left: -15%;\n animation: 0.6s ease-in-out both infinite alternate rightArrow8;\n}\n\nbutton:hover #leftArrow {\n background-color: #27c39f;\n left: 103%;\n animation: 0.6s ease-in-out both infinite alternate leftArrow8;\n}\n\n.corner {\n position: absolute;\n width: 4em;\n height: 4em;\n background-color: #2761c3;\n box-shadow: inset 1px 1px 8px #2781c3;\n transform: scale(1) rotate(45deg);\n transition: 0.2s;\n}\n\n#rightTop {\n top: -1.98em;\n left: 91%;\n}\n\n#leftTop {\n top: -1.96em;\n left: -3.0em;\n}\n\n#leftBottom {\n top: 2.10em;\n left: -2.15em;\n}\n\n#rightBottom {\n top: 45%;\n left: 88%;\n}\n\nbutton:hover #leftTop {\n animation: 0.1s ease-in-out 0.05s both changeColor8,\n 0.2s linear 0.4s both lightEffect8;\n}\n\nbutton:hover #rightTop {\n animation: 0.1s ease-in-out 0.15s both changeColor8,\n 0.2s linear 0.4s both lightEffect8;\n}\n\nbutton:hover #rightBottom {\n animation: 0.1s ease-in-out 0.25s both changeColor8,\n 0.2s linear 0.4s both lightEffect8;\n}\n\nbutton:hover #leftBottom {\n animation: 0.1s ease-in-out 0.35s both changeColor8,\n 0.2s linear 0.4s both lightEffect8;\n}\n\nbutton:hover .corner {\n transform: scale(1.25) rotate(45deg);\n}\n\nbutton:hover #clip {\n animation: 0.2s ease-in-out 0.55s both greenLight8;\n --color: #27c39f;\n}\n\n@keyframes changeColor8 {\n from {\n background-color: #2781c3;\n }\n\n to {\n background-color: #27c39f;\n }\n}\n\n@keyframes lightEffect8 {\n from {\n box-shadow: 1px 1px 5px #27c39f;\n }\n\n to {\n box-shadow: 0 0 2px #27c39f;\n }\n}\n\n@keyframes greenLight8 {\n from {\n }\n\n to {\n box-shadow: inset 0px 0px 32px #27c39f;\n }\n}\n\n@keyframes leftArrow8 {\n from {\n transform: translate(0px);\n }\n\n to {\n transform: translateX(10px);\n }\n}\n\n@keyframes rightArrow8 {\n from {\n transform: translate(0px);\n }\n\n to {\n transform: translateX(-10px);\n }\n}\n\n\n"},{"created":"2024-01-22T16:59:51.000Z","isPrivate":0,"projectId":"cca482","snapshot":null,"tags":null,"title":"button by satyamchaudharydev","updated":"2024-01-22T16:59:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":506,"cssLen":1535,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n width: 140px;\n height: 56px;\n overflow: hidden;\n border: none;\n color: #fff;\n background: none;\n position: relative;\n padding-bottom: 2em;\n cursor: pointer;\n}\n\nbutton > div,\nbutton > svg {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n}\n\nbutton:before {\n content: \"\";\n position: absolute;\n height: 2px;\n bottom: 0;\n left: 0;\n width: 100%;\n transform: scaleX(0);\n transform-origin: bottom right;\n background: currentColor;\n transition: transform 0.25s ease-out;\n}\n\nbutton:hover:before {\n transform: scaleX(1);\n transform-origin: bottom left;\n}\n\nbutton .clone > *,\nbutton .text > * {\n opacity: 1;\n font-size: 1.3rem;\n transition: 0.2s;\n margin-left: 4px;\n}\n\nbutton .clone > * {\n transform: translateY(60px);\n}\n\nbutton:hover .clone > * {\n opacity: 1;\n transform: translateY(0px);\n transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;\n}\n\nbutton:hover .text > * {\n opacity: 1;\n transform: translateY(-60px);\n transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;\n}\n\nbutton:hover .clone > :nth-child(1) {\n transition-delay: 0.15s;\n}\n\nbutton:hover .clone > :nth-child(2) {\n transition-delay: 0.2s;\n}\n\nbutton:hover .clone > :nth-child(3) {\n transition-delay: 0.25s;\n}\n\nbutton:hover .clone > :nth-child(4) {\n transition-delay: 0.3s;\n}\n/* icon style and hover */\nbutton svg {\n width: 20px;\n right: 0;\n top: 50%;\n transform: translateY(-50%) rotate(-50deg);\n transition: 0.2s ease-out;\n}\n\nbutton:hover svg {\n transform: translateY(-50%) rotate(-90deg);\n}\n"},{"created":"2024-01-22T16:59:51.000Z","isPrivate":0,"projectId":"c671b7","snapshot":null,"tags":null,"title":"button by WhiteNervosa","updated":"2024-01-22T16:59:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":33,"cssLen":731,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n font-size: 18px;\n color: #e1e1e1;\n font-family: inherit;\n font-weight: 800;\n cursor: pointer;\n position: relative;\n border: none;\n background: none;\n text-transform: uppercase;\n transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);\n transition-duration: 400ms;\n transition-property: color;\n}\n\nbutton:focus,\nbutton:hover {\n color: #fff;\n}\n\nbutton:focus:after,\nbutton:hover:after {\n width: 100%;\n left: 0%;\n}\n\nbutton:after {\n content: \"\";\n pointer-events: none;\n bottom: -2px;\n left: 50%;\n position: absolute;\n width: 0%;\n height: 2px;\n background-color: #fff;\n transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);\n transition-duration: 400ms;\n transition-property: width, left;\n}"},{"created":"2024-01-22T16:59:51.000Z","isPrivate":0,"projectId":"418a4d","snapshot":null,"tags":null,"title":"button by Yaya12085","updated":"2024-01-22T16:59:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":424,"cssLen":666,"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 display: flex;\n padding: 0.75rem 1.5rem;\n background-color: #488aec;\n color: #ffffff;\n font-size: 0.75rem;\n line-height: 1rem;\n font-weight: 700;\n cursor: pointer;\n text-align: center;\n text-transform: uppercase;\n vertical-align: middle;\n align-items: center;\n border-radius: 0.5rem;\n user-select: none;\n gap: 0.75rem;\n box-shadow: 0 4px 6px -1px #488aec31, 0 2px 4px -1px #488aec17;\n transition: all 0.6s ease;\n}\n\nbutton:hover {\n box-shadow: 0 10px 15px -3px #488aec4f, 0 4px 6px -2px #488aec17;\n}\n\nbutton:focus,\nbutton:active {\n opacity: 0.85;\n box-shadow: none;\n}\n\nbutton svg {\n width: 1.25rem;\n height: 1.25rem;\n}\n"},{"created":"2024-01-22T16:59:51.000Z","isPrivate":0,"projectId":"71c90e","snapshot":null,"tags":null,"title":"button by kamehame-ha","updated":"2024-01-22T16:59:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1395,"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: #007ACC;\n outline: 3px #007ACC 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}\n\n.button:hover svg path {\n fill: #007ACC;\n}"},{"created":"2024-01-22T16:59:51.000Z","isPrivate":0,"projectId":"d8ef7b","snapshot":null,"tags":null,"title":"button by flxderdev","updated":"2024-01-22T16:59:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":45,"cssLen":1368,"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, #5f03f4, #f441a5, #b81fff, #5f03f4);\n color: #ffffff;\n text-shadow: rgba(140, 0, 255, 0.9) 0px 0px 20px;\n background-size: 400%;\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(155, 0, 194, 0.9);\n -moz-box-shadow: 0px 0px 15px 0px rgba(155, 0, 194, 0.9);\n box-shadow: 0px 0px 15px 0px rgba(155, 0, 194, 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, #5f03f4, #f441a5, #b81fff, #5f03f4);\n background-size: 400%;\n animation: animate 7s cubic-bezier(0.75, 0.75, 0.75, 0.75) infinite,\n}\n\n.button:hover:before {\n filter: blur(20px);\n opacity: 1;\n animation: animate 8s linear infinite;\n}\n\n@keyframes animate {\n 0% {\n background-position: 0%;\n }\n\n 100% {\n background-position: 400%;\n }\n}\n"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"c5268d","snapshot":null,"tags":null,"title":"button by doniaskima","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":122,"cssLen":1927,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn-23,\n.btn-23 *,\n.btn-23 :after,\n.btn-23 :before,\n.btn-23:after,\n.btn-23:before {\n border: 0 solid;\n box-sizing: border-box;\n}\n\n.btn-23 {\n -webkit-tap-highlight-color: transparent;\n -webkit-appearance: button;\n background-color: #000;\n background-image: none;\n color: #fff;\n cursor: pointer;\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,\n Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,\n Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n font-size: 100%;\n font-weight: 900;\n line-height: 1.5;\n margin: 0;\n -webkit-mask-image: -webkit-radial-gradient(#000, #fff);\n padding: 0;\n text-transform: uppercase;\n}\n\n.btn-23:disabled {\n cursor: default;\n}\n\n.btn-23:-moz-focusring {\n outline: auto;\n}\n\n.btn-23 svg {\n display: block;\n vertical-align: middle;\n}\n\n.btn-23 [hidden] {\n display: none;\n}\n\n.btn-23 {\n border-radius: 99rem;\n border-width: 2px;\n overflow: hidden;\n padding: 0.8rem 3rem;\n position: relative;\n}\n\n.btn-23 span {\n display: grid;\n inset: 0;\n place-items: center;\n position: absolute;\n transition: opacity 0.2s ease;\n}\n\n.btn-23 .marquee {\n --spacing: 5em;\n --start: 0em;\n --end: 5em;\n -webkit-animation: marquee 1s linear infinite;\n animation: marquee 1s linear infinite;\n -webkit-animation-play-state: paused;\n animation-play-state: paused;\n opacity: 0;\n position: relative;\n text-shadow: #fff var(--spacing) 0, #fff calc(var(--spacing) * -1) 0,\n #fff calc(var(--spacing) * -2) 0;\n}\n\n.btn-23:hover .marquee {\n -webkit-animation-play-state: running;\n animation-play-state: running;\n opacity: 1;\n}\n\n.btn-23:hover .text {\n opacity: 0;\n}\n\n@-webkit-keyframes marquee {\n 0% {\n transform: translateX(var(--start));\n }\n\n to {\n transform: translateX(var(--end));\n }\n}\n\n@keyframes marquee {\n 0% {\n transform: translateX(var(--start));\n }\n\n to {\n transform: translateX(var(--end));\n }\n}\n"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"554798","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":575,"cssLen":675,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".Btn {\n width: 100px;\n height: 35px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n border: none;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.164);\n cursor: pointer;\n}\n\n.text {\n width: 65%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n background-color: rgb(2, 153, 153);\n}\n\n.svgIcon {\n width: 35%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n background-color: teal;\n}\n\n.Btn:hover .text {\n background-color: rgb(0, 133, 133);\n}\n\n.Btn:hover .svgIcon {\n background-color: rgb(0, 105, 105);\n}"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"52209b","snapshot":null,"tags":null,"title":"button by cssbuttons-io","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":45,"cssLen":1196,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n display: inline-block;\n padding: 12px 24px;\n border: 1px solid #4f4f4f;\n border-radius: 4px;\n transition: all 0.2s ease-in;\n position: relative;\n overflow: hidden;\n font-size: 19px;\n cursor: pointer;\n color: black;\n z-index: 1;\n}\n\n.button:before {\n content: \"\";\n position: absolute;\n left: 50%;\n transform: translateX(-50%) scaleY(1) scaleX(1.25);\n top: 100%;\n width: 140%;\n height: 180%;\n background-color: rgba(0, 0, 0, 0.05);\n border-radius: 50%;\n display: block;\n transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);\n z-index: -1;\n}\n\n.button:after {\n content: \"\";\n position: absolute;\n left: 55%;\n transform: translateX(-50%) scaleY(1) scaleX(1.45);\n top: 180%;\n width: 160%;\n height: 190%;\n background-color: #39bda7;\n border-radius: 50%;\n display: block;\n transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);\n z-index: -1;\n}\n\n.button:hover {\n color: #ffffff;\n border: 1px solid #39bda7;\n}\n\n.button:hover:before {\n top: -35%;\n background-color: #39bda7;\n transform: translateX(-50%) scaleY(1.3) scaleX(0.8);\n}\n\n.button:hover:after {\n top: -45%;\n background-color: #39bda7;\n transform: translateX(-50%) scaleY(1.3) scaleX(0.8);\n}\n"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"b83d71","snapshot":null,"tags":null,"title":"button by dylanharriscameron","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":44,"cssLen":2675,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".delete-button {\n background-color: #000;\n color: #fff;\n font-size: 44px;\n border: 0.5px solid rgba(0, 0, 0, 0.1);\n padding-bottom: 8px;\n width: 60px;\n height: 65px;\n border-radius: 15px 15px 12px 12px;\n cursor: pointer;\n position: relative;\n will-change: transform;\n transition: all .1s ease-in-out 0s;\n user-select: none;\n /* Add gradient shading to each side */\n background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)),\n linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n background-position: bottom right, bottom right;\n background-size: 100% 100%, 100% 100%;\n background-repeat: no-repeat;\n box-shadow: inset -4px -10px 0px rgba(255, 255, 255, 0.4),\n inset -4px -8px 0px rgba(0, 0, 0, 0.3),\n 0px 2px 1px rgba(0, 0, 0, 0.3),\n 0px 2px 1px rgba(255, 255, 255, 0.1);\n transform: perspective(70px) rotateX(5deg) rotateY(0deg);\n}\n\n.delete-button::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.5));\n z-index: -1;\n border-radius: 15px;\n box-shadow: inset 4px 0px 0px rgba(255, 255, 255, 0.1),\n inset 4px -8px 0px rgba(0, 0, 0, 0.3);\n transition: all .1s ease-in-out 0s;\n}\n\n.delete-button::before {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)),\n linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n background-position: bottom right, bottom right;\n background-size: 100% 100%, 100% 100%;\n background-repeat: no-repeat;\n z-index: -1;\n border-radius: 15px;\n transition: all .1s ease-in-out 0s;\n}\n\n.delete-button:active {\n will-change: transform;\n transform: perspective(80px) rotateX(5deg) rotateY(1deg) translateY(3px) scale(0.96);\n height: 64px;\n border: 0.25px solid rgba(0, 0, 0, 0.2);\n box-shadow: inset -4px -8px 0px rgba(255, 255, 255, 0.2),\n inset -4px -6px 0px rgba(0, 0, 0, 0.8),\n 0px 1px 0px rgba(0, 0, 0, 0.9),\n 0px 1px 0px rgba(255, 255, 255, 0.2);\n transition: all .1s ease-in-out 0s;\n}\n\n.delete-button::after:active {\n background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.2));\n}\n\n.delete-button:active::before {\n content: \"\";\n display: block;\n position: absolute;\n top: 5%;\n left: 20%;\n width: 50%;\n height: 80%;\n background-color: rgba(255, 255, 255, 0.1);\n animation: overlay 0.1s ease-in-out 0s;\n pointer-events: none;\n}\n\n@keyframes overlay {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.delete-button:focus {\n outline: none;\n}"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"d35cdb","snapshot":null,"tags":null,"title":"button by niat786","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":34,"cssLen":708,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n border-radius: .25rem;\n text-transform: uppercase;\n font-style: normal;\n font-weight: 400;\n padding-left: 25px;\n padding-right: 25px;\n color: #fff;\n -webkit-clip-path: polygon(0 0,0 0,100% 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 100%);\n clip-path: polygon(0 0,0 0,100% 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 100%);\n height: 40px;\n font-size: 0.7rem;\n line-height: 14px;\n letter-spacing: 1.2px;\n transition: .2s .1s;\n background-image: linear-gradient(90deg,#1c1c1c,#6220fb);\n border: 0 solid;\n overflow: hidden;\n}\n\nbutton:hover {\n cursor: pointer;\n transition: all .3s ease-in;\n padding-right: 30px;\n padding-left: 30px;\n}"}]}},"actionData":null,"errors":null}