{"html":"\n","css":"/* Outer Button Container */\n.outer-btn {\n position: relative;\n cursor: pointer;\n width: 240px;\n height: 80px;\n background-size: 240px 80px;\n background-position: 0px 0px;\n background: linear-gradient(\n to bottom,\n darkgray,\n lightgray,\n lightgray,\n rgb(238, 238, 238)\n ); /* Linear gradient */\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.outer-btn::after {\n content: \"\";\n position: absolute;\n top: 65%;\n left: 100%;\n width: 10px;\n height: 50px;\n background-color: #fefcfc;\n filter: blur(3px);\n transform: rotateZ(-45deg) translateX(-50%) translateY(-50%);\n z-index: 1;\n}\n\n.outer-btn::before {\n content: \"\";\n position: absolute;\n top: 65%;\n left: 0%;\n width: 10px;\n height: 50px;\n background-color: #fefcfc;\n filter: blur(3px);\n transform: rotateZ(45deg) translateX(-50%) translateY(-50%);\n z-index: 1;\n}\n\n/* Hover Effect for Outer Button */\n.outer-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);\n}\n\n/* Inner Button */\n.inner-btn {\n width: 220px;\n height: 60px;\n background: linear-gradient(\n to bottom,\n white 0%,\n lightgray 10%,\n lightgray 85%,\n darkgray 100%\n ); /* Linear gradient */\n border-radius: 8px;\n border: 2px solid white;\n margin-top: -10px;\n display: flex;\n justify-content: center;\n align-items: center;\n box-shadow:\n inset 0px 0px 2px rgba(255, 255, 255, 0),\n inset -1px -1px 2px rgba(0, 0, 0, 0);\n transition: box-shadow 0.1s ease;\n z-index: 9;\n}\n\n/* Hover Effect for Inner Button */\n.outer-btn:hover .inner-btn {\n box-shadow:\n inset 2px 2px 4px rgba(255, 255, 255, 0.8),\n inset -2px -2px 4px rgba(0, 0, 0, 0.3);\n}\n\n/* Button Text */\n.btn-text {\n font-size: 20px;\n font-weight: bold;\n color: #333;\n margin-right: 8px;\n}\n\n/* Button Icon */\n.btn-icon {\n font-size: 24px;\n color: #333;\n}\n\n.outer-btn:active .inner-btn {\n margin-top: 0px;\n}\n"}

clever-lizard-12

👁 实时预览

📝 源代码