{"html":"

\n \n

\n","css":".button-container {\n position: relative;\n width: 260px;\n height: 90px;\n}\n\n.button {\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(145deg, #e8e8e8, #c8c8c8);\n border: 3px solid #a0a0a0;\n border-radius: 45px;\n padding: 15px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n box-shadow:\n 0 8px 16px rgba(0, 0, 0, 0.15),\n inset 0 2px 4px rgba(255, 255, 255, 0.4),\n inset 0 -2px 4px rgba(0, 0, 0, 0.1);\n user-select: none;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Inner button surface */\n.button::after {\n content: \"\";\n position: absolute;\n top: 15px;\n left: 15px;\n right: 15px;\n bottom: 15px;\n background: linear-gradient(145deg, #f2f2f2, #d8d8d8);\n border-radius: 45px;\n box-shadow:\n inset 0 1px 3px rgba(255, 255, 255, 0.8),\n inset 0 -1px 3px rgba(0, 0, 0, 0.15),\n 0 1px 2px rgba(255, 255, 255, 0.5);\n}\n\n.button-text {\n font-size: 16px;\n font-weight: 600;\n color: #555;\n letter-spacing: 1px;\n transition: all 0.3s ease;\n pointer-events: none;\n position: relative;\n z-index: 10;\n}\n\n/* Invisible hover zones */\n.hover-left,\n.hover-right {\n position: absolute;\n top: 0;\n width: 40%;\n height: 100%;\n z-index: 15;\n}\n\n.hover-left {\n left: 0;\n}\n\n.hover-right {\n right: 0;\n}\n\n/* Default hover effect (center area) */\n.button:hover {\n transform: translateY(-2px);\n box-shadow:\n 0 12px 24px rgba(0, 0, 0, 0.2),\n inset 0 2px 4px rgba(255, 255, 255, 0.5),\n inset 0 -2px 4px rgba(0, 0, 0, 0.1);\n}\n\n/* Left side tilt */\n.hover-left:hover ~ .button {\n transform: translateY(-2px) rotate(-3deg);\n transform-origin: center bottom;\n box-shadow:\n 0 12px 24px rgba(0, 0, 0, 0.2),\n inset 0 2px 4px rgba(255, 255, 255, 0.5),\n inset 0 -2px 4px rgba(0, 0, 0, 0.1);\n}\n\n/* Right side tilt */\n.hover-right:hover ~ .button {\n transform: translateY(-2px) rotate(3deg);\n transform-origin: center bottom;\n box-shadow:\n 0 12px 24px rgba(0, 0, 0, 0.2),\n inset 0 2px 4px rgba(255, 255, 255, 0.5),\n inset 0 -2px 4px rgba(0, 0, 0, 0.1);\n}\n\n/* Active/pressed state */\n.button:active,\n.hover-left:active ~ .button,\n.hover-right:active ~ .button {\n transform: scale(0.95) translateY(1px) !important;\n box-shadow:\n 0 4px 8px rgba(0, 0, 0, 0.2),\n inset 0 4px 8px rgba(0, 0, 0, 0.2),\n inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;\n background: linear-gradient(145deg, #d0d0d0, #e0e0e0);\n}\n\n.button:active::after,\n.hover-left:active ~ .button::after,\n.hover-right:active ~ .button::after {\n box-shadow:\n inset 0 2px 6px rgba(0, 0, 0, 0.3),\n inset 0 -1px 2px rgba(255, 255, 255, 0.2);\n}\n\n.button:active .button-text,\n.hover-left:active ~ .button .button-text,\n.hover-right:active ~ .button .button-text {\n transform: translateY(1px);\n}\n\n/* Subtle shine effect */\n.button::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(255, 255, 255, 0.3),\n transparent\n );\n transition: left 0.5s ease;\n border-radius: 30px;\n}\n\n.button:hover::before,\n.hover-left:hover ~ .button::before,\n.hover-right:hover ~ .button::before {\n left: 100%;\n}\n"}

neat-wolverine-94

👁 实时预览

📝 源代码