コピペで使えるCSSボタンのデザイン集｜ホバー効果つきサンプルと実装コード

2026-08-20 2026-08-20 15分40秒

Webサイトやブログの印象を大きく左右するのが「ボタン」のデザインです。とはいえ、毎回ゼロからCSSを書くのは手間ですよね。この記事では、そのまま使えるCSSボタンのデザインを、実際に動くサンプルとセットで紹介します。マウスを乗せたときの動き（ホバー効果）まで確認でき、気に入ったものは実装コードをワンタップでコピーできます。

この記事の目次

CSSボタンの基本

ボタンは、HTMLの <button>（またはリンクの <a>）に、CSSで見た目を付けて作ります。最低限おさえておきたいのは次のプロパティです。

background：背景色（linear-gradient でグラデーションも可）
color：文字色
border / border-radius：枠線と角の丸み
padding：ボタン内側の余白（大きさ）
transition：ホバー時などの変化をなめらかにする

これらを組み合わせるだけで、印象の異なるボタンが自在に作れます。

コピペで使えるCSSボタンデザイン集

下のサンプルは実際に動きます。マウスを乗せる（スマホはタップ）とホバー効果を確認できます。気に入ったデザインは「コードをコピー」でCSSをコピーし、そのまま使えます。

コピペで使えるCSSボタンデザイン集

各サンプルは実際に動きます（マウスを乗せる／タップ）。HTMLは <button class="btn">ボタン</button> に、下のCSSを適用してください。

ベーシック（塗り・角丸）

.btn {display:inline-block;padding:12px 28px;background:#3b82f6;color:#fff;border:none;border-radius:8px;font-size:16px;cursor:pointer;transition:.2s;}
.btn:hover {background:#2563eb;}

アウトライン（枠線・ホバーで塗り）

.btn {padding:12px 28px;background:transparent;color:#3b82f6;border:2px solid #3b82f6;border-radius:8px;font-size:16px;cursor:pointer;transition:.2s;}
.btn:hover {background:#3b82f6;color:#fff;}

グラデーション（丸型）

.btn {padding:12px 30px;background:linear-gradient(135deg,#f6416c,#ff8c42);color:#fff;border:none;border-radius:30px;font-size:16px;cursor:pointer;transition:.3s;}
.btn:hover {filter:brightness(1.08);}

ふわっと浮く（ホバーで影）

.btn {padding:12px 28px;background:#fff;color:#333;border:none;border-radius:8px;font-size:16px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.15);transition:.2s;}
.btn:hover {transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.2);}

押し込み3D（クリックで沈む）

.btn {padding:12px 28px;background:#22c55e;color:#fff;border:none;border-radius:8px;font-size:16px;cursor:pointer;box-shadow:0 5px 0 #15803d;transition:.05s;}
.btn:active {transform:translateY(4px);box-shadow:0 1px 0 #15803d;}

下線がのびる（テキスト風）

.btn {padding:10px 6px;background:none;color:#333;border:none;font-size:16px;cursor:pointer;position:relative;}
.btn::after {content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:#3b82f6;transition:.3s;}
.btn:hover::after {width:100%;}

ピル型（濃色・角丸最大）

.btn {padding:12px 30px;background:#111827;color:#fff;border:none;border-radius:999px;font-size:16px;cursor:pointer;transition:.2s;}
.btn:hover {background:#374151;}

矢印つき（ホバーで矢印が動く）

.btn {padding:12px 28px;background:#3b82f6;color:#fff;border:none;border-radius:8px;font-size:16px;cursor:pointer;transition:.2s;}
.btn::after {content:' \2192';transition:.2s;}
.btn:hover::after {margin-left:5px;}

「コードをコピー」でCSSをコピーできます。クラス名（.btn）はご自由に変更してお使いください。色やサイズも数値を書き換えるだけで調整できます。

カスタマイズのコツ

コピーしたコードは、数値や色を書き換えるだけで簡単に調整できます。

色を変える：background と color のカラーコードを差し替えるだけ。ブランドカラーに合わせましょう。
大きさを変える：padding の値（例：12px 28px）を大きくすると余白が広がり、ボタンも大きくなります。
角の丸みを変える：border-radius を 0 にすると角ばった四角、大きくすると丸み、999px で左右が半円のピル型になります。
動きを調整する：transition の秒数（例：.2s）を変えると、ホバー時の変化の速さを調整できます。

クラス名（.btn）は好きな名前に変えて構いません。複数のボタンを使い分けたいときは、.btn-primary・.btn-outline のように名前を分けると管理しやすくなります。

まとめ

CSSボタンは、background・border-radius・padding・transition といった基本プロパティの組み合わせで、驚くほど印象が変わります。まずは上のサンプルから好みのデザインをコピーして、色や大きさを自分のサイトに合わせて調整してみてください。動きを確認しながら選べるので、仕上がりのイメージがつかみやすいはずです。

一緒に読まれている人気記事