2020-05-07

Web前端：VueCli+ElementUI(button更改按钮默认样式)

Element-ui+Vue-cli可是说很常见的搭配，但是有写样式，需要根据自身需求进行修改

运行环境 Runtime environment

操作系统 ： Windows10
IDE: JetBrains WebStorm 2020.2.4 x64
浏览器： Google Chrome 版本 67.0.3396.99（正式版本） （64 位）&& FireFox Developer Edition 版本63.0b4  (64位)
VueCli : 3

示例代码

1	<el-button type="primary">主要按钮</el-button>

修改默认样式

改成透明带动画效果的样式

.el-button--primary {
    color: #fff;
    font-size: 12px;
    background-color: rgba(153,204,255,0.5);
    border: 1px solid #99CCFF;
    transition: all 0.8s;
    -moz-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    -o-transition: all 0.8s;
}
.el-button--primary:hover {
    color: aquamarine;
    font-size: 12px;
    background-color: rgba(153,204,255,0.5);
    border: 1px solid #99CCFF;
}
.el-button--primary:focus {
    background-color: rgba(153,204,255,0.5);
    border: 1px solid #99CCFF;
}