[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"

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

[CSS]表題や注意書きの前に丸や四角を表示する。

よく忘れるのでメモ。
--------------
●ここに注意！
--------------
↑などを表記するとき、画像をはりつけるのは面倒なのでＣＳＳで行う。


出来上がりイメージはこちら
↓↓↓↓↓↓

CSS/HTMLは以下。

.header1-1{
    height:40px;  
}
.header1-1:before {
  content: "";
  margin-right:5px;
  display: inline-block;
  border: 5px solid transparent;
  background: #337AB7;
  border-radius: 5px;
}
.header1-2{
    height:40px;  
}
.header1-2:before {
  content: "";
  margin-right:3px;
  display: inline-block;
  border: 8px solid;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: red;
}
.header1-3{
    height:40px;  
}
.header1-3:before {
  content: "";
  margin-right:5px;
  display: inline-block;
  border: 7px solid;
  border-top-color: transparent;
  border-right-color: #66CC22;
  border-bottom-color: transparent;
  border-left-color: #CC2266;
  background: #337AB7;
  border-radius: 7px;
}
.header1-4{
    height:40px;  
}
.header1-4:before {
  content: "";
  margin-right:5px;
  display: inline-block;
  border: 7px solid transparent;
  background: #337AB7;
}
.header1-5{
    height:40px;  
}
.header1-5:before {
  content: "";
  margin-right:5px;
  display: inline-block;
  border: 7px solid transparent;
  background: #337AB7;
  border-radius: 3px;
}
.header1-7{
  width:22px;
  color:blue;
  display: inline-block;
  border: 1px solid black;
  background: pink;
  border-radius: 10px;
}

<div class="header1-1">前に○をつけてみます。</div>

        <div class="header1-2">前に△をつけてみます。</div>

        <div class="header1-3">組み合わせるとおかしなものもできあがった。</div>

        <div class="header1-4">シンプルな□はこれ</div>

        <div class="header1-5">○の角度を変えると□っぽく</div>

        やりながら思ったけど①などもＣＳＳで実装できる&nbsp;&nbsp;→&nbsp;&nbsp;<div class="header1-7" >a</div>