如何用CSS制作箭头形状的按钮？

下面提供两种常见的实现思路，帮你做出类似图片里的箭头按钮：

方法一：CSS伪元素叠加实现带边框箭头 #

通过两层伪元素模拟“边框+箭头”的效果，适合纯CSS实现的场景：

HTML结构 #

<button class="arrow-btn arrow-left">左箭头</button>
<button class="arrow-btn arrow-right">右箭头</button>

CSS样式 #

/* 基础按钮样式 */
.arrow-btn {
  padding: 8px 16px;
  border: 2px solid #333;
  background-color: #fff;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  position: relative;
  border-radius: 4px; /* 可选：添加圆角让按钮更柔和 */
}

/* 给左右箭头按钮分配不同的内边距，留出箭头空间 */
.arrow-left {
  padding-left: 32px;
}
.arrow-right {
  padding-right: 32px;
}

/* 左箭头实现 */
.arrow-left::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  /* 深色箭头核心 */
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid #333;
}
.arrow-left::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  /* 白色内层箭头，模拟边框效果 */
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 10px solid #fff;
}

/* 右箭头实现 */
.arrow-right::before {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid #333;
}
.arrow-right::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 10px solid #fff;
}

/* 可选：hover交互效果 */
.arrow-btn:hover {
  background-color: #f5f5f5;
}

方法二：内嵌SVG实现自定义箭头 #

如果需要更灵活的箭头样式（比如圆润边角、复杂形状），用SVG内嵌是更优的选择：

HTML结构 #

<button class="svg-arrow-btn arrow-left">
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
    <path d="M10 12L6 8L10 4" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
  左箭头
</button>
<button class="svg-arrow-btn arrow-right">
  右箭头
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
    <path d="M6 12L10 8L6 4" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
</button>

CSS样式 #

.svg-arrow-btn {
  padding: 8px 16px;
  border: 2px solid #333;
  background-color: #fff;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px; /* 文字和箭头的间距 */
}

.svg-arrow-btn:hover {
  background-color: #f5f5f5;
}

/* 可选：hover时改变箭头颜色 */
.svg-arrow-btn:hover path {
  stroke: #666;
}

你可以根据需求调整箭头大小、颜色、按钮尺寸等参数，两种方法都能实现类似图片里的箭头按钮效果。

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