在寫一個系統的css文件的時候，發現了不同類型的button的初始顏色不同，為了完美的使button的顏色和背景的顏色相映照，就去搜了一下，小做總結，為以后的使用做準備。

<div><el-button><span>默認按鈕</span></el-button><el-button type="primary"><span>主要按鈕</span></el-button><el-button type="success"><span>成功按鈕</span></el-button><el-button type="info"><span>信息按鈕</span></el-button><el-button type="warning"><span>警告按鈕</span></el-button><el-button type="danger"><span>危險按鈕</span></el-button></div>

<div style="margin: 20px 0"><el-button><span>樸素按鈕</span></el-button><el-button type="primary"><span>主要按鈕</span></el-button><el-button type="success"><span>成功按鈕</span></el-button><el-button type="info"><span>信息按鈕</span></el-button><el-button type="warning"><span>警告按鈕</span></el-button><el-button type="danger"><span>危險按鈕</span></el-button></div>

<div><el-button round><span>圓形按鈕</span></el-button><el-button type="primary" round><span>主要按鈕</span></el-button><el-button type="success" round><span>成功按鈕</span></el-button><el-button type="info" round><span>信息按鈕</span></el-button><el-button type="warning" round><span>警告按鈕</span></el-button><el-button type="danger" round><span>危險按鈕</span></el-button></div>

需要的話自取，如果說要記的話，可以記一下下面這幾點。
a.round設置圓邊按鈕
b.
默認白
主要藍 primary
成功綠 success
信息灰 info
警告橘黃 warning
危險紅 danger

每天都會有奇跡。
——阿甘正傳

在學習的過程中，自學為主的話，可以推薦你去看看element的官網，比我這里全哦，這里送上鏈接:
elementUI

總結

以上是生活随笔為你收集整理的vue（el-button的五种类型，三种css格式）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。