{"html":"\n","css":"/* Component: Plush Button (scoped, no globals) */\n.plush-btn {\n /* Scoped design tokens */\n --btn-h: 258; /* hue */\n --btn-s: 70%; /* saturation */\n --btn-l: 46%; /* lightness */\n --btn-bg: hsl(var(--btn-h) var(--btn-s) var(--btn-l));\n --btn-bg-hi: hsl(\n var(--btn-h) calc(var(--btn-s) + 10%) calc(var(--btn-l) + 6%)\n );\n --btn-bg-lo: hsl(\n var(--btn-h) calc(var(--btn-s) - 8%) calc(var(--btn-l) - 8%)\n );\n --btn-txt: #fff;\n --btn-radius: 1.75em;\n --btn-pad-y: 0.9em;\n --btn-pad-x: 1.4em;\n --btn-gap: 0.65em;\n --btn-shadow: 0 0.35em 1.1em -0.25em rgba(30, 22, 70, 0.45),\n 0 0.08em 0.4em -0.05em rgba(30, 22, 70, 0.35);\n --btn-shadow-hover: 0 0.6em 1.4em -0.25em rgba(30, 22, 70, 0.55),\n 0 0.1em 0.5em -0.05em rgba(30, 22, 70, 0.4);\n --btn-inset-hi: inset 0 0.07em 0.18em rgba(255, 255, 255, 0.75);\n --btn-inset-lo: inset 0 -0.12em 0.6em rgba(0, 0, 0, 0.25);\n --btn-ring: 0 0 0 0.22em rgba(255, 255, 255, 0.95),\n 0 0 0 0.44em hsl(var(--btn-h) 85% 78% / 0.9);\n\n appearance: none;\n border: 0;\n outline: none;\n cursor: pointer;\n user-select: none;\n\n display: inline-flex;\n align-items: center;\n\n padding: var(--btn-pad-y) var(--btn-pad-x);\n border-radius: var(--btn-radius);\n background: linear-gradient(180deg, var(--btn-bg-hi), var(--btn-bg));\n color: var(--btn-txt);\n font: inherit;\n line-height: 1;\n box-shadow: var(--btn-shadow), var(--btn-inset-hi), var(--btn-inset-lo);\n position: relative;\n transform: translateY(0);\n transition:\n transform 120ms ease,\n box-shadow 200ms ease,\n background 200ms ease,\n letter-spacing 160ms ease;\n}\n\n/* Soft plush “glare” */\n.plush-btn::before {\n content: \"\";\n position: absolute;\n inset: 0.12em;\n border-radius: calc(var(--btn-radius) - 0.12em);\n background: radial-gradient(\n 120% 80% at 50% -10%,\n rgba(255, 255, 255, 0.55),\n transparent 55%\n ),\n linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.28),\n rgba(255, 255, 255, 0) 45%\n );\n pointer-events: none;\n mix-blend-mode: screen;\n}\n\n/* Subtle inner cushion */\n.plush-btn::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: var(--btn-radius);\n box-shadow: inset 0 0.18em 0.6em rgba(0, 0, 0, 0.18);\n opacity: 0.5;\n pointer-events: none;\n}\n\n.plush-btn .plush-btn__inner {\n display: inline-flex;\n align-items: center;\n gap: var(--btn-gap);\n letter-spacing: 0.01em;\n transition: letter-spacing 160ms ease;\n}\n\n.plush-btn .plush-btn__label {\n font-weight: 600;\n white-space: nowrap;\n}\n\n.plush-btn .plush-btn__icon {\n width: 1.1em;\n height: 1.1em;\n flex: 0 0 auto;\n transition:\n transform 160ms ease,\n opacity 160ms ease;\n opacity: 0.95;\n}\n\n/* Hover: lift, deepen shadow, nudge icon */\n.plush-btn:hover {\n transform: translateY(-0.06em);\n box-shadow: var(--btn-shadow-hover), var(--btn-inset-hi), var(--btn-inset-lo);\n}\n.plush-btn:hover .plush-btn__icon {\n transform: translateX(0.12em);\n}\n\n/* Active: press into cushion */\n.plush-btn:active {\n transform: translateY(0);\n box-shadow:\n 0 0.18em 0.7em -0.2em rgba(30, 22, 70, 0.5),\n inset 0 0.16em 0.4em rgba(0, 0, 0, 0.3),\n inset 0 -0.08em 0.22em rgba(255, 255, 255, 0.3);\n}\n.plush-btn:active .plush-btn__icon {\n transform: translateX(0.02em) scale(0.98);\n opacity: 0.9;\n}\n\n/* Focus: clear high-contrast ring */\n.plush-btn:focus-visible {\n box-shadow: var(--btn-ring), var(--btn-shadow), var(--btn-inset-hi),\n var(--btn-inset-lo);\n}\n\n/* Disabled state */\n.plush-btn:disabled,\n.plush-btn[aria-disabled=\"true\"] {\n opacity: 0.6;\n cursor: not-allowed;\n filter: grayscale(10%);\n transform: none;\n}\n\n/* Motion preference */\n@media (prefers-reduced-motion: reduce) {\n .plush-btn,\n .plush-btn .plush-btn__icon,\n .plush-btn .plush-btn__inner {\n transition: none;\n }\n}\n\n/* Optional variant examples (still scoped) */\n.plush-btn[data-variant=\"mint\"] {\n --btn-h: 162;\n --btn-s: 55%;\n --btn-l: 42%;\n}\n.plush-btn[data-variant=\"sun\"] {\n --btn-h: 38;\n --btn-s: 90%;\n --btn-l: 48%;\n}\n"}

ancient-octopus-5

👁 实时预览

📝 源代码