作为常用的前端ui框架之一，elementui提供了许多方便开发人员使用的组件，其中按钮组件是我们通常会用到的，但是有时候默认的按钮样式可能不能满足项目或者需求的要求，这时候我们就需要进行按钮样式的修改。本文将介绍如何用样式修改按钮样式。
elementui中按钮的样式可以通过以下方式修改：
1.通过类名来修改
elementui的按钮组件有几种默认的样式类供开发者使用，例如primary、danger、warning、info、success等。我们可以通过这些类名来改变按钮的颜色和样式。
<el-button type="primary">primary</el-button><el-button type="danger">danger</el-button><el-button type="warning">warning</el-button><el-button type="info">info</el-button><el-button type="success">success</el-button>
这里的type即为按钮的样式类名。
我们也可以通过自定义类名来实现修改样式：
<el-button class="my-btn">custom</el-button>
.my-btn{ background-color: #409eff; color: #fff;}
2.通过内联样式来修改
通过内联样式来修改按钮样式也是可行的方法，通过给按钮组件添加style属性即可实现：
<el-button style="background-color: #409eff; color: #fff;">custom</el-button>
3.通过修改全局样式
如果需要应用到整个项目中的所有按钮，我们可以通过修改elementui中的全局样式来实现。在vue中，我们可以通过新建一个.scss文件并在项目入口文件中引入来修改elementui的样式。
以下是一个修改elementui按钮样式的示例：
// 引入elementui的sass全局变量和mixin@import "~element-ui/packages/theme-chalk/src/common/var.scss";@import "~element-ui/packages/theme-chalk/src/mixins/mixins.scss";// 改写elementui的变量$--color-primary: #409eff;$--border-radius-base: 4px;// 自定义按钮样式.el-button { &.my-btn { background-color: $--color-primary; border: none; box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 0.45); color: #fff; &:hover { background-color: #66b1ff; box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 0.65); } }}
上述示例中，我们通过修改elementui的全局变量来改变主题色和按钮圆角的大小，然后定义自己的按钮样式，并添加了悬浮时的动态效果。使用自定义class名，来覆盖elementui原有的样式，达到修改按钮的样式的目的。
总结
以上就是几种针对elementui按钮组件修改样式的方法，我们可以通过这些方法来实现自定义的样式。只需要根据具体需求来选择相应的修改方法，使页面实现更好的效果。
以上就是vue elementui 按钮样式修改的详细内容。