Webサイトを作るとき、クリックできる「ボタン」はユーザーに行動を促す重要なパーツです。
例えば「送信」「購入」「もっと見る」など、目的に合わせて見た目を変えることで、操作性も大きくアップします。

この記事では、HTMLとCSSを使ったボタンの基本的な作り方から、よく使われるデザインのバリエーションまでを、初心者の方にもわかりやすく解説します。

基本のボタン

まずはシンプルなスタイルのボタンから始めましょう。

<button class="basic-btn">送信</button>

.basic-btn {
  padding: 10px 20px;
  background-color: #3498db;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

色は青系で明るく、角を少し丸くすることでやわらかい印象になります。

ホバーで色が変わるボタン

ユーザーに「押せるボタン」だと認識してもらうには、マウスを乗せたときに変化をつけると効果的です。

.basic-btn:hover {
  background-color: #2980b9;
}

少し濃い色に変わるだけでも、操作しやすさがアップします。

枠線だけの「アウトラインボタン」

最近では、背景色を使わず「枠線だけ」で構成されたアウトライン型ボタンも人気です。

.outline-btn {
  padding: 10px 20px;
  background-color: transparent;
  color: #3498db;
  border: 2px solid #3498db;
  border-radius: 5px;
  cursor: pointer;
}

.outline-btn:hover {
  background-color: #3498db;
  color: white;
}

シンプルで洗練された印象を与えるので、CTA（行動喚起）の場面などにもよく使われます。

初心者が気をつけたいポイント

• 文字が読みにくくならないように、背景と文字色のコントラストを意識
• スマホ対応： タッチしやすいサイズ（最低でも高さ40px程度）を確保
• フォームやリンクとの違いを明確にして、誤操作を防ぐ

応用アイデア（発展編）

• アイコン（Font Awesomeなど）を一緒に表示
• アニメーション（ボタンを押したときの波紋や拡大）を加える
• グラデーションや透明感をつけて高級感を出す

ちょっとした装飾を加えるだけで、Webサイト全体の雰囲気にも統一感が生まれます。

おわりに

ボタンは「クリックしてもらう」ための大事な要素です。CSSだけでもさまざまなスタイルが作れるので、デザインの意図やページの目的に合わせて工夫してみてください。

次回は「ボタンにアイコンをつける方法」や「アニメーション付きのホバーデザイン」など、もう一歩進んだボタンデザインにチャレンジしていきましょう！