HTMLでボタンを作りたいけれど、buttonタグとaタグのどちらを使えばよいか迷っていませんか？ 見た目は同じボタンでも、クリックしたときの目的によって使う要素が変わります。
フォーム送信や画面内の処理にはbutton、別ページへの移動にはaを使うのが基本です。この記事では、変更前のHTMLへCSSを追加し、押しやすくてキーボードでも操作できるボタンを作ります。
HTMLでボタンを作る3つの方法
HTMLでボタンの見た目を作る方法は、主にbuttonタグ、aタグ、inputタグの3つです。先に用途の違いを整理しましょう。
| 要素 | 主な用途 | 使用例 |
|---|---|---|
button | 処理を実行する | フォーム送信、メニュー開閉、ダイアログ表示 |
a | 別の場所へ移動する | 別ページ、ページ内リンク、ファイルへのリンク |
input | フォームの操作 | 送信、リセット |
JavaScriptのonclickで無理にページ移動させるより、移動には最初からa href="移動先"を使うほうが役割が明確です。新しいタブで開く、リンク先をコピーする、といったブラウザの機能も使えます。
変更前のHTMLで普通のボタンを表示する
最初にindex.htmlを作り、次のコードを保存します。この時点ではブラウザ標準の見た目で表示されます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTMLボタンの練習</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<h1>ボタンのサンプル</h1>
<button type="button">処理を実行</button>
</main>
</body>
</html>type="button"は、フォーム送信ではない通常のボタンであることを表します。button要素はフォーム内でtypeを省略すると送信ボタンとして動作するため、用途を明示しておくと意図しない送信を防げます。
CSSで押しやすいボタンに変更する
HTMLのボタンへbuttonクラスとbutton-primaryクラスを追加します。クラスを分けると、共通の形と色の違いを別々に管理できます。
<button class="button button-primary" type="button">
処理を実行
</button>次に、style.cssへ次のCSSを書きます。ボタンの高さは最低44pxを確保し、文字数が増えても崩れにくいよう固定のwidthは指定していません。
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 40px 16px;
color: #172033;
font-family: system-ui, sans-serif;
background: #f7f9fc;
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 12px 20px;
border: 2px solid transparent;
border-radius: 10px;
font: inherit;
font-weight: 700;
line-height: 1;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s, transform 0.2s;
}
.button-primary {
color: #ffffff;
background: #0f3c78;
}
.button-primary:hover {
background: #1853a0;
transform: translateY(-2px);
}
.button-primary:active {
transform: translateY(0);
}
.button:focus-visible {
outline: 3px solid #f26b4a;
outline-offset: 3px;
}
.button:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.button {
transition: none;
}
}inline-flexとalign-items: centerで文字を上下中央に配置します。paddingで内側の余白を作り、border-radiusで角を丸くしました。
:hoverはマウスポインターを重ねた状態、:activeは押している状態です。変化を付けると操作できる要素だと伝わりやすくなります。
通常・ホバー・フォーカス・無効状態を確認する
完成したボタンは、通常時、マウスを重ねたとき、キーボードで選択したとき、操作できないときで見た目が変わります。特に:focus-visibleの輪郭は、Tabキーで移動している場所を示す大切な目印です。
輪郭がデザインに合わない場合も、outline: noneだけで消さないでください。色や太さを調整し、どこへフォーカスしているか分かる状態を残します。
aタグをボタンの見た目にする
お問い合わせページなど、別の場所へ移動する場合はaタグを使います。先ほどのbuttonクラスはaタグにも適用できます。
<a class="button button-outline" href="/contact/">
お問い合わせへ
</a>.button-outline {
border-color: #0f3c78;
color: #0f3c78;
background: #ffffff;
}
.button-outline:hover {
color: #ffffff;
background: #0f3c78;
}ボタンリンクの作り方や、aとbuttonの使い分けをさらに詳しく確認したい場合は、次の記事も参考にしてください。
フォームの送信ボタンを作る
フォームの入力内容を送信するボタンにはtype="submit"を使います。form要素の中へ入力欄と送信ボタンを配置します。
<form action="/send/" method="post">
<label for="email">メールアドレス</label>
<input id="email" name="email" type="email" required>
<button class="button button-primary" type="submit">
送信する
</button>
</form>このHTMLだけではメール送信処理までは行えません。actionで指定した送信先に、PHPなどのサーバー側処理やフォームサービスを用意する必要があります。
buttonのtype属性を使い分ける
button要素のtypeには、次の3種類があります。フォーム内では動作の違いを理解して使いましょう。
| type | 動作 | 主な用途 |
|---|---|---|
button | HTMLだけでは送信しない | JavaScriptで処理するボタン |
submit | フォームを送信する | 登録、検索、問い合わせ送信 |
reset | 入力内容を初期値へ戻す | 入力のやり直し |
resetは誤操作で入力内容を消す可能性があるため、本当に必要か検討してから配置します。入力を取り消せないフォームでは、置かないほうが安全な場合もあります。
inputタグでボタンを作る方法
inputタグでも送信ボタンを作れます。ボタンに表示する文字はvalue属性で指定します。
<input class="button button-primary" type="submit" value="送信する">inputは終了タグを持たず、中へアイコンや別の要素を入れられません。文字とアイコンを組み合わせたい場合や柔軟に装飾したい場合は、button要素のほうが扱いやすいでしょう。
よく使うボタンデザインを作る
既に作ったbuttonクラスへ追加クラスを組み合わせると、用途ごとにデザインを変えられます。ここでは、丸み、影、円形の3例を見ていきましょう。
角を大きく丸める
border-radiusを大きくすると、カプセルのような形になります。値をボタンの高さ以上にしても、実際の丸みは自然な半円に収まります。
.button-pill {
border-radius: 999px;
}影で押せることを伝える
box-shadowで下側へ薄い影を付けると、背景から少し浮いた見た目になります。影を濃くしすぎると文字より目立つため、控えめな色から調整してください。
.button-shadow {
box-shadow: 0 6px 14px rgb(15 60 120 / 20%);
}アイコンだけの円形ボタンを作る
アイコンだけでは目的が伝わらない利用者もいるため、aria-labelでボタンの名前を指定します。見た目の記号はaria-hidden="true"にし、同じ内容を二重に読み上げないようにします。
<button class="button button-primary button-icon" type="button" aria-label="お気に入りに追加">
<span aria-hidden="true">♥</span>
</button>.button-icon {
width: 44px;
min-height: 44px;
padding: 0;
border-radius: 50%;
}スマートフォンでボタンを見やすくする
スマートフォンでは横幅が限られるため、重要な送信ボタンを画面幅いっぱいにすると押しやすくなります。必要なボタンだけへbutton-full-mobileクラスを追加します。
@media (max-width: 48rem) {
.button-full-mobile {
width: 100%;
}
}すべてのボタンを大きくする必要はありません。主な操作を目立たせ、補助的な操作はアウトラインなど控えめな見た目にすると、優先順位が伝わります。
ボタンを使いやすくする確認項目
- ボタンの目的が短い言葉で分かる
- 文字と背景の色に十分な差がある
- 指でも押しやすい大きさと間隔がある
- Tabキーで移動し、EnterまたはSpaceキーで操作できる
- フォーカス位置が輪郭などで見える
- 無効なボタンは見た目と
disabled属性の両方で示す
「こちら」「クリック」のような曖昧な文言だけでなく、「送信する」「資料をダウンロード」のように、押した後の結果が分かる言葉を使いましょう。
ボタンがうまく表示・動作しないときの確認方法
CSSが反映されない
link要素のファイル名と場所、HTMLのclass名、CSSのセレクターを確認します。button-primaryとbutton_primaryのような1文字の違いでも適用されません。
フォームを意図せず送信してしまう
フォーム内の通常ボタンへtype="button"があるか確認します。送信ボタンだけをtype="submit"にすると役割を区別できます。
ボタン内の文字が中央にならない
display: inline-flex、align-items: center、justify-content: centerが指定されているか確認します。固定の高さとline-heightだけで合わせる方法は、文字が折り返すと崩れやすいため注意してください。
クリックしても何も起こらない
button type="button"は、HTMLだけでは独自の処理を実行しません。JavaScriptのイベント処理が必要です。ページ移動が目的なら、aタグへ正しいhrefを設定してください。
HTMLボタンに関するよくある質問
buttonタグの中に画像やアイコンを入れられますか？
入れられます。画像やspan要素を配置できますが、アイコンだけの場合はaria-labelなどでボタンの目的を伝えてください。
リンクをbuttonタグで作ってもよいですか？
ページ移動が目的ならaタグが適しています。見た目はCSSで同じにできるため、デザインではなく動作の目的で要素を選びます。
ボタンの幅は固定したほうがよいですか？
基本は文字数に合わせて広がるよう、左右のpaddingで調整します。同じ役割のボタンを並べるなど、見た目を揃える必要がある場合だけmin-widthを検討しましょう。
まとめ
HTMLで処理を実行するボタンはbuttonタグ、ページ移動はaタグ、フォームの簡単な送信ボタンはinputタグでも作れます。見た目が同じでも、目的に合う要素を選ぶことが大切です。
CSSでは余白、色、角丸、ホバーだけでなく、:focus-visibleや:disabledも用意しましょう。マウス、キーボード、スマートフォンで操作を確認すれば、初心者でも使いやすいボタンを作れます。