{"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: sans-serif;\n}\n\n/* Shadow layer */\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: 8px;\n transform: translateY(2px);\n transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);\n}\n\n/* Edge layer */\n.button .edge {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 8px;\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/* Front layer */\n.button .front {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 12px 28px;\n font-size: 1.25rem;\n color: white;\n background: hsl(217, 33%, 17%);\n border-radius: 8px;\n transform: translateY(-4px);\n transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);\n}\n\n/* Hover and active states */\n.button:hover .shadow {\n transform: translateY(4px);\n transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);\n}\n\n.button:hover .front {\n transform: translateY(-6px);\n transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);\n}\n\n.button:active .shadow {\n transform: translateY(1px);\n transition: transform 34ms;\n}\n\n.button:active .front {\n transform: translateY(-2px);\n transition: transform 34ms;\n}\n\n/* Disable text selection */\n.button .front span {\n user-select: none;\n}\n"}

pink-lizard-56

👁 实时预览

📝 源代码