Bootstrap ボタン色 変更：自由自在にボタンカラーを変更する方法を徹底解説！

Bootstrapを使ってWebサイトを作っているけど、ボタンの色をもっと自由にカスタマイズしたいと思っていませんか？

デフォルトのボタンカラーだけでは物足りない、ブランドイメージに合わせた色を使いたい、そんな悩みを解決します！

引言：ボタンの力、Bootstrap の魅力

ボタンはウェブページにおける重要なインタラクティブ要素であり、ユーザーがウェブサイトとやり取りするための主要な手段です。ボタンを効果的にデザインすることは、ユーザー体験を向上させ、操作の明確さや直感性を高めます。

Bootstrap フレームワークは、その強力なボタンスタイリング機能で知られており、開発者は簡単に美しく機能的なボタンを作成できます。本記事では、Bootstrap の標準的なボタン使用方法から、自分だけのスタイルを作るためのカスタマイズ方法まで、詳しく解説します。

Bootstrap ボタン基礎：使用方法と標準スタイル

Bootstrap では、<button> または <a> タグに btn クラスを適用するだけで、簡単にスタイリッシュなボタンを作成できます。

<button class="btn btn-primary">プライマリーボタン</button>
<a href="#" class="btn btn-secondary">セカンダリーボタン</a>
  

以下は、Bootstrap のプリセットカラーです：

• btn-primary：主な操作を表すプライマリボタン（青）
• btn-secondary：セカンダリ操作用ボタン（灰色）
• btn-success：成功したアクションを示す（緑）
• btn-danger：危険または破壊的なアクションを示す（赤）
• btn-warning：警告を示す（黄色）
• btn-info：情報を提供する（青緑）
• btn-light：ライトテーマのボタン（白）
• btn-dark：ダークテーマのボタン（黒）

ボタンカラーカスタマイズ：プリセットとカスタムの柔軟な利用

Bootstrap のプリセットカラークラスを使用して、簡単に色を変更できます。以下のコードは赤いボタンを作成します。

<button class="btn btn-danger">警告ボタン</button>

また、カスタム CSS を使用して独自のボタンカラーを作成できます。

<style>
  .btn-custom {
    background-color: #ff5733;
    color: white;
  }
</style>

<button class="btn btn-custom">カスタムボタン</button>
  

ボタンサイズカスタマイズ：シーンに応じたサイズ変更

Bootstrap では、ボタンサイズを調整するためのクラスが用意されています。

• btn-lg：大きなボタン
• btn-sm：小さなボタン
• btn-block：幅100%のボタン

<button class="btn btn-primary btn-lg">大きなボタン</button>
<button class="btn btn-secondary btn-sm">小さなボタン</button>
<button class="btn btn-success btn-block">ブロックボタン</button>
  

また、カスタム CSS を使って、ボタンサイズや内側の余白を調整することもできます。

<style>
  .btn-custom-size {
    width: 200px;
    height: 60px;
    padding: 15px;
  }
</style>

<button class="btn btn-primary btn-custom-size">カスタムサイズのボタン</button>
  

ボタン状態カスタマイズ：インタラクションフィードバックを向上

ボタンには、さまざまな状態が存在します。代表的な状態として、enabled、disabled、hover、active があります。無効状態のボタンを作成するには、disabled 属性を使用します。

<button class="btn btn-primary" disabled>無効なボタン</button>

また、active クラスを使用して、アクティブなボタンを示すことができます。

<button class="btn btn-primary active">アクティブボタン</button>

ホバーカスタムスタイルを作成するには、CSS の :hover 疑似クラスを使用します。

<style>
  .btn-hover-custom:hover {
    background-color: #28a745;
    color: white;
  }
</style>

<button class="btn btn-secondary btn-hover-custom">ホバーカスタムボタン</button>
  

ボタン形状カスタマイズ：ユニークなスタイルを作成

Bootstrap は、丸みを帯びたボタンを作るための rounded クラスを提供しています。また、独自の円形ボタンを CSS で作成することも可能です。

<button class="btn btn-primary rounded">丸みボタン</button>

<style>
  .btn-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    padding: 10px;
    text-align: center;
  }
</style>

<button class="btn btn-danger btn-circle">●</button>
  

実戦演習：自分だけのカスタムボタンを作成

最後に、赤くて大きな丸みを帯びたボタンを作成し、クリック時に色が変わるカスタムボタンを作ります。

<style>
  .btn-custom {
    background-color: #ff0000;
    color: white;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 18px;
  }

  .btn-custom:active {
    background-color: #00ff00;
    color: black;
  }
</style>

<button class="btn btn-custom">クリックで色変化</button>
  

この記事では、Bootstrapでボタンの色を変更する様々な方法を、初心者の方にも分かりやすく解説します。コード例も豊富にご紹介しますので、実際に手を動かしながらマスターしましょう。

カスタムCSSで思い通りの色を実現

標準クラスでは物足りない場合は、カスタムCSSを使って自由に色を指定できます。

• 直接指定: ボタン要素に直接 style 属性で色を指定
• クラス定義: 独自のクラスを作成し、 background-color, color プロパティなどで色を指定

例：

<button class="btn" style="background-color: #007bff; color: white;">カスタムボタン</button>

.my-custom-button {
  background-color: #ffc107;
  color: black;
}

SCSS/Sassで効率的なカスタマイズ

Bootstrapのソースコードを編集できる場合は、SCSS/Sassを使って変数を変更することで、サイト全体のボタンカラーを一括で変更できます。

• テーマカラー: $primary, $secondary などの変数を変更
• ボタンカラー: $btn-* (カラースタイル名) 変数を変更

例：

$primary: #007bff; // プライマリカラーを変更
$btn-success: #28a745; // 成功ボタンの色を変更

JavaScriptで動的に変更

JavaScriptを使えば、ボタンのクリックなどのイベントに応じて動的に色を変更できます。

• style プロパティの操作: JavaScriptで style プロパティに直接値を設定
• クラスの追加/削除: classList を使用してクラスを追加/削除

例：

const button = document.querySelector('.my-button');

button.addEventListener('click', () => {
  button.style.backgroundColor = '#dc3545'; // クリックすると赤色に変更
});

まとめ

この記事では、Bootstrapのボタンカラーを変更する方法を4つの方法に分けて解説しました。

1. 標準クラス
2. カスタムCSS
3. SCSS/Sass
4. JavaScript

これらの方法を組み合わせることで、Webサイトのデザインに合わせた自由なボタンカラーを実現できます。

ぜひこの記事を参考に、Bootstrapのボタンをマスターして、より魅力的なWebサイトを作成してください！

Bootstrapボタンカラー変更に関するQ&A

参考文献

• Bootstrap 日本語ドキュメント - ボタン

その他の参考記事:bootstrap 右寄せ ボタン