element-UI样式修改button篇

elementui的button主要使通过给button添加限定来修改样式的，具体使如何实现的我还不是很清楚，但是，不妨碍修改样式

elementui中button主要是靠字体、内边距（padding）撑起来的，因此，修改字体大小和内边距（padding）可以修改其大小（介绍按钮大小限定会详细介绍），下面来看elementui中button的各种限定：

element的各种限定：

限定的话主要有以下几方面：

颜色限定：颜色限定主要包含的样式有：字体颜色(color) 背景颜色(background-color) 边框颜色(border-color)

primary 主要

success 成功

info 信息

warning 警告

danger 危险

plain 朴素

大小限定：大小限定主要包含样式有 字体大小(font-size) 内边距大小(padding)

medium 中等

small 小型

mini 迷你

形状限定：形状限定主要包含的就是圆角样式实现的(border-radius)

round 圆角按钮

circle 圆形按钮

介绍完按钮限定，接下来就是修改样式了。

如果是自己从头开始写项目，那么可以使用普通按钮直接使用：.el-button(样式类名)修改样式，button主要有哪些样式上面也有介绍，这里就不赘述了，不过有一点要注意，如果官方给的四种大小没有你想要的，需要自己修改，不要直接修改按钮的高度(height)；上面提到过官方的按钮是靠字体大小(font-size)和内边距(padding)撑起来的，如果直接高度，可能会导致按钮字体不居中，宽度(width)也一样。颜色、字体颜色的都可以自己加。

但如过是别人的模板，但是又要自己修改样式，就需要把模板中不同的按钮样式改统一了，那么就需要改不同样式的按钮了

如果是普通按钮，使用.el-button  就好如：

.el-button {
  background-color: #000;
  color: red;

}

如果有各种限定的，.el-button 就不好使了，需要在给类也加上同样的限定，如成功按钮就要 .el-button--success 来修改，别的限定也一样类名如下：

.el-button--primary 主要按钮

.el-button--success 成功

.el-button--info 信息

.el-button--warning 警告

.el-button--danger 危险

.el-button--medium 中等

.el-button--small 小型

.el-button--mini 迷你

如：

.el-button--info,
.el-button--default,
.el-button--cyan,
.el-button--primary,
.el-button--success,
.el-button--warning,
.el-button--danger {
  border: 1px solid #cococo;
  color: red;
}

以上这些是可以用来修改限定按钮的样式，但是还有几个限定修改方式不是加限定了是加.is-[限定名]，主要有 plain round circle disabled(这个是html按钮本身的属性，虽然有elementui的样式，但是我没有归类到element的限定中)

如需修改，需要用下面的方式：

.el-button--primary.is-plain

如果是还有别的这种方式的限定，继续 . 就好，如主要按钮(primary)+朴素(plain )+不可用就需要

.el-button--primary.is-plain.is-disabled

如：

.el-button--primary.is-disabled:active {
  background-color: #eee;
  border: 1px solid #ccc;
}

在此就不一一列举了。

如果有鼠标悬停的，直接使用伪类选择器 :hover就好。

 

如：

.el-button--danger.is-disabled:hover{
  background-color: #eee;
  border: 1px solid #ccc;
}
}

最后，elementUI自带一个左边的外边距(margin-left)，如果排版需要，记得将其去掉