{"html":"

\n \n \n

\n","css":".button-container {\n display: flex;\n justify-content: center;\n margin: 20px;\n}\n\n.button-3d {\n -webkit-appearance: none;\n appearance: none;\n position: relative;\n border-width: 0;\n padding: 0 8px;\n min-width: 4em;\n min-height: 4em;\n box-sizing: border-box;\n background: transparent;\n font: inherit;\n cursor: pointer;\n margin: 10px;\n border-radius: 20px;\n}\n\n.button-top {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 2;\n padding: 8px 16px;\n transform: translateY(0);\n color: #fff;\n background-image: linear-gradient(145deg, #6a11cb, #2575fc);\n text-shadow: 0 -1px rgba(0, 0, 0, 0.25);\n border-radius: 20px;\n transition: transform 0.3s, border-radius 0.3s, background 10s;\n}\n\n.button-3d:active .button-top {\n border-radius: 10px 10px 8px 8px / 8px;\n transform: translateY(2px);\n background-image: linear-gradient(145deg, #2575fc, #6a11cb);\n}\n\n.button-bottom {\n position: absolute;\n z-index: 1;\n bottom: 4px;\n left: 4px;\n border-radius: 20px;\n padding-top: 6px;\n width: calc(100% - 8px);\n height: calc(100% - 10px);\n background-image: linear-gradient(145deg, #2575fc, #6a11cb);\n box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5);\n transition: border-radius 0.2s, padding-top 0.2s;\n}\n\n.button-base {\n position: absolute;\n z-index: 0;\n top: 4px;\n left: 0;\n border-radius: 20px;\n width: 100%;\n height: calc(100% - 4px);\n background-color: rgba(0, 0, 0, 0.15);\n box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.75),\n inset 0 2px 2px rgba(0, 0, 0, 0.25);\n transition: border-radius 0.2s, padding-top 0.2s;\n}\n\n.button-3d:active .button-bottom {\n border-radius: 10px 10px 8px 8px / 8px;\n padding-top: 0;\n}\n\n.button-3d:active .button-base {\n border-radius: 10px 10px 8px 8px / 8px;\n}\n"}

tough-sloth-76

👁 实时预览

📝 源代码