{"html":"

\n \n

\n","css":".container {\n height: 0;\n display: flex;\n align-items: end;\n justify-content: center;\n}\n\n.button-3d {\n /* vars */\n --lightest: #ffba3a;\n --lighter: #ff9d00;\n --light: #ff7b00;\n --neutral: #ff6200;\n --dark: #cf3700;\n --dark-2: orangered;\n --darkest: #c83500;\n\n cursor: pointer;\n perspective: 500px;\n position: relative;\n width: 77px;\n height: 25px; /* change height */\n border: none;\n transition: 0.15s ease-out;\n}\n\n.button-3d:active {\n height: 0;\n}\n\n.head-btn {\n position: absolute;\n top: 0;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 2;\n}\n\n.body-btn {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n background-color: var(--lighter);\n z-index: 1;\n}\n\n.body-btn .left-side {\n height: 100%;\n width: calc(50% - 10px);\n background-image: linear-gradient(\n to right,\n var(--darkest),\n var(--neutral),\n var(--neutral),\n var(--light)\n );\n box-shadow: 5px 10px 5px var(--light);\n}\n\n.body-btn .right-side {\n position: absolute;\n top: 0;\n right: 0;\n width: calc(50% - 10px);\n height: 100%;\n background-color: var(--dark);\n box-shadow: -5px 5px 5px var(--dark);\n}\n\n.top-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 60px;\n height: 60px;\n background-image: linear-gradient(150deg, var(--lighter), var(--dark-2));\n color: #fff;\n border-radius: 10px;\n transform: rotateX(45deg) rotateZ(45deg);\n border-bottom: 3px solid var(--lightest);\n border-right: 3px solid var(--lighter);\n}\n\n.top-btn span {\n font-size: 18px;\n}\n\n.body-base {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 90px;\n height: 90px;\n background-image: linear-gradient(\n 150deg,\n rgb(165, 165, 165),\n rgb(95, 95, 95)\n );\n color: #fff;\n border-radius: 10px;\n transform: rotateX(45deg) rotateZ(45deg);\n box-shadow: 2px 2px 0 rgb(80, 80, 80);\n border-bottom: 2px solid #b0b0b0;\n border-right: 2px solid rgb(143, 143, 143);\n}\n\n.base {\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n justify-content: center;\n align-items: end;\n width: 120px;\n overflow: hidden;\n}\n\n.body-base .hole {\n height: 70px;\n width: 70px;\n background-color: #353535;\n border-radius: 7px;\n position: relative;\n overflow: hidden;\n justify-content: right;\n box-shadow: inset 2px 2px 5px #1f1f1f;\n border-top: 2px solid #b0b0b0;\n border-left: 2px solid rgb(143, 143, 143);\n}\n\n.body-base .hole .btn-rest {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(calc(-50% + 20px), calc(-50% + 20px)) rotate(-45deg);\n width: 77px;\n height: calc(50% + 24px);\n overflow: hidden;\n background-color: var(--lighter);\n}\n\n.btn-rest .left-side {\n height: 100%;\n width: calc(50% - 10px);\n background-image: linear-gradient(\n to right,\n var(--darkest),\n var(--neutral),\n var(--neutral),\n var(--light)\n );\n box-shadow: 5px 0 5px var(--light);\n}\n\n.btn-rest .right-side {\n position: absolute;\n top: 0;\n right: 0;\n width: calc(50% - 10px);\n height: 100%;\n background-color: var(--dark);\n box-shadow: -5px 0 5px var(--dark);\n}\n\n.body-base .hole .shadow {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 100%;\n height: 100%;\n box-shadow: inset -5px -5px 4px rgba(0, 0, 0, 0.349);\n}\n"}

young-owl-25

👁 实时预览

📝 源代码