CSS代码块
/* Primary Gradient Button (large) with hover glow, click ripple and shadow */
/* Author: Original, standards-based CSS. Tested on modern browsers. */
:root {
/* Primary palette derived from #FF6A00 */
--pr-300: #FFA057;
--pr-400: #FF8A33;
--pr-500: #FF6A00; /* main */
--pr-600: #E65F00;
--pr-700: #C74F00;
/* Shadows and glow */
--shadow-sm: 0 2px 6px rgba(0,0,0,0.12);
--shadow-md: 0 8px 20px rgba(0,0,0,0.18);
--glow: 0 0 0 8px rgba(255,106,0,0.16);
/* Focus ring */
--focus-ring: 0 0 0 4px rgba(255,106,0,0.38);
}
.btn {
/* Reset and base */
-webkit-tap-highlight-color: transparent;
appearance: none;
user-select: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-family: inherit;
font-weight: 600;
line-height: 1.2;
text-align: center;
text-decoration: none;
border: 0;
border-radius: 12px;
cursor: pointer;
position: relative;
overflow: hidden; /* needed for ripple clipping */
white-space: nowrap;
transition:
transform 160ms ease,
box-shadow 200ms ease,
filter 200ms ease,
background-position 280ms ease;
/* Prevent layout shift when pressing */
will-change: transform, box-shadow, background-position;
}
/* Size: large */
.btn--lg {
font-size: 1rem; /* 16px base */
padding: 0.95rem 1.35rem; /* visual height ≈ 48px */
min-height: 48px;
min-width: 44px; /* accessibility target */
border-radius: 14px; /* a touch softer on large size */
}
/* Primary gradient style */
.btn--primary {
color: #fff;
background-color: var(--pr-500); /* fallback if gradients disabled */
background-image: linear-gradient(
135deg,
var(--pr-400) 0%,
var(--pr-500) 50%,
var(--pr-600) 100%
);
/* Subtle sheen on hover via background motion */
background-size: 160% 160%;
background-position: 50% 50%;
/* Depth + soft ambient color shadow */
box-shadow:
var(--shadow-sm),
0 10px 24px rgba(255,106,0,0.28);
}
/* Hover: glow and slight gradient drift */
.btn--primary:hover:not(:disabled, [aria-disabled="true"]) {
background-position: 35% 65%;
box-shadow:
var(--shadow-md),
0 0 0 0 rgba(0,0,0,0), /* placeholder slot */
var(--glow); /* colored hover glow */
transform: translateY(-1px);
}
/* Focus-visible: accessible ring without moving layout */
.btn--primary:focus-visible {
outline: none;
box-shadow:
var(--shadow-md),
var(--focus-ring);
}
/* Active/pressed: tighter shadow, slight press-in */
.btn--primary:active:not(:disabled, [aria-disabled="true"]) {
background-position: 60% 40%;
transform: translateY(0) scale(0.985);
box-shadow:
0 2px 8px rgba(0,0,0,0.20),
0 6px 14px rgba(255,106,0,0.20);
}
/* Disabled state: dimmed, no interactions */
.btn--primary:disabled,
.btn--primary[aria-disabled="true"] {
opacity: 0.6;
filter: grayscale(6%);
cursor: not-allowed;
box-shadow: var(--shadow-sm);
}
/* Hover glow fine-tuning for devices that support hover */
@media (hover: hover) and (pointer: fine) {
.btn--primary:hover:not(:disabled, [aria-disabled="true"]) {
filter: saturate(1.05);
}
}
/* Click ripple (centered, CSS-only) */
.btn--primary::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 22rem;
height: 22rem;
pointer-events: none;
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
opacity: 0;
/* Light ripple that works on warm gradients */
background: radial-gradient(
circle,
rgba(255,255,255,0.55) 0%,
rgba(255,255,255,0.35) 20%,
rgba(255,255,255,0.18) 40%,
rgba(255,255,255,0) 65%
);
}
.btn--primary:active::after {
animation: btn-ripple 620ms ease-out forwards;
}
@keyframes btn-ripple {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0.45; }
60% { transform: translate(-50%, -50%) scale(1); opacity: 0.25; }
100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0; }
}
/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
.btn,
.btn--primary {
transition: none;
}
.btn--primary:active::after {
animation-duration: 0ms;
}
}
技术说明
- 视觉基调与层次
- 使用 #FF6A00 为主色，构建 135° 渐变（#FF8A33 → #FF6A00 → #E65F00），形成有层次的暖色按钮表面，保证在亮背景中有足够视觉权重。
- 默认阴影叠加环境色阴影与中等深度阴影，既有立体感又保持干净。
- 交互状态
- Hover glow：在 hover 时叠加有色外发光（--glow）并略微上浮（translateY(-1px)），同时通过 background-position 移动实现渐变“流动”效果，增强质感。
- Active：轻微压下（scale 0.985），阴影收紧，反馈更贴近物理按压体验。
- Focus-visible：使用 4px 半透明主色聚焦环（--focus-ring），满足可访问性要求，不影响布局。
- Disabled：降低不透明度+轻微灰化，禁止交互和动画，清晰表达非可用状态。
- 点击涟漪（click-ripple）
- 纯 CSS 实现，使用 ::after 作为涟漪层，中心放射型径向渐变，按下时触发动画。由于纯 CSS 无法获取点击坐标，默认从中心扩散，满足无 JS 环境下的视觉反馈。
- 尺寸与可触达性
- large 尺寸的可点击高度约 48px，最小宽高不小于 44px，满足移动端可触达建议。
- 性能与流畅性
- 使用 will-change 优化变换和阴影过渡，transition 时长控制在 160–280ms 之间，避免拖沓。
- 尊重 prefers-reduced-motion，自动缩减或关闭动画，提升可访问性。
使用指南
- 基本用法（按钮元素）
- 作为链接使用（语义+可访问性）
- 禁用状态
- 按钮元素：添加 disabled 属性
- 链接元素：添加 aria-disabled="true" 并在逻辑层阻止点击
Disabled
- 与图标搭配（可选建议）
- 在按钮内部自定义间距；本样式已设置 gap: 0.5rem，可直接放置图标元素与文本。
兼容性说明
- 浏览器支持：Chrome 80+、Edge 79+、Firefox 75+、Safari 14+、iOS 14+、Android Chrome 80+。
- 注意事项：
- :focus-visible 在部分旧版浏览器可能回退为 :focus 行为；当前样式已对 :focus-visible 定义，常见现代环境兼容。
- 纯 CSS 涟漪无法定位至点击位置；如需从点击点扩散，需要少量 JS 注入坐标并设置 CSS 变量控制位置（见扩展建议）。
扩展建议
- 点击位置涟漪（增强版）
- 通过 JS 在 mousedown 时计算相对坐标，设置 --rx、--ry，自定义 ::after 的 left/top，实现从点击点扩散的涟漪。CSS 已可扩展为使用 var(--rx,50%) 和 var(--ry,50%)。
- 暗色模式适配
- 可在 @media (prefers-color-scheme: dark) 中略微加深 --pr-600/--pr-700，减小光晕透明度，避免在深色背景上过曝。
- 轮廓样式变体
- 增加 .btn--primary--outline 与 .btn--primary--ghost 等风格，以适配不同信息层级与页面密度。
- 加载态
- 增加 .is-loading 状态（禁用交互并显示内置 spinner），与 disabled 态区分视觉反馈。
