Webサイトを作るときに欠かせない要素の一つが「ボタン」です。お問い合わせフォームへの誘導、資料ダウンロード、購入ページへのリンクなど、ボタンはユーザーのアクションを促す重要な役割を果たします。

この記事では、HTMLとCSSだけを使って、誰でも簡単に作れるボタンの作り方を、初心者向けにわかりやすく解説します。

ボタンとは？Webでの役割と種類

ボタンとは、クリックやタップなどの操作を通じて、ユーザーが何かしらのアクションを実行できるUI要素です。主に以下のような役割があります：

• リンクボタン（別ページへの移動）
• 送信ボタン（フォームの送信）
• 開閉ボタン（メニューやアコーディオンなどの表示切り替え）

デザイン性やユーザビリティにも大きく関わるため、丁寧に作成することでサイトの印象が良くなります。

HTMLでボタンのベースを作成しよう

ボタンの実装方法としては、主に2種類あります：

• <a>タグを使ったリンク型ボタン
• <button>タグを使った送信用ボタン

今回は最もシンプルなリンク型ボタンから見ていきましょう。

<a href="#" class="btn">クリックしてね</a>

このように、<a>タグにクラス名btnを付けておくことで、後からCSSでスタイルを指定しやすくなります。

CSSでボタンにスタイルをつけよう

HTMLだけでは見た目はテキストリンクのままなので、CSSを使って視覚的にボタンらしいデザインにしていきます。

.btn {
  display: inline-block;
  background-color: #007bff;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}
.btn:hover {
  background-color: #0056b3;
}

このコードを使えば、青色で角の丸いボタンができあがり、マウスを乗せたときに色が濃くなるようなホバー効果も加わります。

ボタンのカスタマイズ例

ボタンはサイトの雰囲気にあわせて自由にカスタマイズできます。たとえば以下のようなバリエーションがあります：

① 大きなボタン

.btn.large {
  font-size: 1.5rem;
  padding: 16px 32px;
}

大きめサイズにすることで、スマートフォンでもタップしやすくなります。

② 丸型ボタン

.btn.round {
  border-radius: 9999px;
}

完全な円形に近い見た目を作ることで、アイコン用ボタンなどにも応用できます。

③ 枠線だけのボタン

.btn.outline {
  background-color: transparent;
  color: #007bff;
  border: 2px solid #007bff;
}

背景色をなくし、枠線だけのデザインにすることで軽やかな印象になります。

レスポンシブ対応も意識しよう

スマホやタブレットで見たときにもボタンが使いやすいよう、メディアクエリを使ってサイズや配置を調整するのもポイントです。

@media screen and (max-width: 768px) {
  .btn {
    width: 100%;
    display: block;
    text-align: center;
  }
}

この設定により、ボタンがスマホ画面では横幅いっぱいに表示され、指でも押しやすくなります。

まとめ

HTMLとCSSを使えば、簡単に見た目の良いボタンを作成できます。今回紹介したスタイルは基本的なものですが、カスタマイズ次第でデザインの幅は無限に広がります。

ぜひ、自分のサイトの雰囲気に合わせて、色や大きさ、ホバー効果などを工夫してみてください。

ユーザーにとって使いやすく、目的のアクションへと導ける「魅力的なボタン」を作りましょう！