CSSボタンは、リンクやフォーム送信など「次に進む操作」をわかりやすく見せるための部品です。
この記事では、CSSだけで作れるボタンデザインを20種類紹介します。
それぞれHTMLとCSSをコピペしやすい形にしているので、色、文字、角丸、余白を変えて使ってください。
- シンプルな塗りボタン
- 枠線ボタン
- 角丸ボタン
- 横幅いっぱいのボタン
- アイコン付きボタン
- グラデーションボタン
- 影付きボタン
- ボタングループ
- 固定CTAボタン
- 無効状態のボタン
ボタンを作る前に決めること
ボタンは見た目だけでなく、HTMLタグの選び方も大切です。
| 使うタグ | 使う場面 |
|---|---|
a |
別ページへ移動する、資料へリンクする |
button |
フォーム送信、モーダルを開く、画面内の操作をする |
ページ移動なら a、操作なら button と考えると迷いにくいです。
1. シンプルな塗りボタン
まずは一番使いやすい基本のボタンです。
<a href="#" class="button-primary">詳しく見る</a>.button-primary {
display: inline-block;
padding: 12px 24px;
color: #fff;
font-weight: 700;
text-decoration: none;
background: #2563eb;
border-radius: 6px;
}色を変える場合は、background を変更します。
2. 枠線ボタン
背景を塗らず、枠線だけで見せるボタンです。
<a href="#" class="button-outline">資料を見る</a>.button-outline {
display: inline-block;
padding: 12px 24px;
color: #2563eb;
font-weight: 700;
text-decoration: none;
background: #fff;
border: 2px solid #2563eb;
border-radius: 6px;
}サブボタンや、白背景で軽く見せたいボタンに向いています。
3. 角丸のピルボタン
丸みのある、やわらかい印象のボタンです。
<a href="#" class="button-pill">無料ではじめる</a>.button-pill {
display: inline-block;
padding: 12px 28px;
color: #fff;
font-weight: 700;
text-decoration: none;
background: #16a34a;
border-radius: 9999px;
}border-radius: 9999px; にすると、横長ボタンをきれいな丸角にできます。
4. 横幅いっぱいのボタン
スマホやフォーム送信ボタンで使いやすい形です。
<button class="button-block">送信する</button>.button-block {
display: block;
width: 100%;
padding: 14px 20px;
color: #fff;
font: inherit;
font-weight: 700;
cursor: pointer;
background: #111827;
border: 0;
border-radius: 6px;
}font: inherit; を入れると、フォーム部品の文字だけ見た目が変わる問題を防ぎやすくなります。
5. 矢印アイコン付きボタン
リンク先へ進む印象を出したいときに便利です。
<a href="#" class="button-arrow">
サービスを見る
<span aria-hidden="true">→</span>
</a>.button-arrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
color: #fff;
font-weight: 700;
text-decoration: none;
background: #7c3aed;
border-radius: 6px;
}文字とアイコンを中央揃えにするには、inline-flex が便利です。
6. 小さめボタン
一覧内の操作や、カード内の小さなリンクに使いやすいボタンです。
<a href="#" class="button-small">編集</a>.button-small {
display: inline-block;
padding: 6px 12px;
color: #fff;
font-size: 14px;
font-weight: 700;
text-decoration: none;
background: #4b5563;
border-radius: 4px;
}小さくしすぎるとタップしづらくなるので、スマホでは十分な高さを確保します。
7. 大きめCTAボタン
LPや申し込み導線で目立たせたいボタンです。
<a href="#" class="button-cta">今すぐ申し込む</a>.button-cta {
display: inline-block;
padding: 16px 36px;
color: #fff;
font-size: 18px;
font-weight: 700;
text-decoration: none;
background: #dc2626;
border-radius: 8px;
}重要なCTAは、本文リンクより大きめの余白にすると見つけやすくなります。
8. グラデーションボタン
少し華やかに見せたいボタンです。
<a href="#" class="button-gradient">キャンペーンを見る</a>.button-gradient {
display: inline-block;
padding: 12px 28px;
color: #fff;
font-weight: 700;
text-decoration: none;
background: linear-gradient(135deg, #2563eb, #db2777);
border-radius: 9999px;
}グラデーションは強くなりやすいので、1ページ内で多用しすぎない方が読みやすいです。
9. 影付きボタン
少し立体感を出したいときのボタンです。
<a href="#" class="button-shadow">予約する</a>.button-shadow {
display: inline-block;
padding: 12px 28px;
color: #fff;
font-weight: 700;
text-decoration: none;
background: #ea580c;
border-radius: 6px;
box-shadow: 0 8px 18px rgba(234, 88, 12, 0.28);
}影を濃くしすぎると古い印象になりやすいので、薄めにします。
10. 立体的な押し込みボタン
ゲーム風、キャンペーン風のボタンに向いています。
<button class="button-press">応募する</button>.button-press {
padding: 12px 28px;
color: #fff;
font: inherit;
font-weight: 700;
cursor: pointer;
background: #f59e0b;
border: 0;
border-radius: 8px;
box-shadow: 0 5px 0 #b45309;
}
.button-press:active {
transform: translateY(5px);
box-shadow: none;
}クリック感を出すために、:active で下に動かしています。
11. ゴーストボタン
濃い背景や画像の上に置きやすい、透明背景のボタンです。
<a href="#" class="button-ghost">詳しく見る</a>.button-ghost {
display: inline-block;
padding: 12px 24px;
color: #fff;
font-weight: 700;
text-decoration: none;
background: transparent;
border: 2px solid currentColor;
border-radius: 6px;
}currentColor を使うと、文字色と枠線色を同じにできます。
12. やわらかい薄色ボタン
管理画面や補助ボタンに使いやすい、控えめなデザインです。
<a href="#" class="button-soft">保存しました</a>.button-soft {
display: inline-block;
padding: 10px 18px;
color: #166534;
font-weight: 700;
text-decoration: none;
background: #dcfce7;
border-radius: 6px;
}補助的な状態表示にも使えます。
13. 危険操作のボタン
削除など、注意が必要な操作に使います。
<button class="button-danger">削除する</button>.button-danger {
padding: 12px 24px;
color: #fff;
font: inherit;
font-weight: 700;
cursor: pointer;
background: #dc2626;
border: 0;
border-radius: 6px;
}危険操作は、色だけでなく文言でもわかるようにします。
14. 無効状態のボタン
押せない状態を見た目で伝えるボタンです。
<button class="button-disabled" disabled>送信できません</button>.button-disabled {
padding: 12px 24px;
color: #6b7280;
font: inherit;
font-weight: 700;
background: #e5e7eb;
border: 0;
border-radius: 6px;
cursor: not-allowed;
}button なら、HTMLに disabled を付けると操作できなくなります。
15. ボタングループ
複数の選択肢を横並びにしたいときの形です。
<div class="button-group">
<a href="#">前へ</a>
<a href="#">一覧へ</a>
<a href="#">次へ</a>
</div>.button-group {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.button-group a {
display: inline-block;
padding: 10px 16px;
color: #2563eb;
font-weight: 700;
text-decoration: none;
border: 1px solid #bfdbfe;
border-radius: 6px;
}横並びや折り返しは、CSS flexの使い方 で詳しく解説しています。
16. ダウンロードボタン
資料やファイルへのリンクに使いやすいボタンです。
<a href="#" class="button-download">
<span aria-hidden="true">↓</span>
資料をダウンロード
</a>.button-download {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
color: #fff;
font-weight: 700;
text-decoration: none;
background: #0f766e;
border-radius: 6px;
}アイコンは装飾なので、aria-hidden="true" を付けています。
17. 外部リンクボタン
別サイトへ移動することを伝えたいボタンです。
<a href="#" class="button-external" target="_blank" rel="noopener noreferrer">
外部サイトを見る
<span aria-hidden="true">↗</span>
</a>.button-external {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
color: #111827;
font-weight: 700;
text-decoration: none;
background: #facc15;
border-radius: 6px;
}新しいタブで開く場合は、rel="noopener noreferrer" も付けておきます。
18. カード内ボタン
カードの下部に置く小さなボタンです。
<article class="sample-card">
<h3>カードタイトル</h3>
<p>説明文が入ります。</p>
<a href="#" class="button-card">詳しく見る</a>
</article>.sample-card {
display: flex;
flex-direction: column;
padding: 24px;
border: 1px solid #e5e7eb;
border-radius: 8px;
}
.button-card {
display: inline-block;
align-self: flex-start;
margin-top: auto;
padding: 10px 16px;
color: #fff;
font-weight: 700;
text-decoration: none;
background: #2563eb;
border-radius: 6px;
}margin-top: auto; を使うと、カード内のボタン位置を下に揃えやすくなります。
19. 画面下の固定CTAボタン
スマホで問い合わせや予約を常に見せたい場合の例です。
<div class="fixed-cta">
<a href="#">お問い合わせする</a>
</div>.fixed-cta {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
padding: 12px 16px;
background: #fff;
box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.12);
}
.fixed-cta a {
display: block;
padding: 14px 20px;
color: #fff;
font-weight: 700;
text-align: center;
text-decoration: none;
background: #dc2626;
border-radius: 6px;
}本文に重ならないよう、ページ下部に余白を追加することも検討します。
20. CSS変数で色を変えやすいボタン
サイト内で同じ形のボタンを色違いで使う場合に便利です。
<a href="#" class="button-variable">基本ボタン</a>
<a href="#" class="button-variable button-variable--green">緑ボタン</a>.button-variable {
--button-bg: #2563eb;
--button-color: #fff;
display: inline-block;
padding: 12px 24px;
color: var(--button-color);
font-weight: 700;
text-decoration: none;
background: var(--button-bg);
border-radius: 6px;
}
.button-variable--green {
--button-bg: #16a34a;
}CSS変数を使うと、ボタンの形は共通のまま、色だけを変えやすくなります。
ボタンの色・サイズを変える場所
コピペした後によく変える場所は次のとおりです。
| 変えたいもの | 変更するCSS |
|---|---|
| 背景色 | background |
| 文字色 | color |
| ボタンの大きさ | padding、font-size |
| 角丸 | border-radius |
| 枠線 | border |
| 影 | box-shadow |
ボタン作成でよくある失敗
ボタンが思った見た目にならないときは、次を確認します。
aタグにdisplay: inline-block;またはinline-flexを指定しているかbuttonタグの標準スタイルをリセットしているか- 文字色と背景色のコントラストが低すぎないか
- スマホでタップしやすい高さになっているか
- リンクなのか送信ボタンなのか、タグを使い分けているか
- 固定ボタンが本文やフッターに重なっていないか
CSSが反映されない場合は、CSSが効かない原因まとめ も確認してください。
まとめ
CSSボタンは、まず基本形を作り、色、余白、角丸、幅を変えて使うと迷いにくいです。
通常のボタンはこの記事、動きのあるボタンは CSSアニメーション付きボタン集、hover時の変化は CSSホバーエフェクト集 に分けて管理します。