el-button怎么自己设置按钮颜色

在使用 `el-button` 组件时，可以通过 `type` 属性来设置按钮的样式。`type` 属性有以下几个取值：

- `primary`: 主按钮，通常为蓝色
- `success`: 成功按钮，通常为绿色
- `warning`: 警告按钮，通常为黄色
- `danger`: 危险按钮，通常为红色
- `info`: 信息按钮，通常为灰色
- `text`: 文字按钮，颜色与当前文本颜色一致

如果你想自定义按钮的颜色，可以通过设置 `background-color` 和 `border-color` 属性来实现。例如，如果你想将按钮的背景颜色设置为紫色，可以这样写：

<el-button style="background-color: purple; border-color: purple;">自定义按钮颜色</el-button>

当然，你也可以使用 CSS 类来实现自定义按钮颜色的样式。例如，你可以定义一个类 `.my-button`，来设置自定义按钮的样式：

.my-button {
  background-color: purple;
  border-color: purple;
  color: #fff;
}

然后，在使用 `el-button` 组件时，添加 `class="my-button"` 即可：

<el-button class="my-button">自定义按钮颜色</el-button>

相关问题

el-button文字按钮改颜色

要将 el-button 的文字按钮改变颜色，你可以使用以下两种方法：

1. 使用内联样式:
可以在 el-button 上添加 style 属性，并设置 color 属性来改变文字的颜色。例如：

<el-button style="color: red;">按钮</el-button>

2. 使用自定义类:
你可以定义一个自定义的 CSS 类，然后将其应用于 el-button 上，通过修改该类的样式来改变文字的颜色。例如：

<style>
.custom-button {
  color: blue;
}
</style>

<el-button class="custom-button">按钮</el-button>

这两种方法都可以让你改变 el-button 文字按钮的颜色。你可以根据需要选择其中一种方式来实现。

el-button el-button--danger el-button--small

在Element UI这个前端组件库中，`el-button` 是一个基础的按钮组件。`el-button--danger` 是为按钮赋予一个警示色，通常用于表示危险的操作，比如“删除”、“确认”这样的操作，颜色通常是红色。

2. `el-button--small` 则用于创建一个小型化的按钮，相比默认的按钮尺寸更小，适合紧凑布局或者需要节省空间的地方。

组合起来，`<el-button type="danger" size="small">` 就是一个警示风格的小型按钮。你可以根据设计需求调整这些类以改变按钮的视觉样式。