改變el-button的樣式

element-ui為我們提供了幾種顏色的按鈕，只需要設置 type屬性就可以達到對應效果

 

 

<el-button>默認按鈕</el-button>

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

<el-button type="success">成功按鈕</el-button>

<el-button type="info">信息按鈕</el-button>

<el-button type="warning">警告按鈕</el-button>

<el-button type="danger">危險按鈕</el-button>

 

 

如果我們想要更多顏色的按鈕可以設置以下樣式

<el-button class="set-other-btn">按鈕</el-button>


.set-other-btn{
  color: #fff;
  background-color: #FA4EAB;
  border-color: #FA4EAB;
}
.set-other-btn:hover {鼠標懸浮
background-color: #FE83C6; border-color: #FE83C6; }

.set-other-btn:focus {鼠標點擊
  background-color:  #FE83C6;
  border-color:  #FE83C6;
}

 

 

如果按鈕使用了disabled屬性，那么還要加入以下樣式

.set-other-btn.is-disabled{
  background-color: #FE83C6;
  border-color: #FE83C6;
}
.set-other-btn.is-disabled:hover{
  background-color:  #FE83C6;
  border-color:  #FE83C6;
}