{"html":"\n","css":".btn-1,\n.btn-1 *,\n.btn-1 :after,\n.btn-1 :before,\n.btn-1:after,\n.btn-1:before {\n border: none;\n box-sizing: border-box;\n}\n\n.btn-1 {\n scale: 0.8;\n -webkit-tap-highlight-color: transparent;\n background-color: #000;\n background-image: none;\n color: #fff;\n font-family:\n ui-sans-serif,\n system-ui,\n -apple-system,\n BlinkMacSystemFont,\n Segoe UI,\n Roboto,\n Helvetica Neue,\n Arial,\n Noto Sans,\n sans-serif,\n Apple Color Emoji,\n Segoe UI Emoji,\n Segoe UI Symbol,\n Noto Color Emoji;\n cursor: pointer;\n font-size: 100%;\n line-height: 1.5;\n margin: 0;\n padding: 2;\n}\n\n.btn-1:disabled {\n cursor: default;\n}\n\n.btn-1:-moz-focusring {\n outline: auto;\n}\n\n.btn-1 svg {\n display: block;\n vertical-align: middle;\n}\n\n.btn-1 [hidden] {\n display: none;\n}\n\n.btn-1 {\n border: 1px solid;\n border-radius: 999px;\n box-sizing: border-box;\n display: block;\n font-weight: 900;\n overflow: hidden;\n padding: 1.2rem 3rem;\n position: relative;\n text-transform: uppercase;\n}\n\n.btn-1 .original {\n background: #ffffff;\n color: #000;\n display: grid;\n inset: 0;\n place-content: center;\n position: absolute;\n transition: transform 0.3s cubic-bezier(0.87, 0, 0.13, 1);\n}\n\n.btn-1:hover .original {\n transform: translateY(100%);\n}\n\n.btn-1 .letters {\n display: inline-flex;\n}\n\n.btn-1 span {\n opacity: 0;\n transform: translateY(-15px);\n transition:\n transform 0.3s cubic-bezier(0.87, 0, 0.13, 1),\n opacity 0.3s;\n}\n\n.btn-1 span:nth-child(2n) {\n transform: translateY(15px);\n}\n\n.btn-1:hover span {\n opacity: 1;\n transform: translateY(0);\n}\n\n.btn-1:hover span:nth-child(2) {\n transition-delay: 0.1s;\n}\n\n.btn-1:hover span:nth-child(3) {\n transition-delay: 0.2s;\n}\n\n.btn-1:hover span:nth-child(4) {\n transition-delay: 0.3s;\n}\n\n.btn-1:hover span:nth-child(5) {\n transition-delay: 0.4s;\n}\n\n.btn-1:hover span:nth-child(6) {\n transition-delay: 0.5s;\n}\n"}

cold-monkey-21

👁 实时预览

📝 源代码