多背景渐变实现加减图标按钮效果实例页面

展示

代码

• HTML：

  <button class="btn-add">加</button>
  <!-- <input type="number" size="4" value="10"> -->
  <button class="btn-sub">减</button>

• CSS：

  .btn-add,
  .btn-sub {
      width: 1.5rem; height: 1.5rem;
      border: 1px solid gray;
      background: linear-gradient(currentColor, currentColor) no-repeat center/.875em 2px, 
                  linear-gradient(currentColor, currentColor) no-repeat center/2px .875em,
                  ghostwhite;
      color: dimgray;
  }
  .btn-sub {
      background-size: .875em 2px, 0;
  }