更改bootstrap按鈕顏色這事，我一直找不到好用又有效率的方法
以下整理兩種作法
一、override bootstrap scss裡的變數
查詢bootstrap裡的scss變數然後蓋過去
[[http://decioferreira.github.io/bootstrap-generators/]]
1 | /*粉紅色按鈕*/ |
二、css直接覆寫
基本上就是蓋掉button上的css
[[http://charliepark.org/bootstrap_buttons/]]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16.btn-custom {
background-color: hsl(201, 100%, 30%) !important;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00a5ff", endColorstr="#006399");
background-image: -khtml-gradient(linear, left top, left bottom, from(#00a5ff), to(#006399));
background-image: -moz-linear-gradient(top, #00a5ff, #006399);
background-image: -ms-linear-gradient(top, #00a5ff, #006399);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00a5ff), color-stop(100%, #006399));
background-image: -webkit-linear-gradient(top, #00a5ff, #006399);
background-image: -o-linear-gradient(top, #00a5ff, #006399);
background-image: linear-gradient(#00a5ff, #006399);
border-color: #006399 #006399 hsl(201, 100%, 25%);
color: #fff !important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33);
-webkit-font-smoothing: antialiased;
}
