【CSS】不同颜色按钮样式

本文链接：https://blog.csdn.net/dxnn520/article/details/148563102

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <style>
    .btn {
      display: inline-flex;
      align-items: center;
      padding: 10px 16px;
      border-radius: 6px;
      font-size: 16px;
      margin-right: 10px;
      cursor: pointer;
      border: 1px solid;
      background-color: #fff;
      transition: all 0.2s ease;
    }
    .btn svg {
      margin-right: 6px;
    }

    /* 蓝色 */
    .btn-blue {
      color: #1890ff;
      background-color: #e6f7ff;
      border-color: #91d5ff;
    }

    /* 粉色 */
    .btn-pink {
      color: #ff7875;
      background-color: #fff1f0;
      border-color: #ffccc7;
    }

    /* 橙色 */
    .btn-orange {
      color: #faad14;
      background-color: #fff7e6;
      border-color: #ffd591;
    }

    /* 绿色 */
    .btn-green {
      color: #52c41a;
      background-color: #f6ffed;
      border-color: #b7eb8f;
    }

    /* 紫色 */
    .btn-purple {
      color: #722ed1;
      background-color: #f9f0ff;
      border-color: #d3adf7;
    }

    /* 灰色 */
    .btn-gray {
      color: #8c8c8c;
      background-color: #f5f5f5;
      border-color: #d9d9d9;
    }

    /* 青色 */
    .btn-cyan {
      color: #13c2c2;
      background-color: #e6fffb;
      border-color: #87e8de;
    }

    /* 深蓝色 */
    .btn-navy {
      color: #2f54eb;
      background-color: #f0f5ff;
      border-color: #adc6ff;
    }
  </style>
</head>
<body>
  <button class="btn btn-blue">➕ 添加</button>
  <button class="btn btn-pink">📊 复合投票</button>
  <button class="btn btn-orange">⬇ 导出</button>
  <button class="btn btn-green">✅ 确认</button>
  <button class="btn btn-purple">📎 附件</button>
  <button class="btn btn-gray">🔍 查看</button>
  <button class="btn btn-cyan">📤 提交</button>
  <button class="btn btn-navy">📘 帮助</button>
</body>
</html>