按钮样式的核心属性 一个完整的按钮样式，核心就这几个属性：
.btn {
padding: 12px 24px; /* 内边距 */
font-size: 16px; /* 字体大小 */
color: #ffffff; /* 文字颜色 */
background-color: #3b82f6; /* 背景色 */
border: none; /* 边框 */
border-radius: 6px; /* 圆角 */
cursor: pointer; /* 鼠标指针 */
transition: all 0.2s ease; /* 过渡动画 */
}
但光有静态样式不够，按钮最重要的是 交互反馈 。
用户悬停、点击时，按钮要有视觉变化。
交互状态的实现 1. Hover 状态 悬停时最常见的处理：
.btn:hover {
opacity: 0.9; /* 轻微透明 */
transform: translateY(-1px); /* 向上位移 1px */
box-shadow: 0 6px 8px -1px rgba(0, 0, 0, 0.15); /* 阴影加深 */
}
这里用
translateY(-1px)
让按钮"浮起来"，配合阴影加深，模拟按钮被抬起的视觉效果。
2. Active 状态 点击时的反馈：
.btn:active {
transform: translateY(0); /* 回到原位 */
box-shadow: none; /* 阴影消失 */
}
这样按钮按下时会有"陷下去"的感觉。
3. 阴影的动态生成 阴影是提升按钮质感的关键，但手动写很麻烦。
我们可以根据按钮颜色自动生成阴影：
function generateShadow(baseColor: string, intensity: number = 0.2): string {
// 解析颜色为 RGB
const r = parseInt(baseColor.slice(1, 3), 16)
const g = parseInt(baseColor.slice(3, 5), 16)
const b = parseInt(baseColor.slice(5, 7), 16)
// 生成带透明度的阴影
return `0 4px 6px -1px rgba(${r}, ${g}, ${b}, ${intensity})`
}
// 使用
const shadow = generateShadow('#3b82f6', 0.3)
// 输出: 0 4px 6px -1px rgba(59, 130, 246, 0.3)
这样阴影会与按钮颜色协调，而不是死板的黑色。
预设样式的设计 项目中常见的按钮类型，可以封装成预设：
const presets = [
{ name: '主按钮', bg: '#3b82f6', color: '#ffffff', border: 'none', radius: 6 },
{ name: '成功', bg: '#10b981', color: '#ffffff', border: 'none', radius: 6 },
{ name: '危险', bg: '#ef4444', color: '#ffffff', border: 'none', radius: 6 },
{ name: '警告', bg: '#f59e0b', color: '#ffffff', border: 'none', radius: 6 },
{ name: '次要', bg: 'transparent', color: '#3b82f6', border: '2px solid #3b82f6', radius: 6 },
{ name: '幽灵', bg: 'transparent', color: '#ffffff', border: '2px solid #ffffff', radius: 6 },
]
用户点击预设后，自动填充所有参数：
function applyPreset(preset: Preset) {
setBgColor(preset.bg)
setTextColor(preset.color)
setBorderWidth(preset.border === 'none' ? 0 : 2)
setBorderColor(preset.border === 'none' ? bgColor : '#3b82f6')
setRadius(preset.radius)
}
实时预览与代码生成 1. 双向绑定 用 React 的 state 管理所有参数：
const [bgColor, setBgColor] = useState('#3b82f6')
const [textColor, setTextColor] = useState('#ffffff')
const [borderWidth, setBorderWidth] = useState(0)
const [radius, setRadius] = useState(6)
const [paddingX, setPaddingX] = useState(24)
const [paddingY, setPaddingY] = useState(12)
每个参数变化时，预览和代码同步更新。
2. CSS 代码模板 用模板字符串动态生成：
const cssCode = `.btn {
display: inline-block;
padding: ${paddingY}px ${paddingX}px;
font-size: ${fontSize}px;
font-weight: 500;
color: ${textColor};
background-color: ${bgColor};
border: ${borderWidth}px solid ${borderColor};
border-radius: ${radius}px;
cursor: pointer;
transition: all 0.2s ease;${shadow ? `
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);` : ''}
}
.btn:hover {
opacity: 0.9;
transform: translateY(-1px);${shadow ? `
box-shadow: 0 6px 8px -1px rgba(0, 0, 0, 0.15);` : ''}
}
.btn:active {
transform: translateY(0);
}`
3. 一键复制 使用 Clipboard API：
const handleCopy = async () => {
await navigator.clipboard.writeText(cssCode)
setCopied(true)
setTimeout(() => setCopied(false), 2000)
}
一些边界情况 1. 透明背景的幽灵按钮 当背景色为
transparent
时，阴影需要特殊处理：
.ghost-btn {
background-color: transparent;
border: 2px solid #3b82f6;
box-shadow: none; /* 透明背景不显示阴影 */
}
.ghost-btn:hover {
background-color: rgba(59, 130, 246, 0.1); /* 悬停时填充淡色 */
}
2. 边框与背景色的冲突 有边框的按钮，背景色和边框色要协调：
// 当边框宽度 > 0 时，边框色默认与背景色一致
const borderColor = borderWidth > 0 ? bgColor : '#3b82f6'
3. 圆角的极端值
border-radius: 0
→ 方形按钮
border-radius: 9999px
→ 胶囊按钮
// 提供快速切换
const radiusPresets = [
{ name: '方形', value: 0 },
{ name: '圆角', value: 6 },
{ name: '胶囊', value: 9999 },
]
实际应用场景 1. 表单提交
2. 危险操作确认
3. 次要操作
最终效果 基于以上思路，做了一个在线工具： 按钮生成器 主要功能： 6 种预设样式一键应用 实时预览悬停/点击效果 自定义颜色、圆角、阴影 一键复制 CSS 代码 代码实现不复杂，但把交互细节做好需要花些心思。
希望这篇对你有帮助。
相关工具： 边框生成器 | 阴影生成器