CSSでおしゃれなボタンを作りたい
コピペで簡単に使えるボタンデザインが欲しい
ボタンにアニメーションを追加したい
CSSボタンは適切なデザインとコードを組み合わせることで、ユーザーの注目を集める魅力的なボタンが作れます。
本記事では、現場ですぐに使える13種類のCSSボタンデザインと、品質の高いボタンを作るためのチェックポイントを紹介します。
コピペで使えるコード付きで解説しているので、CSSボタンの引き出しを増やしたい方は最後まで読んでみてください。
CSSボタン静的デザイン7選
どんなサイトにも合わせやすい汎用性の高い静的デザインのボタンを7つ紹介します。
- シンプルなボタン
- 角丸のボタン
- 立体的なボタン
- いびつな形のボタン
- グラデーションボタン
- アイコン付きボタン
- ネオンボタン
HTMLとCSSをそのままコピーして、ぜひ試してみてください。
1.シンプルなボタン
Webサイトで使われる基本的なシンプルなボタンです。
どんなデザインにも自然に馴染み、ユーザーにストレスを与えません。
まずはシンプルなボタンをしっかりとマスターしましょう。
作成する際は、ボタンの内側に十分な余白を確保し、クリックできる場所であることをユーザーに直感的に伝える工夫が大切です。
コピー<a href="#" class="btn-basic">シンプルなボタン</a>
コピー.btn-basic {
display: inline-block;
background-color: #007bff;
color: #fff;
padding: 1rem 2rem;
text-decoration: none;
cursor: pointer;
}
ボタンに余白がないと文字が窮屈に見えてしまうため、ボタン内部の文字まわりの余白をpaddingでしっかり確保するのがポイントです。
cursor: pointer; を指定すると、マウスを乗せた際にポインターが指の形に変わり、「ここをクリックできますよ」とユーザーに直感的に伝えられます。
2.角丸のボタン
角丸のボタンは、シンプルなボタンにほんの一工夫加えるだけで作れます。
border-radiusの値を調整するだけで角を丸くでき、親しみやすく柔らかい雰囲気になります。
コピー<a href="#" class="btn-rounded">角丸のボタン</a>
コピー.btn-rounded {
display: inline-block;
background-color: #28a745;
color: #fff;
padding: 1rem 2rem;
text-decoration: none;
cursor: pointer;
border-radius: 8px; /* 角が丸くなる */
}
border-radiusはボタンの角を丸めるプロパティで、値を大きくするほど角が丸くなります。
3.立体的なボタン
リアルな質感を表現したいときは、ボタンに少し厚みを持たせて立体的に見せられます。
ボタンがページから少し浮き上がっているように見え、ユーザーのクリックを促す効果を期待できます。
コピー<a href="#" class="btn-3d">立体的なボタン</a>
コピー.btn-3d {
display: inline-block;
background-color: #dc3545;
color: #fff;
padding: 1rem 2rem;
text-decoration: none;
cursor: pointer;
border-radius: 5px;
border-bottom: 4px solid #b02a37; /* 下の枠線を太くして立体感を出す */
}
ボタンの立体感はborder-bottomで実装が可能です。
ボタンの下側の枠線だけを背景色より少し濃い色で太くするだけで、影ができて厚みがあるボタンを作成できます。
box-shadowプロパティでも、ボタンに影をつけて立体感を表現できます。
4.いびつな形のボタン
いびつな形のボタンは、パステルカラーと組み合わせることで、手作り感のある優しくて自然な印象を与えます。
ほかのサイトと差をつけたいときや、遊び心のあるデザインにしたいときにぴったりの、親しみやすいボタンです。
コピー<a href="#" class="btn-blob">いびつな形のボタン</a>
コピー.btn-blob {
display: inline-block;
padding: 1rem 2rem;
line-height: 1.5;
background-color: #b3e2d3;
color: #fff;
font-weight: bold;
text-decoration: none;
cursor: pointer;
border-radius: 100% 80px / 80px 100%;/* いびつな形を作る */
}
border-radiusは「横半径 / 縦半径」の順で角の丸みを指定するCSSプロパティです。
上記のコードでは左上・右下の横半径が幅いっぱいの100%、縦半径が80px、右上・左下はその逆（横 80px／縦 100%）の値を指定しています。
対角線上で丸みの大きさを変えることで、四角形がゆがんだ「いびつ形」になります。
5.グラデーションボタン
色の変化があるグラデーションボタンは、単色のボタンに比べてユーザーの視線を引きつけやすく、クリックを促す効果があります。
フラットなデザインに少しだけ立体感や深みを出したいときにぴったりで、CTAボタンによく使われます。
コピー<a href="#" class="btn-gradient">グラデーションボタン</a>
コピー.btn-gradient {
display: inline-block;
color: #fff;
padding: 1rem 2rem;
text-decoration: none;
cursor: pointer;
border: none;
border-radius: 8px;
font-weight: bold;
background: linear-gradient(45deg, #ff8a00, #e52e71);
}
背景にはlinear-gradient(45deg, #ff8a00, #e52e71); を指定し、左上から右下へ 45° に向かってオレンジからピンクへ滑らかに色が変わるように指定しています。
角度を変えればグラデーションが流れる方向を自由に調整可能です。
また、色はカンマで区切って追加すれば3色以上のグラデーションも簡単に作成できます。
単色よりも立体感・視線誘導効果が高く、CTAボタンやヒーローヘッダーで押してほしい意図を強くアピールできます。
6.アイコン付きボタン
ボタンにアイコンがあるだけで、ボタンの役割が視覚的に分かりやすくなります。
Font Awesomeのようなアイコンライブラリを使うと、HTMLにコードを一行追加するだけで手軽に使用できます。
コピー<!-- HTMLの<head>内にこの行を追加して、アイコンの準備をします -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- ボタン本体 -->
<a href="#" class="btn-icon">
<i class="fas fa-download"></i><!-- アイコン読み込み -->
<span>ダウンロード</span>
</a>
コピー.btn-icon {
display: inline-flex;
align-items: center;
gap: 8px;
background-color: #17a2b8;
color: #fff;
padding: 1rem 2rem;
text-decoration: none;
cursor: pointer;
border-radius: 5px;
}
<head>タグ内にFont AwesomeのCSSを読み込むと、Webページでアイコンが手軽に使えるようになります。
上記の例では、読み込んだアイコンと文字を横に並べるためにdisplay: inline-flex;とalign-items: center;で高さを中央に揃えています。
Font Awesome（フォントオーサム）とは？
Web上でよく使われるアイコンのライブラリ。CDN経由でCSSを読み込めば、<i class=”fas fa-○○”>のようにHTMLにクラスを記述するだけで簡単にアイコンを表示できます。色やサイズ、アニメーションなどもCSSで自由にカスタマイズできるため、デザインに合わせて柔軟に調整できます。
7.ネオンボタン
ネオンボタンは、暗めの背景に鮮やかなシアンのにじみ出す光をCSSの影だけで表現するボタンです。
box-shadowを重ねるだけでネオン管のような雰囲気を手軽に再現できます。
コピー<a class="neon-btn">ネオンボタン</a>
コピー.neon-btn {
display: inline-block;
background-color: #111;
color: #0ff;
padding: 0.8rem 2rem;
border: none;
border-radius: 10px;
cursor: pointer;
box-shadow:/* 複数の影を重ねて中心から光が広がりを表現 */
0 0 5px #0ff,
0 0 15px #0ff,
0 0 30px #0ff,
0 0 45px #0ff;
}
背景を深いグレーにして文字と影にシアンを使うことで、ネオン管が暗闇で浮かび上がるようなコントラストを作成しています。
box-shadowを段階的に重ねることで、光がにじんで広がるような見た目を実装しています。
CSSボタンアニメーション6選
現場でもよく使用されているボタンアニメーションを6つ紹介します。
- ホバーフェードボタン
- アウトラインボタン
- 矢印スライドボタン
- 波紋ボタン
- 浮き上がりボタン
- 押し込みボタン
ボタンにアニメーションを加えると、ユーザーの操作に対して「反応している」ことが伝わり、操作性が向上します。
ここでは、すぐに真似できるボタンを厳選しているので、ぜひ参考にしてください。
1.ホバーフェードボタン
ホバーフェードボタンは、ホバーしたときに、色がじわっと変わるアニメーションです。
コピー<a class="fade-btn">ホバーフェードボタン</a>
コピー.fade-btn {
display: inline-block;
background-color: #3498db;
color: #fff;
padding: 1rem 2rem;
border: none;
cursor: pointer;
border-radius: 30px;
transition: opacity 0.3s ease; /* 透明度の変化を滑らかに */
}
.fade-btn:hover {
opacity: 0.7;
}
ホバー時にopacityを0.7へ変化させることで、滑らかなフェードアウト効果を演出しています。
transition: opacity 0.3s ease;の秒数やイージング関数を変えることで、フェードアウトの速さや質感を好みに合わせて調整可能です。
実際の制作現場では、透明度の調整によるホバーエフェクトがよく使われており、シンプルでありながら効果的な手法として重宝されています。
2.アウトラインボタン
アウトラインボタンは、背景を透明にして枠線だけで構成されたボタンです。
主張しすぎずに洗練された印象を与えるため、一番目立たせたいメインボタンの隣に置くサブボタンとして活躍します。
コピー<a href="#" class="btn-ghost">アウトラインボタン</a>
コピー.btn-ghost {
display: inline-block;
background-color: transparent;
border: 2px solid #007bff;
color: #007bff;
font-weight: bold;
padding: 1rem 2rem;
text-decoration: none;
cursor: pointer;
border-radius: 5px;
transition: all 0.3s ease;
}
.btn-ghost:hover {
background-color: #007bff;
color: #fff;
}
アウトラインボタンは、background-color: transparent;で背景を透明にし、borderで輪郭だけを見せるボタンです。
ホバー時にはマウスが重なった瞬間に背景色と文字色が入れ替わり、クリックできることを強調します。
さらにtransitionを加えると色がふわっと変わり、より洗練された印象になります。
3.矢印スライドボタン
ホバーすると、矢印がスッと横に動くアニメーションです。
ユーザーの次のアクションを促す効果があります。
コピー<a class="slide-btn">
矢印スライドボタン<span class="arrow">→</span>
</a>
コピー.slide-btn {
background-color: #2ecc71;
color: #fff;
padding: 1rem 2rem;
border: none;
cursor: pointer;
position: relative;
overflow: hidden;
border-radius: 30px;
}
.slide-btn .arrow {
display: inline-block;
margin-left: 5px;
transition: transform 0.3s ease;
}
.slide-btn:hover .arrow {
transform: translateX(5px);
}
矢印部分をinline-blockにしておくことで、要素単位のアニメーションが可能です。
ホバー時にtranslateX(5px)で右へスライドさせ、戻るときも自然な反動が表現できます。
overflow: hiddenを付けることで、矢印がボタン領域外へはみ出さないクリーンな見た目を実装しています。
リッチなアイコンや図形を使っても同様にコーディングでき、ナビゲーションボタンとしてよく利用されるパターンのボタンです。
4.波紋ボタン
クリックした瞬間に、波紋が広がるエフェクトボタンです。
ユーザーにクリックが成功したことを直感的に伝えられます。
コピー<a class="ripple-btn">波紋ボタン</a>
コピー.ripple-btn {
display: inline-block;
position: relative;
overflow: hidden;
background-color: #e74c3c;
color: #fff;
padding: 1rem 2rem;
border: none;
cursor: pointer;
border-radius: 30px;
}
.ripple-btn::after {
content: "";
position: absolute;
width: 0;
height: 0;
background: rgba(255,255,255,0.5);
border-radius: 50%;
opacity: 0;
transform: translate(-50%, -50%);
pointer-events: none;
}
.ripple-btn:active::after {
left: 50%;
top: 50%;
width: 200px;
height: 200px;
opacity: 1;
transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
}
疑似要素::afterを使い、クリックした瞬間に中央から波紋が広がるようにコーディングしています。
pointer-events: noneでクリック領域の妨げにならないようにし、overflow: hiddenでコンテナをはみ出さないように制御しています。
width・height・opacityのトランジション時間を長めに設定するとゆったり広がる波紋に、短めにするとシャープな収縮感が実装可能です。
5.浮き上がりボタン
浮き上がりボタンは、ホバーするとボタンがふわりと浮き上がるように見えます。
影を同時に調整するのが、リアルに見せるポイントです。
コピー<a class="lift-btn">浮き上がりボタン</a>
コピー.lift-btn {
display: inline-block;
background-color: #9b59b6;
color: #fff;
padding: 1rem 2rem;
border: none;
cursor: pointer;
border-radius: 30px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.lift-btn:hover {
transform: translateY(-5px);
box-shadow: 0 10px 14px rgba(0,0,0,0.2);
}
浮き上がるアニメーションはtransform: translateY()とbox-shadowで実装します。
初期状態で軽い影を付け、ホバー時に上方向へ移動しながら影を濃く広げることで、ボタンがページから浮いて見えます。
ユーザーの視線を集めやすく、CTAボタンにおすすめです。
6.押し込みボタン
クリックした瞬間に、ボタンがグッと押し込まれるような感触を表現します。
ユーザーが「ボタンをちゃんと押した」と実感できるようになります。
コピー<a class="btn-press">押し込みボタン</a>
コピー.btn-press {
display: inline-block;
padding: 1rem 2rem;
background: #ee7800;
color: #fff;
border: none;
border-radius: 20px;
cursor: pointer;
box-shadow: 0 6px 0 #c4cacc; /* 初期の影 */
transition: transform .2s ease-out, box-shadow .2s ease-out; /* 押し込み／戻りを滑らかに */
}
/* ホバーで軽く沈む */
.btn-press:hover {
transform: translateY(2px);
box-shadow: 0 4px 0 #c4cacc;
}
/* クリックでしっかり沈む */
.btn-press:active {
transform: translateY(6px);
box-shadow: 0 0 0 #c4cacc;
}
transformとbox-shadowのみで押し込み感を作り、余計なスタイルを省いたシンプルな実装です。
box-shadowを地面の影として使うことでボタンに自然な奥行きを表現しています。
transitionにease-outを指定し、ホバーで軽く沈み、クリックで深く沈む動きに滑らかさを出しています。
また、色やサイズを変えるだけでカスタマイズできるため、初心者でも手軽に導入可能です。
CSSボタンの基本
ここまで具体的なデザインを見てきましたが、ここで一度CSSボタンの基本をおさらいしましょう。
ボタンの基礎を理解すれば、今後のボタン作りがもっとスムーズになります。
<button>と<a>の違い
HTMLでボタンのような見た目を作るとき、主に<button>タグと<a>タグが使われます。
どちらもボタンとして使用できますが、それぞれ異なる役割があります。以下の表で違いをまとめました。
| <button> | <a> | |
| 目的 | アクション実行 | ページ移動 |
| 使用例 | ・フォームの送信 ・データの保存・削除 ・メニューの開閉 |
・ほかページへの移動 ・同じページ内へジャンプ ・ダウンロードリンク |
| スクリーンリーダー | ボタンとして読まれる | リンクとして読まれる |
| ページ遷移 | △ ※JavaScriptの使用で可 |
◯ |
| フォームとの相性 | 〇 | ✕ |
見た目はCSSでいくらでも似せられますが、スクリーンリーダーはタグの意味を頼りに、操作用のボタンかリンクかを判断します。
動作系を<a>で書いてしまうとキーボード操作が効かなくなり、逆に遷移リンクを <button> にすると検索エンジンがクロールできません。
動作は<button>、遷移は<a>と覚えておくことで、アクセシビリティもSEOも自然に守れます。
CSSボタンの基本プロパティ
CSSでボタンを作るには、いくつかの基本プロパティを組み合わせます。
| 役割 | 詳細 | |
| display | 表示形式の指定 | ボタンを文字の一部として扱うか、一つのブロックとして扱うかを決定。 |
| padding | 内側の余白 | ボタンの内側にある文字の周りの余白を調整。 |
| border | 枠線の設定 | ボタンの枠線の太さや色を指定。枠線を消すことも可能。 |
| background | 背景色の指定 | ボタンの背景色の設定。 |
| cursor | マウスカーソルの形 | マウスカーソルがボタンの上に乗ったときの形を変更。 |
上記の5つのプロパティは、使いやすく見栄えのいいボタンを作成するための基本要素です。
displayでボタンを横に並べるならinline-block、縦ならblockを指定し、paddingで適切な余白を確保してクリックしやすさを向上させます。
borderとbackgroundで視覚的なデザインを整え、最後にcursorでユーザビリティを高めます。
これらのプロパティを適切に組み合わせることで、ユーザーにとって直感的で使いやすいボタン設計が可能です。
特にpaddingとcursorは、Webサイト訪問者の使いやすさに直結する重要な要素のため、設定するようにしましょう。
CSSボタン設計3ステップ
いきなりCSSボタンを書き始める前に、以下の3ステップで考えを整理しましょう。
- STEP 1｜役割を決める
- STEP 2｜サイズを決める
- STEP 3｜色と形を設定する
3ステップで設計することでデザインに一貫性が生まれ、ユーザーにとって使いやすいボタンを作成できます。
STEP 1｜役割を決める
はじめに考えることは、なんのためのボタンなのか、ということです。
フォームを送信するボタンなのか、JavaScriptで特定の処理を実行するボタンや、ほかのページへ移動するリンクなのか、目的を明確に整理しましょう。
それぞれの役割によって、コーディングのアプローチは大きく変わります。
フォーム送信であれば<input type=”submit”>や<button type=”submit”>を使用し、JavaScript処理なら<button type=”button”>、ページ遷移なら<a>タグを選択します。
HTMLタグの選択によって、ユーザーにとって使いやすく、SEO的にも適切なマークアップが実装可能です。
STEP 2｜サイズを決める
次に、ボタンのサイズをCSSで適切に設定します。
Webコーディングでは、レスポンシブ対応とタッチデバイスでの操作性が極めて重要です。
ボタンが小さすぎると、スマートフォンで指でタップしづらくなるため、paddingやmin-heightなどのプロパティを使って、適切なサイズを確保しましょう。
たとえば、padding: 12px 24px;やmin-height: 48px;を設定すれば、テキスト量に関わらず押しやすいボタンをコーディングできます。
また、メディアクエリを使用してデスクトップとモバイルで異なるサイズを指定すれば、各デバイスに最適化されたボタンの実装が可能です。
STEP 3｜色と形を設定する
最後に、CSSでボタンのスタイルを統一しましょう。
デザインカンプから色や形の値を正確に抽出し、変数として管理すれば、サイト全体で一貫性を保てます。
たとえば、Sassを使って$primary-color: #007bff;や$border-radius: 8px;のように変数を定義します。
変数として定義しておくと、各ボタンでbackground-color: $primary-color;やborder-radius: $border-radius;として使用可能です。
変数で管理すれば、色を変更したいときも一箇所を修正するだけで済み、保守性の高いコードが書けます。
CSSボタンの品質チェックポイント
CSSボタンをコーディングしたあとに、おさえておきたい3つの品質チェックポイントを紹介します。
- 画面幅でレイアウトが崩れないか
- ダークモードでも見やすい色使いか
- スマホで押しやすいサイズか
CSSボタンの見た目が整っていても、実際の操作環境で使いにくさがあれば、十分なボタンの役目は果たせません。
それぞれ順番に見ていきましょう。
画面幅でレイアウトが崩れないか
作成したボタンが、パソコンの大きな画面では綺麗に見えても、タブレットやスマートフォンなど、画面の幅を縮めたときにレイアウトが崩れていないか必ず確認しましょう。
たとえば、長いテキストが入ったボタンが画面からはみ出してしまったり、意図せず改行されて縦長になったりすることがあります。
これを防ぐためには、横幅をパーセンテージで指定したり、flexboxをうまく活用したりして、さまざまな画面サイズに柔軟に対応できる設計を心がけることが大切です。
どのデバイスサイズでもレイアウトが崩れないか確認しましょう。
ダークモードでも見やすい色使いか
OSの設定でダークモードを利用するユーザーが一定数います。
そのため、背景が黒くなったときに、ボタンの色が背景に溶け込んで見えなくなったり、文字が読みにくくなったりしないか確認しましょう。
prefers-color-schemeというメディアクエリを使えば、ダークモード専用のスタイルを定義できます。
テーマ共通で使う色は変数にまとめ、明暗で差し替えると管理が楽になります。
@media (prefers-color-scheme: dark) とは？
ユーザーがダークモードを使用しているかどうかを判別できるCSSの条件分岐。@media (prefers-color-scheme: dark){}で指定すると、背景色や文字色などをダークモード用に自動で切り替えられます。通常のスタイルに加えて、ダークモード専用のスタイルを追加するときに使用します。
スマホで押しやすいサイズか
スマートフォンの小さな画面では、ボタンが小さすぎると誤タップの原因になります。
Googleは、タップする要素の推奨サイズを最低でも48px × 48pxとしています。
paddingを調整して、指で確実に押せるだけの十分な大きさを確保しましょう。
また、ボタン同士が近すぎないか、適切なmarginがあるかも重要です。
CSSボタンの便利ツール一覧
CSSボタンを作成するときに役立つツールを紹介します。
デザインの好みや作業スタイルに合わせて、使い分けてみてください。
| CSSボタンジェネレーター | 簡単ウェブボタンジェネレーター | Front‑end‑Tools | |
| 特徴 | プリセットボタンのクリックで即コピ可能 | 詳細編集可能 | 高度な調整とアニメ対応可能 |
| 操作性 | シンプル | 直感的 | やや複雑 |
| 出力形式 | HTML / CSS | HTML / CSS | HTML / CSS |
| おすすめの人 | すぐに使いたい人 | 自分好みに調整したい人 | デザインにこだわりたい人 |
CSSボタンのジェネレーターを使うと、自分でコードを書かずにおしゃれなボタンが簡単に作れます。
時間の節約になるうえ、初心者でもすぐに使えるデザインが手に入ります。
ただし、不要なコードが含まれていたり、サイト全体のデザインと合わない場合があるので注意が必要です。
まとめ：ユーザーが押したくなるCSSボタンを実装しよう
効果的なCSSボタンの実装には、適切なHTMLタグの選択と基本プロパティの理解が欠かせません。
役割からサイズ、色と形を決める3ステップ設計法を実践することで、視覚的な魅力とアクセシビリティを両立できます。
レイアウト崩れ、ダークモード対応、タップしやすさの3項目での品質チェックを徹底し、便利なジェネレーターも活用して制作効率を向上しましょう。
13パターンのCSSボタンのコピペ可能なコードを参考に、ユーザーが直感的に操作できる高品質なボタンを構築してみてください。
未経験からコーディングを学ぶならデイトラWeb制作コースがおすすめ！
デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。
HTML/CSSやjavaScriptの言語の基本はもちろん、デザインカンプからのコーディング、WordPressのオリジナルテーマ作成までカリキュラムに含まれています。
さらに、中級・上級の最終課題はメンターによる課題レビューがあります。現場目線の品質チェックが受けられるため、大幅なスキルアップが期待できるでしょう。
Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！