金属感按钮凭借独特的视觉质感，常被用于科技类、工业风或者需要突出交互的页面场景中，通过CSS的渐变、阴影和边框属性就能实现效果，不需要依赖外部图片资源。
核心实现思路
金属感的核心在于模拟金属表面的光泽和凹凸质感，主要通过三个部分实现：外层容器的立体阴影模拟厚度，按钮本体的渐变模拟金属反光，文字和边框的细节优化提升真实感。
基础样式搭建
首先定义按钮的基础尺寸和字体样式，设置圆角让按钮边缘更柔和，符合金属制品的打磨感。
/* 金属按钮基础样式 */
.metal-btn {
padding: 12px 32px;
font-size: 16px;
font-weight: 600;
color: #333;
border: none;
border-radius: 8px;
cursor: pointer;
/* 禁止文字选中 */
user-select: none;
/* 设置过渡动画让交互更流畅 */
transition: all 0.2s ease;
}金属渐变与阴影实现
使用线性渐变模拟金属表面的反光效果，搭配内外阴影模拟按钮的立体厚度，是金属感的核心部分。
.metal-btn {
/* 金属渐变：浅灰到深灰再到浅灰，模拟金属反光 */
background: linear-gradient(
135deg,
#e0e0e0 0%,
#c0c0c0 25%,
#a8a8a8 50%,
#c0c0c0 75%,
#e0e0e0 100%
);
/* 内阴影模拟按钮凹陷感 */
box-shadow:
inset 0 2px 4px rgba(255, 255, 255, 0.8),
inset 0 -2px 4px rgba(0, 0, 0, 0.2),
/* 外阴影模拟按钮立体厚度 */
0 4px 8px rgba(0, 0, 0, 0.3);
/* 细边框模拟金属边缘 */
border: 1px solid #999;
}交互状态优化
为按钮添加悬停和点击状态，让金属质感在交互时更真实，模拟金属按压的光泽变化。
/* 悬停状态：光泽上移，阴影变浅 */
.metal-btn:hover {
background: linear-gradient(
135deg,
#e8e8e8 0%,
#d0d0d0 25%,
#b8b8b8 50%,
#d0d0d0 75%,
#e8e8e8 100%
);
box-shadow:
inset 0 2px 4px rgba(255, 255, 255, 0.9),
inset 0 -2px 4px rgba(0, 0, 0, 0.2),
0 6px 12px rgba(0, 0, 0, 0.25);
}
/* 点击状态：光泽下移，阴影收缩模拟按压 */
.metal-btn:active {
background: linear-gradient(
135deg,
#d0d0d0 0%,
#b8b8b8 25%,
#a0a0a0 50%,
#b8b8b8 75%,
#d0d0d0 100%
);
box-shadow:
inset 0 1px 2px rgba(255, 255, 255, 0.7),
inset 0 -1px 2px rgba(0, 0, 0, 0.3),
0 2px 4px rgba(0, 0, 0, 0.3);
transform: translateY(2px);
}完整可复用代码
以下是整合了所有样式的完整代码，可直接复制到项目中使用，也可以根据需求调整渐变颜色和阴影参数。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>金属感按钮示例</title>
<style>
.metal-btn {
padding: 12px 32px;
font-size: 16px;
font-weight: 600;
color: #333;
border: none;
border-radius: 8px;
cursor: pointer;
user-select: none;
transition: all 0.2s ease;
background: linear-gradient(
135deg,
#e0e0e0 0%,
#c0c0c0 25%,
#a8a8a8 50%,
#c0c0c0 75%,
#e0e0e0 100%
);
box-shadow:
inset 0 2px 4px rgba(255, 255, 255, 0.8),
inset 0 -2px 4px rgba(0, 0, 0, 0.2),
0 4px 8px rgba(0, 0, 0, 0.3);
border: 1px solid #999;
}
.metal-btn:hover {
background: linear-gradient(
135deg,
#e8e8e8 0%,
#d0d0d0 25%,
#b8b8b8 50%,
#d0d0d0 75%,
#e8e8e8 100%
);
box-shadow:
inset 0 2px 4px rgba(255, 255, 255, 0.9),
inset 0 -2px 4px rgba(0, 0, 0, 0.2),
0 6px 12px rgba(0, 0, 0, 0.25);
}
.metal-btn:active {
background: linear-gradient(
135deg,
#d0d0d0 0%,
#b8b8b8 25%,
#a0a0a0 50%,
#b8b8b8 75%,
#d0d0d0 100%
);
box-shadow:
inset 0 1px 2px rgba(255, 255, 255, 0.7),
inset 0 -1px 2px rgba(0, 0, 0, 0.3),
0 2px 4px rgba(0, 0, 0, 0.3);
transform: translateY(2px);
}
</style>
</head>
<body>
<button class="metal-btn">金属质感按钮</button>
</body>
</html>参数调整建议
如果需要更亮或者更暗的金属效果，可以调整渐变中的颜色值：
- 想要更亮的金属感，可以将渐变中的灰色值调高，比如把#a8a8a8改为#b8b8b8
- 想要更暗的金属感，可以将渐变中的灰色值调低，比如把#a8a8a8改为#909090
- 想要更强的立体感，可以增大外阴影的模糊半径和扩散半径
- 想要更细腻的光泽，可以在渐变中增加更多的色标，让颜色过渡更平滑