给a-button新增class样式

---

✅ 新版 CSS 类命名方案

我们使用以下类名：

类型	类名
Primary	primary-btn
Success	success-btn
Warning	warning-btn
Danger	danger-btn
Info	info-btn

---

✅ 完整样式封装（含 :hover, :focus, :active）

你可以将这些样式放在全局或组件中：

/* 基础按钮样式 */
.a-button.primary-btn,
.a-button.success-btn,
.a-button.warning-btn,
.a-button.danger-btn,
.a-button.info-btn {
  color: #fff;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* Primary 按钮 */
.a-button.primary-btn {
  background-color: #409EFF;
  border-color: #409EFF;
}
.a-button.primary-btn:hover,
.a-button.primary-btn:focus {
  background-color: #66b1ff;
  border-color: #66b1ff;
}
.a-button.primary-btn:active {
  background-color: #337ecc;
  border-color: #337ecc;
}

/* Success 按钮 */
.a-button.success-btn {
  background-color: #67c23a;
  border-color: #67c23a;
}
.a-button.success-btn:hover,
.a-button.success-btn:focus {
  background-color: #85ce61;
  border-color: #85ce61;
}
.a-button.success-btn:active {
  background-color: #529b2e;
  border-color: #529b2e;
}

/* Warning 按钮 */
.a-button.warning-btn {
  background-color: #e6a23c;
  border-color: #e6a23c;
}
.a-button.warning-btn:hover,
.a-button.warning-btn:focus {
  background-color: #ebb563;
  border-color: #ebb563;
}
.a-button.warning-btn:active {
  background-color: #cf8e1e;
  border-color: #cf8e1e;
}

/* Danger 按钮 */
.a-button.danger-btn {
  background-color: #ff4949;
  border-color: #ff4949;
}
.a-button.danger-btn:hover,
.a-button.danger-btn:focus {
  background-color: #ff6d6d;
  border-color: #ff6d6d;
}
.a-button.danger-btn:active {
  background-color: #e64343;
  border-color: #e64343;
}

/* Info 按钮 */
.a-button.info-btn {
  background-color: #909399;
  border-color: #909399;
}
.a-button.info-btn:hover,
.a-button.info-btn:focus {
  background-color: #a6a9ad;
  border-color: #a6a9ad;
}
.a-button.info-btn:active {
  background-color: #797b7f;
  border-color: #797b7f;
}

---

✅ 使用方式（模板）

<template>
  <a-button class="primary-btn">Primary</a-button>
  <a-button class="success-btn">Success</a-button>
  <a-button class="warning-btn">Warning</a-button>
  <a-button class="danger-btn">Danger</a-button>
  <a-button class="info-btn">Info</a-button>
</template>

---

📦 全局引入建议

你可以把上面的样式保存为一个文件，例如：

📁 assets/css/buttons.css

然后在你的入口文件（如 main.js 或 main.ts）中引入：

import './assets/css/buttons.css'

---

✅ 总结

• ✅ 使用了语义化的类名：primary-btn, warning-btn 等。
• ✅ 支持交互状态：:hover, :focus, :active
• ✅ 可直接用于 a-button 组件，无需修改其默认结构
• ✅ 易于维护与扩展

---

如果你还需要：

• ✅ 禁用状态（:disabled）
• ✅ 加载状态（.loading）
• ✅ 不同尺寸（small / large）
• ✅ SCSS/LESS 版本

我也可以为你继续扩展。是否需要？