{"html":"\n","css":"/* Modern, clean button styling */\n.custom-button {\n position: relative;\n padding: 14px 32px;\n border: none;\n border-radius: 12px;\n cursor: pointer;\n overflow: hidden;\n font-family: \"Inter\", sans-serif;\n isolation: isolate;\n}\n\n.button-content {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 16px;\n font-weight: 600;\n color: #fff;\n transition: transform 0.2s ease;\n}\n\n.button-background {\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #6366f1 100%);\n transition: all 0.3s ease;\n}\n\n.button-icon {\n display: inline-flex;\n transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n\n/* Hover effects */\n.custom-button:hover .button-content {\n transform: translateY(-1px);\n}\n\n.custom-button:hover .button-icon {\n transform: translateX(4px);\n}\n\n.custom-button:hover .button-background {\n transform: scale(1.05);\n filter: brightness(1.1);\n}\n\n/* Active effects */\n.custom-button:active .button-content {\n transform: translateY(1px);\n}\n\n.custom-button:active .button-background {\n transform: scale(0.98);\n filter: brightness(0.95);\n}\n\n/* Focus styles */\n.custom-button:focus-visible {\n outline: 2px solid #4f46e5;\n outline-offset: 2px;\n}\n\n/* Add subtle shadow */\n.custom-button {\n box-shadow:\n 0 2px 4px rgba(79, 70, 229, 0.1),\n 0 4px 8px rgba(79, 70, 229, 0.1),\n 0 -1px 2px rgba(79, 70, 229, 0.05);\n transition: all 0.3s ease;\n}\n\n.custom-button:hover {\n box-shadow:\n 0 4px 8px rgba(79, 70, 229, 0.2),\n 0 8px 16px rgba(79, 70, 229, 0.2),\n 0 -2px 4px rgba(79, 70, 229, 0.1);\n}\n\n/* Optional: Add a subtle shine effect */\n@keyframes shine {\n from {\n transform: translateX(-100%) rotate(45deg);\n }\n to {\n transform: translateX(100%) rotate(45deg);\n }\n}\n\n.custom-button::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 50%;\n height: 100%;\n background: linear-gradient(\n to right,\n transparent,\n rgba(255, 255, 255, 0.1),\n transparent\n );\n transform: translateX(-100%) rotate(45deg);\n z-index: 1;\n}\n\n.custom-button:hover::after {\n animation: shine 1s ease;\n}\n"}

warm-catfish-72

👁 实时预览

📝 源代码