当前位置：首页 > CSS

css立体按钮制作

2026-03-12 12:28:27CSS

使用box-shadow创建立体效果

通过多层box-shadow叠加模拟光线投射的阴影效果，增强按钮的立体感。颜色从深到浅渐变，偏移量逐渐减小：

.button {
  box-shadow: 
    0 4px 0 #1a5fb4,  /* 底部主阴影 */
    0 7px 0 rgba(0, 0, 0, 0.2),  /* 增强深度 */
    inset 0 1px 0 rgba(255, 255, 255, 0.3);  /* 顶部高光 */
}

添加过渡和交互效果

结合:active伪类实现按下效果，通过transform和box-shadow调整制造按压动画：

.button {
  transition: transform 0.1s, box-shadow 0.1s;
}
.button:active {
  transform: translateY(4px);  /* 下沉效果 */
  box-shadow: 
    0 1px 0 #1a5fb4,  /* 减少阴影层数 */
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

渐变背景增强质感

使用线性渐变模拟光源方向，顶部亮色到底部暗色的过渡：

.button {
  background: linear-gradient(to bottom, #4a9ff5 0%, #1a5fb4 100%);
  border: none;
  border-radius: 8px;  /* 圆角增强现代感 */
}

完整代码示例

整合所有效果的完整CSS代码：

css立体按钮制作

.raised-button {
  padding: 12px 24px;
  font-size: 16px;
  color: white;
  background: linear-gradient(to bottom, #4a9ff5 0%, #1a5fb4 100%);
  border: none;
  border-radius: 8px;
  box-shadow: 
    0 4px 0 #1a5fb4,
    0 7px 0 rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 0.1s, box-shadow 0.1s;
  cursor: pointer;
}

.raised-button:active {
  transform: translateY(4px);
  box-shadow: 
    0 1px 0 #1a5fb4,
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}