{"html":"\n","css":".luxury-btn {\n position: relative;\n min-width: 200px;\n padding: 15px 30px;\n border: none;\n background: linear-gradient(135deg, #2a1a4a 0%, #4a2b8a 100%);\n color: #e0e0e0;\n cursor: pointer;\n overflow: hidden;\n transform: translateY(0);\n box-shadow: 0 4px 15px rgba(74, 43, 138, 0.2);\n transition:\n transform 0.2s,\n box-shadow 0.2s,\n background 0.3s;\n}\n\n.luxury-btn__text {\n position: relative;\n z-index: 2;\n letter-spacing: 2px;\n text-transform: uppercase;\n}\n\n.luxury-btn__border {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 1;\n}\n\n.luxury-btn__border-path {\n stroke: #d4af37;\n stroke-width: 2;\n transition:\n stroke-dasharray 0.3s,\n stroke-dashoffset 0.3s;\n stroke-dasharray: 400;\n stroke-dashoffset: 400;\n}\n\n.luxury-btn:hover .luxury-btn__border-path {\n stroke-dashoffset: 0;\n}\n\n.luxury-btn__ornament-left,\n.luxury-btn__ornament-right {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 2;\n color: #d4af37;\n transition: transform 0.3s;\n}\n\n.luxury-btn__ornament-left {\n left: 15px;\n}\n\n.luxury-btn__ornament-right {\n right: 15px;\n}\n\n.luxury-btn:hover .luxury-btn__ornament-left {\n transform: translateY(-50%) rotate(-180deg);\n}\n\n.luxury-btn:hover .luxury-btn__ornament-right {\n transform: translateY(-50%) rotate(180deg);\n}\n\n.luxury-btn__shine {\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 3;\n animation: shine-effect 3s infinite;\n}\n\n@keyframes shine-effect {\n 0% {\n transform: translateX(0%);\n opacity: 0;\n }\n 10% {\n opacity: 0.5;\n }\n 50% {\n transform: translateX(200%);\n opacity: 0.5;\n }\n 100% {\n transform: translateX(200%);\n opacity: 0;\n }\n}\n\n.luxury-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 20px rgba(74, 43, 138, 0.3);\n background: linear-gradient(135deg, #321f57 0%, #5633a6 100%);\n}\n\n.luxury-btn:active {\n transform: translateY(1px);\n box-shadow: 0 2px 10px rgba(74, 43, 138, 0.1);\n background: linear-gradient(135deg, #231640 0%, #3d2475 100%);\n}\n"}

purple-goose-42

👁 实时预览

📝 源代码