如何为按钮添加条纹配色？能否实现如图所示的按钮着色效果？

可以通过CSS的repeating-linear-gradient属性实现这种斜向条纹按钮，同时搭配阴影、圆角等样式还原示例质感，具体实现代码如下：

HTML结构 #

<button class="stripe-btn">按钮文本</button>

CSS样式 #

.stripe-btn {
  /* 基础布局设置 */
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  /* 核心条纹背景 */
  background: repeating-linear-gradient(
    45deg,
    #ff9a2e,
    #ff9a2e 10px,
    #ffd23f 10px,
    #ffd23f 20px
  );
  /* 立体阴影增强质感 */
  box-shadow: 
    inset 0 2px 4px rgba(255,255,255,0.3),
    0 4px 8px rgba(255,154,46,0.4);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

/* 鼠标悬停交互效果 */
.stripe-btn:hover {
  filter: brightness(1.1);
  box-shadow: 
    inset 0 2px 4px rgba(255,255,255,0.3),
    0 6px 12px rgba(255,154,46,0.6);
}

关键说明 #

• repeating-linear-gradient：通过设置45度渐变角度，交替定义橙色（#ff9a2e）和黄色（#ffd23f）的色块区间，实现重复斜向条纹；调整10px、20px这类数值可以改变条纹宽度。
• 内外阴影组合：内阴影模拟按钮表面的高光效果，外阴影增强立体感，和示例图的视觉风格匹配。
• 交互优化：hover状态提升亮度并放大阴影，让按钮有动态反馈。

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