如何用CSS3制作带凹面水平线与透明渐变眩光的按钮？

需求说明 #

• 制作红色系渐变按钮（从亮红到暗红）
• 叠加透明白色渐变眩光层（透明度0.25-0.5）
• 核心要求：眩光的水平线必须是凹面（两侧向下），而非凸面（中间下凹的椭圆型）

旧方案问题 #

之前尝试用径向渐变实现凹面背景，但无法做出透明效果，旧代码如下：

#wrapper {
  background: grey;
  padding: 25px;
}

#test {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin-right: 25px;
    border-radius: 20px;
    background: #888888;
    background:
      radial-gradient(circle 400px at 50% 266%, rgba(0,0,250,0.1), rgba(0,0,250,0.1) 100%, red 100%);
    background-size:200px 200px, 200px 200px;
    background-position:0 0,0 0;
    background-repeat:no-repeat;
}

<div id="wrapper">
  <div id="test">B1</div>
  <div id="test">B2</div>
</div>

解决方案 #

使用多层线性渐变叠加的方式，无需额外DOM元素，就能实现符合要求的凹面眩光效果：

完整代码 #

<div class="wrapper">
  <button class="financial-btn">B1</button>
  <button class="financial-btn">B2</button>
</div>

.wrapper {
  background: #888;
  padding: 25px;
}

.financial-btn {
  width: 200px;
  height: 200px;
  margin-right: 25px;
  border: none;
  border-radius: 20px;
  /* 多层背景叠加：眩光层 + 基础红色渐变 */
  background-image: 
    /* 顶部凹面眩光：从透明到半白再回到透明，中间截断 */
    linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.25) 40%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.25) 60%, transparent 100%),
    /* 基础红色渐变底色 */
    linear-gradient(180deg, #e63946 0%, #c1121f 100%);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  font-size: 24px;
  cursor: pointer;
  /* 可选：添加阴影增强立体感 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.financial-btn:hover {
  /* hover状态微调效果 */
  background-image: 
    linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.3) 60%, transparent 100%),
    linear-gradient(180deg, #f15bb5 0%, #d90429 100%);
}

方案说明 #

1. 基础渐变：用linear-gradient实现从亮红到暗红的按钮底色，模拟传统金融按钮的厚重感
2. 凹面眩光实现：通过单条线性渐变，设置中间区域透明度最高、向两侧逐渐降低至透明，完美模拟出两侧向下的凹面光线效果，符合需求
3. 现代CSS特性：利用多层背景叠加技术，无需额外嵌套元素，代码简洁易维护
4. 交互优化：添加hover状态的颜色和眩光微调，提升按钮的交互反馈

扩展学习建议 #

• 掌握CSS background-image多层叠加的优先级和定位规则
• 深入理解linear-gradient的角度、色标位置参数
• 学习box-shadow和filter属性，为按钮添加更多立体效果
• 尝试用background-blend-mode实现更复杂的色彩混合效果

内容的提问来源于stack exchange，提问作者Froschkoenig84