[Bootstrap]Bootstrap既存のボタンの色を変える。

おなじみのBootstrap既存のボタンの色違いバージョンを作りたい場合。


変えたい色１つにつき以下のようなCSSを作る。(例:btn-ccolor_g1という名前で)

/*-----------------------------------------------*/

/*カスタムカラーグラデ１（赤グラデ）*/

.btn-ccolor_g1 { 

     /*置換するもの*/

    /*ccolor_g1　　　　　　　　　←CSS名*/

    /*D11217～851818   　　　←ボタングラデ色*/ 

    /*721717 ←フォーカス時の色*/

    /*edc5fb ←disable時の色*/

background-color: #D11217;

　　　　color: white;

border-color: #851818;

background-image: linear-gradient(to bottom, #D11217 0%, #851818 100%);

}

.btn-ccolor_g1:hover,

.btn-ccolor_g1:focus {

  background-color: #721717;

  background-image: none;

  background-position: 0 -15px;

  color:white;

}

.btn-ccolor_g1:active,

.btn-ccolor_g1.active {

  background-color: #721717;

  background-image: none;

  border-color: #721717;

  color:white;

}

.btn-ccolor_g1.disabled,

.btn-ccolor_g1[disabled],

fieldset[disabled] .btn-ccolor_g1,

.btn-ccolor_g1.disabled:hover,

.btn-ccolor_g1[disabled]:hover,

fieldset[disabled] .btn-ccolor_g1:hover,

.btn-ccolor_g1.disabled:focus,

.btn-ccolor_g1[disabled]:focus,

fieldset[disabled] .btn-ccolor_g1:focus,

.btn-ccolor_g1.disabled.focus,

.btn-ccolor_g1[disabled].focus,

fieldset[disabled] .btn-ccolor_g1.focus,

.btn-ccolor_g1.disabled:active,

.btn-ccolor_g1[disabled]:active,

fieldset[disabled] .btn-ccolor_g1:active,

.btn-ccolor_g1.disabled.active,

.btn-ccolor_g1[disabled].active,

fieldset[disabled] .btn-ccolor_g1.active {

    background-color: #edc5fb;

    background-image: none;

    border-color: #edc5fb;

    color:white;

}

/*-----------------------------------------------*/

ポイント…

①基本ボタン色・フォーカスの時の色・disableの時の色３つ用意する。

　基本ボタン色はグラデにする気がないのなら開始色も終わり色も同じ色にすればOk

　フォーカスの時の色は基本ボタン色を濃くしたもの、

　disableの時の色は基本ボタン色をかなり明るくしたもの、を用意する。

②/*置換するもの*/にあるCSS名とデフォの色を
　　①で用意した色に一斉置換でマルっと置き換える。

HTMLでの使い方は以下。btn-defaultに重ねること。

/*-----------------------------------------------*/

class="btn btn-default btn-ccolor_g1"

/*-----------------------------------------------*/