{"html":"\n","css":".btn {\n display: inline-grid;\n grid-auto-flow: column;\n align-items: center;\n gap: 12px;\n padding: 9px 20px; /* vertical | horizontal */\n border-radius: 999px; /* pill */\n border: 1px solid transparent;\n cursor: pointer;\n font:\n 600 15.5px/1 \"Inter\",\n system-ui,\n -apple-system,\n \"Segoe UI\",\n Roboto,\n Arial;\n color: #ffffff;\n\n /* layered backgrounds: subtle frosted surface + animated conic border */\n background:\n linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.03),\n rgba(255, 255, 255, 0.01)\n )\n padding-box,\n conic-gradient(from 120deg at 50% 50%, #7c3aed, #06b6d4, #8b5cf6) border-box;\n background-size: 200% 200%;\n animation: gradientShift 6s linear infinite;\n\n box-shadow:\n 0 8px 30px rgba(2, 6, 23, 0.56),\n 0 3px 10px rgba(6, 182, 212, 0.04) inset;\n\n position: relative;\n overflow: hidden;\n transform-origin: center;\n transform-style: preserve-3d;\n transition:\n transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1),\n box-shadow 0.28s,\n filter 0.28s;\n -webkit-tap-highlight-color: transparent;\n}\n\n/* inner frosted panel */\n.btn::before {\n content: \"\";\n position: absolute;\n inset: 0;\n margin: 3px;\n border-radius: 996px; /* slightly smaller than outer */\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.04),\n rgba(255, 255, 255, 0.02)\n );\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);\n pointer-events: none;\n backdrop-filter: blur(8px) saturate(120%);\n mix-blend-mode: overlay;\n}\n\n/* moving sheen */\n.btn::after {\n content: \"\";\n position: absolute;\n left: -45%;\n top: -30%;\n width: 65%;\n height: 160%;\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0.3),\n rgba(255, 255, 255, 0.06),\n rgba(255, 255, 255, 0)\n );\n transform: rotate(-20deg) translateX(0);\n transition:\n transform 0.7s cubic-bezier(0.2, 0.9, 0.3, 1),\n opacity 0.4s;\n opacity: 0.95;\n pointer-events: none;\n filter: blur(6px);\n}\n\n/* content alignment */\n.btn .content {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n z-index: 1;\n}\n.btn .icon {\n width: 18px;\n height: 18px;\n display: inline-block;\n flex: 0 0 18px;\n transition: transform 0.36s cubic-bezier(0.2, 0.9, 0.3, 1);\n}\n\n/* hover interactions: depth + 3D tilt */\n.btn:hover {\n transform: perspective(800px) translateY(-12px) rotateX(6deg) scale(1.02);\n box-shadow:\n 0 36px 80px rgba(2, 6, 23, 0.64),\n 0 10px 34px rgba(6, 182, 212, 0.06) inset;\n}\n.btn:hover .icon {\n transform: translateX(10px) rotate(8deg);\n}\n.btn:hover::after {\n transform: rotate(-20deg) translateX(240%);\n opacity: 1;\n}\n\n.btn:active {\n transform: perspective(800px) translateY(-3px) rotateX(2deg) scale(0.995);\n}\n\n/* elegant focus ring */\n.btn:focus {\n outline: none;\n box-shadow:\n 0 0 0 6px rgba(124, 58, 237, 0.08),\n 0 18px 40px rgba(2, 6, 23, 0.5);\n}\n\n/* subtle badge */\n.btn .badge {\n font-size: 11px;\n padding: 4px 8px;\n border-radius: 999px;\n background: rgba(255, 255, 255, 0.06);\n color: rgba(255, 255, 255, 0.95);\n box-shadow: 0 2px 6px rgba(2, 6, 23, 0.35);\n transform: translateZ(30px);\n z-index: 1;\n}\n\n/* disabled state */\n.btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n transform: none;\n box-shadow: none;\n}\n\n/* reduced motion */\n@media (prefers-reduced-motion: reduce) {\n .btn {\n animation: none;\n transition: none;\n }\n .btn:hover {\n transform: none;\n }\n .btn::after {\n transition: none;\n }\n .btn .icon {\n transition: none;\n }\n}\n\n@keyframes gradientShift {\n 0% {\n background-position: 0% 50%;\n }\n 50% {\n background-position: 100% 50%;\n }\n 100% {\n background-position: 0% 50%;\n }\n}\n\n@media (max-width: 420px) {\n .btn {\n gap: 8px;\n padding: 8px 14px;\n font-size: 15px;\n }\n .btn .icon {\n width: 16px;\n height: 16px;\n }\n}\n"}

tall-hound-6

👁 实时预览

📝 源代码