box-shadow内阴影模拟按钮边框实例页面

展示

代码

• HTML：

  <button class="normal">正常</button>
  <button class="primary">主要</button>
  <button class="warning">警示</button>

• CSS：

  button {
      height: 40px;
      min-width: 80px;
      border: 0;
      border-radius: 4px;
      padding-left: 10px;
      padding-right: 10px;
  }
  .normal {
      background-color: #fff;
      box-shadow: inset 1px 0 #a2a9b6, inset -1px 0 #a2a9b6, inset 0 1px #a2a9b6, inset 0 -1px #a2a9b6;
  }
  .primary {
      color: #fff;
      background-color: #2a80eb;
  }
  .warning {
      color: #fff;
      background-color: #eb4646;
  }