{"html":"\n","css":".button {\n position: relative;\n border: none;\n background: transparent;\n padding: 0;\n outline: none;\n cursor: pointer;\n font-family: monospace;\n font-weight: 300;\n text-transform: uppercase;\n font-size: 1.25rem;\n}\n\n.button .shadow {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.25);\n border-radius: 0.5rem;\n transform: translateY(0.125rem);\n transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);\n}\n\n.button .edge {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 0.5rem;\n background: linear-gradient(\n to left,\n hsl(217, 33%, 16%) 0%,\n hsl(217, 33%, 32%) 8%,\n hsl(217, 33%, 32%) 92%,\n hsl(217, 33%, 16%) 100%\n );\n}\n\n.button .front {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.75rem 1.5rem;\n color: white;\n background: linear-gradient(to right, #f27121, #e94057, #8a2387);\n border-radius: 0.5rem;\n transform: translateY(-0.25rem);\n gap: 0.75rem;\n transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);\n}\n\n.button .front .arrow {\n margin-left: 0.5rem;\n display: inline-block;\n width: 1.25rem;\n height: 1.25rem;\n transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);\n fill: currentColor;\n}\n\n.button:hover .shadow {\n transform: translateY(0.25rem);\n transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);\n}\n\n.button:hover .front {\n transform: translateY(-0.375rem);\n transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);\n filter: brightness(115%);\n}\n\n.button:hover .front .arrow {\n transform: translateX(0.25rem);\n}\n\n.button:active .shadow {\n transform: translateY(0.0625rem);\n transition: transform 34ms;\n}\n\n.button:active .front {\n transform: translateY(-0.125rem);\n transition: transform 34ms;\n}\n\n.button .front span {\n user-select: none;\n}\n"}

red-cobra-23

👁 实时预览

📝 源代码