ホームページを作成するにあたり、レスポンシブデザインを取り入れている。初心者でもレスポンシブなページを作れるBootstrapを駆使しているが、ボタンの背景色が既定の色しか使えない。そこで簡単に色を変更する方法をやってみました。
この方法は、単にページの頭にCSSを記述するだけでいいので是非やってみてください。
<head>から</head>の間にスタイルを記述します。例えばボタンの背景を青みがかったグリーンにする場合。スタイルを読み込むためのキーワードを"btn-gblue"にしています。
<style>
.btn-gblue {
background-color: rgba(8, 131, 153, 0.719);
color:rgb(245, 245, 245);
border-color: rgba(160, 159, 159, 0);
}
</style>
次にページの<body>内の<button>のClassの指定を以下のように変更します。
例えば元のボタンの背景色が青色（primary)で以下のような場合は
<button type="button" class="btn btn-primary">ボタン押す</button>
上記のclassの部分を
<button type="button" class="btn btn-gblue">ボタン押す</button>
に変更します。
ボタンが青色から青みがかった明るいグリーンになったと思います。