<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">金属按钮 · 质感外观</title>
<style>
/* 全局重置与基础样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: radial-gradient(circle at 30% 20%, #3a3d44, #1e1f24);
font-family: 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
padding: 2rem;
}
/* 主容器 – 让按钮有呼吸感 */
.showcase {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 3rem 4rem;
max-width: 1000px;
margin: 2rem 0;
}
/* ---------- 核心金属按钮外观 ---------- */
.metal-button {
/* 尺寸与形状 */
width: 180px;
height: 60px;
border: none;
border-radius: 40px; /* 高圆角强化金属反光边缘 */
padding: 0 1.2rem;
/* 金属质感核心：多层渐变模拟拉丝+反射 */
background:
/* 高光扫射 – 斜向拉丝感 */
linear-gradient(
145deg,
rgba(255, 255, 255, 0.5) 0%,
rgba(255, 255, 255, 0.05) 30%,
rgba(0, 0, 0, 0.08) 50%,
rgba(255, 255, 255, 0.25) 70%,
rgba(255, 255, 255, 0.6) 100%
),
/* 金属底色 – 冷银灰渐变，模拟不同角度折射 */
linear-gradient(
180deg,
#d0d5dd 0%,
#b8bec8 20%,
#9ea5b0 50%,
#848c98 75%,
#6e7684 100%
);
/* 立体光影：外缘与内部深度 */
box-shadow:
/* 上缘强高光 – 金属边缘反光 */
inset 0 2px 3px rgba(255, 255, 255, 0.7),
/* 下缘深阴影 – 营造厚度 */
inset 0 -4px 6px rgba(0, 0, 0, 0.4),
/* 左侧微弱高光 */
inset 3px 0 5px rgba(255, 255, 255, 0.3),
/* 右侧微弱阴影 */
inset -2px 0 4px rgba(0, 0, 0, 0.2),
/* 外部投影 – 悬浮感 */
0 8px 18px rgba(0, 0, 0, 0.5),
0 2px 4px rgba(0, 0, 0, 0.3);
/* 文字样式：金属雕刻感 */
color: #2d323c;
font-weight: 700;
font-size: 1.2rem;
letter-spacing: 0.04em;
text-transform: uppercase;
text-shadow:
0 1px 1px rgba(255, 255, 255, 0.6),
0 -1px 1px rgba(0, 0, 0, 0.3);
/* 交互与布局 */
cursor: pointer;
transition: all 0.15s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
/* 防止文字被选中 */
user-select: none;
-webkit-tap-highlight-color: transparent;
/* 微纹理增强金属颗粒感（非常细微） */
background-blend-mode: overlay, normal;
position: relative;
}
/* 高级金属纹理：叠加一层极细的噪点，模拟拉丝金属微观表面 */
.metal-button::before {
content: "";
position: absolute;
inset: 0;
border-radius: 40px;
background-image: repeating-linear-gradient(
60deg,
transparent,
transparent 2px,
rgba(255, 255, 255, 0.02) 2px,
rgba(255, 255, 255, 0.02) 4px
);
pointer-events: none;
}
/* ---------- 悬停状态：更亮的高光与动态金属反应 ---------- */
.metal-button:hover {
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.7) 0%,
rgba(255, 255, 255, 0.1) 25%,
rgba(0, 0, 0, 0.05) 50%,
rgba(255, 255, 255, 0.4) 75%,
rgba(255, 255, 255, 0.8) 100%
),
linear-gradient(
180deg,
#dadfe8 0%,
#c5ccd8 30%,
#aeb6c5 60%,
#969faf 85%,
#7e8798 100%
);
box-shadow:
inset 0 3px 5px rgba(255, 255, 255, 0.8),
inset 0 -5px 8px rgba(0, 0, 0, 0.5),
inset 4px 0 6px rgba(255, 255, 255, 0.3),
inset -3px 0 5px rgba(0, 0, 0, 0.25),
0 12px 28px rgba(0, 0, 0, 0.6),
0 4px 8px rgba(0, 0, 0, 0.4);
color: #1f232b;
text-shadow:
0 1px 2px rgba(255, 255, 255, 0.7),
0 -1px 1px rgba(0, 0, 0, 0.3);
transform: translateY(-2px);
}
/* ---------- 按下状态：内陷金属感 ---------- */
.metal-button:active {
transform: translateY(2px) scale(0.98);
background:
linear-gradient(
145deg,
rgba(0, 0, 0, 0.1) 0%,
rgba(255, 255, 255, 0.05) 30%,
rgba(0, 0, 0, 0.2) 60%,
rgba(255, 255, 255, 0.1) 100%
),
linear-gradient(
180deg,
#8a94a3 0%,
#9ea8b8 20%,
#b0b9c7 50%,
#a4adbc 75%,
#939cab 100%
);
box-shadow:
inset 0 4px 8px rgba(0, 0, 0, 0.6),
inset 0 -2px 4px rgba(255, 255, 255, 0.2),
inset 5px 0 8px rgba(0, 0, 0, 0.3),
inset -4px 0 6px rgba(0, 0, 0, 0.2),
0 2px 4px rgba(0, 0, 0, 0.5);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3);
color: #1a1e26;
transition: all 0.05s ease;
}
/* ---------- 聚焦状态 (键盘导航) ---------- */
.metal-button:focus-visible {
outline: 2px solid #f0b87a;
outline-offset: 4px;
}
/* ---------- 变体：金色金属 · 奢华质感 ---------- */
.metal-button.gold {
background:
linear-gradient(
145deg,
rgba(255, 215, 0, 0.45) 0%,
rgba(255, 200, 50, 0.1) 30%,
rgba(80, 50, 0, 0.15) 50%,
rgba(255, 210, 80, 0.35) 70%,
rgba(255, 230, 120, 0.6) 100%
),
linear-gradient(
180deg,
#d4af37 0%,
#c59b27 25%,
#b8860b 55%,
#a0760a 80%,
#8a6508 100%
);
color: #3c2e0b;
text-shadow:
0 1px 2px rgba(255, 235, 150, 0.7),
0 -1px 1px rgba(0, 0, 0, 0.4);
box-shadow:
inset 0 2px 4px rgba(255, 240, 150, 0.6),
inset 0 -4px 6px rgba(0, 0, 0, 0.5),
inset 3px 0 5px rgba(255, 210, 80, 0.3),
inset -2px 0 4px rgba(0, 0, 0, 0.3),
0 8px 18px rgba(0, 0, 0, 0.6),
0 2px 4px rgba(0, 0, 0, 0.4);
}
.metal-button.gold:hover {
background:
linear-gradient(
145deg,
rgba(255, 215, 0, 0.65) 0%,
rgba(255, 210, 80, 0.15) 25%,
rgba(50, 30, 0, 0.1) 50%,
rgba(255, 220, 100, 0.5) 75%,
rgba(255, 240, 150, 0.7) 100%
),
linear-gradient(
180deg,
#e5bf44 0%,
#d4aa30 30%,
#c49520 60%,
#b8860b 85%,
#9c7409 100%
);
color: #2f2407;
}
.metal-button.gold:active {
background:
linear-gradient(
145deg,
rgba(0, 0, 0, 0.2) 0%,
rgba(255, 210, 80, 0.1) 30%,
rgba(0, 0, 0, 0.3) 60%,
rgba(255, 200, 50, 0.1) 100%
),
linear-gradient(
180deg,
#a87f10 0%,
#b8901a 25%,
#c9a125 50%,
#b88f1a 75%,
#9c7a10 100%
);
}
/* ---------- 变体：深色枪金属 · 哑光黑钢 ---------- */
.metal-button.dark {
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.3) 0%,
rgba(255, 255, 255, 0.02) 30%,
rgba(0, 0, 0, 0.3) 50%,
rgba(255, 255, 255, 0.08) 70%,
rgba(255, 255, 255, 0.2) 100%
),
linear-gradient(
180deg,
#3d414a 0%,
#2f333b 25%,
#1f2229 55%,
#15181d 80%,
#0d0f12 100%
);
color: #d6dae3;
text-shadow:
0 1px 2px rgba(255, 255, 255, 0.2),
0 -1px 2px rgba(0, 0, 0, 0.6);
box-shadow:
inset 0 2px 3px rgba(255, 255, 255, 0.25),
inset 0 -4px 6px rgba(0, 0, 0, 0.6),
inset 3px 0 5px rgba(255, 255, 255, 0.1),
inset -2px 0 4px rgba(0, 0, 0, 0.5),
0 8px 18px rgba(0, 0, 0, 0.7),
0 2px 4px rgba(0, 0, 0, 0.5);
}
.metal-button.dark:hover {
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.4) 0%,
rgba(255, 255, 255, 0.05) 25%,
rgba(0, 0, 0, 0.2) 50%,
rgba(255, 255, 255, 0.15) 75%,
rgba(255, 255, 255, 0.3) 100%
),
linear-gradient(
180deg,
#4a4f5a 0%,
#3a3e48 30%,
#2a2d36 60%,
#1c1f26 85%,
#12151b 100%
);
color: #edf0f5;
}
.metal-button.dark:active {
background:
linear-gradient(
145deg,
rgba(0, 0, 0, 0.4) 0%,
rgba(255, 255, 255, 0.03) 30%,
rgba(0, 0, 0, 0.5) 60%,
rgba(255, 255, 255, 0.05) 100%
),
linear-gradient(
180deg,
#1d2128 0%,
#262b33 25%,
#30353e 50%,
#262b33 75%,
#1a1e24 100%
);
color: #b6bcc9;
}
/* ---------- 装饰说明 ---------- */
.caption {
color: #b8bfcc;
text-align: center;
font-weight: 400;
letter-spacing: 0.3px;
background: rgba(0, 0, 0, 0.25);
backdrop-filter: blur(4px);
padding: 1rem 2rem;
border-radius: 60px;
border: 1px solid rgba(255, 255, 255, 0.06);
margin-top: 2.5rem;
font-size: 0.95rem;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.caption i {
font-style: normal;
display: inline-block;
background: rgba(255,255,255,0.08);
padding: 0 10px;
border-radius: 30px;
margin: 0 4px;
}
/* 适应小屏 */
@media (max-width: 680px) {
.showcase {
gap: 2.5rem 2rem;
}
.metal-button {
width: 150px;
height: 52px;
font-size: 1rem;
}
}
@media (max-width: 480px) {
.metal-button {
width: 130px;
height: 48px;
font-size: 0.9rem;
border-radius: 30px;
}
.caption {
font-size: 0.8rem;
padding: 0.8rem 1.2rem;
}
}
</style>
</head>
<body>
<div class="showcase">
<!-- 经典银金属 -->
<button class="metal-button" type="button">⛭ 银金属</button>
<!-- 金色金属 -->
<button class="metal-button gold" type="button">✦ 金 属</button>
<!-- 暗色枪金属 -->
<button class="metal-button dark" type="button">⬩ 钢 暗</button>
</div>
<div class="caption">
<i>⛓️</i> 金属拉丝 · 高光反射 · 立体浮雕 <i>⚙️</i> 悬停凸起 · 按下内陷 <i>🔩</i>
</div>
<!-- 增加一点交互提示（仅控制台友好） -->
<script>
(function() {
// 纯装饰：不影响外观，仅展示动态文字反馈（可选）
const buttons = document.querySelectorAll('.metal-button');
const log = (msg) => console.log(`🔘 ${msg}`);
buttons.forEach((btn, idx) => {
btn.addEventListener('click', () => log(`"${btn.innerText.trim()}" 按钮被点击`));
btn.addEventListener('mouseenter', () => log(`悬停于 "${btn.innerText.trim()}"`));
});
})();
</script>
</body>
</html>
金属按钮的交互与质感
您可以通过悬停和点击来感受其逼真的物理反馈,代码提供了三种金属风格，方便您在不同场景下选用。
- 核心质感：通过叠加多层
linear-gradient和精细的box-shadow，模拟了金属表面的拉丝纹理、高光反射和边缘立体感，内部的:before伪元素进一步增加了微观颗粒纹理。 - 交互反馈：按钮设计了完整的悬停（hover） 和按下（active） 状态，悬停时，高光增强并伴有轻微凸起；按下时则模拟内陷效果，视觉反馈直观。
- 风格变体：除了默认的银金属色，还提供了“金色”和“暗色枪金属”两种变体，您可以直接通过添加
gold或dark类名来切换使用。
