若依框架添加按鈕樣式

學習了若依框架，有時候bootstrap提供的按鈕顏色並不能完全滿足系統的需要 只有僅限的幾個 所以在這時候需要增加自定義的按鈕顏色

下邊是兩個在線生成bootstrap按鈕顏色的網址

blog.koalite.com/bbg/v2/

twitterbootstrap3buttons.w3masters.nl/

創建一個.css文件

將下方的css復制到css文件中

頁面引入該css文件

頁面創建個按鈕

 

 

.btn-black {
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #050505;
*background-color: #050505;
background-image: -moz-linear-gradient(top, #000000, #050505);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000000), to(#050505));
background-image: -webkit-linear-gradient(top, #000000, #050505);
background-image: -o-linear-gradient(top, #000000, #050505);
background-image: linear-gradient(to bottom, #000000, #050505);
background-repeat: repeat-x;
border-color: #050505;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#050505', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-black:hover,
.btn-black:focus,
.btn-black:active,
.btn-black.active,
.btn-black.disabled,
.btn-black[disabled] {
color: #FFFFFF;
background-color: #050505;
*background-color: #003bb3;
}

 

<button class="btn btn-black">btn-primary</button>