button 样式美化 el-button

如果你使用的是 Element UI，你可以使用 `class` 属性或者 `:class` 绑定来自定义 `el-button` 组件的样式。

例如，你可以在 `el-button` 上添加一个自定义的类名 `my-button`，然后在 CSS 文件中编写 `my-button` 类的样式，如下所示：

<el-button class="my-button">Click me</el-button>

.my-button {
  background-color: #42b983;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.my-button:hover {
  background-color: #3a9d7f;
}

上面的 CSS 样式将使 `el-button` 组件的背景颜色变为绿色，文本颜色变为白色，边框去掉，圆角设置为 4px，内边距为 12px 20px，字体大小为 16px，鼠标移动到按钮上时，背景颜色会有一个 0.3s 的过渡动画效果。

除了 `class` 属性，你还可以使用 `:class` 绑定来动态的设置类名。例如，你可以根据 `isDisabled` 变量的值来设置按钮是否可用，代码如下：

<el-button :class="{'my-button': true, 'disabled': isDisabled}" :disabled="isDisabled">Click me</el-button>

.my-button {
  background-color: #42b983;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.my-button:hover {
  background-color: #3a9d7f;
}

.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

上面的代码将根据 `isDisabled` 变量来动态的设置按钮的类名，如果 `isDisabled` 为 `true`，则按钮会被设置为禁用状态，并添加 `disabled` 类名，同时添加了一个 `disabled` 类来设置禁用状态下的样式。