MENU
日常や業務で便利なツールを公開中

コピペで使えるボタンデザイン5選②｜HTML/CSSで簡単実装

Web制作 パーツデザイン

Webサイトやブログで使える、ボタンデザインを5種類紹介します。今回はボタンデザイン第2弾として、第1弾とは少し雰囲気の違うデザインをまとめました。

コードは

  • そのまま貼って使える「コピペ用コード」
  • HTMLとCSSを分けた「分離コード」 の2パターンを用意しています。

「まず表示を試したい」「ブログ記事内で1つだけ使いたい」という場合はコピペ用コードが便利です。Web制作でCSSファイルにまとめたい場合や、同じデザインを複数箇所で使い回したい場合は分離コードを使うと管理しやすくなります。

目次

今回紹介するボタン一覧

先に見た目をまとめて確認できます。気に入ったデザインをクリックすると該当箇所へ移動します。

ボタン ボタン ボタン ボタン ボタン

コピペ用コードと分離コード

  • コピペ用コード：HTMLとCSSを1つにまとめた形式（そのまま貼って表示）
  • 分離コード：HTMLとCSSを分けた形式（実務・再利用向け）

コピペ用コードは、記事編集画面のカスタムHTMLブロックなどにそのまま貼って使うことを想定しています。<style> タグまで含めてコピーすると、ボタンの見た目も一緒に反映されます。

分離コードは、HTML部分とCSS部分を分けて使うためのコードです。HTMLは表示したい場所に置き、CSSは追加CSSや外部CSSファイルなどにまとめて書きます。

ボタンデザイン6：白背景シャドウ

白背景に影を付けた、やわらかい印象のボタンです。背景が白でも埋もれにくいように、薄い枠線と影を入れています。

ボタン

コピペ用コード

<a href="#" class="sample-btn06">ボタン</a>

<style>
.sample-btn06 {
  display: inline-block;
  padding: 14px 34px;
  background: #fff;
  color: #333;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid #ddd;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
</style>

分離コード

HTML

<ahref="#"class="sample-btn06">ボタン</a>

CSS

.sample-btn06 {
  display: inline-block;
  padding: 14px 34px;
  background: #fff;
  color: #333;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid #ddd;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

ボタンデザイン7：ダークスクエア

黒系の背景に、下線のような濃い影を入れたボタンです。丸みを抑えることで、すっきりした印象になります。

ボタン

コピペ用コード

<a href="#btn07" class="sample-btn07">ボタン</a>

<style>
.sample-btn07 {
  display: inline-block;
  padding: 14px 34px;
  background: #111827;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
  border-bottom: 4px solid #4b5563;
}
</style>

分離コード

HTML

<ahref="#"class="sample-btn07">ボタン</a>

CSS

.sample-btn07 {
  display: inline-block;
  padding: 14px 34px;
  background: #111827;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
  border-bottom: 4px solid #4b5563;
}

ボタンデザイン8：淡色ボックス

淡い水色を使ったボタンです。背景色と枠線の色を近いトーンにすると、やさしい雰囲気になります。

ボタン

コピペ用コード

<a href="#btn08" class="sample-btn08">ボタン</a>

<style>
.sample-btn08 {
  display: inline-block;
  padding: 14px 34px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 14px;
  border: 2px solid #7dd3fc;
}
</style>

分離コード

HTML

<ahref="#"class="sample-btn08">ボタン</a>

CSS

.sample-btn08 {
  display: inline-block;
  padding: 14px 34px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 14px;
  border: 2px solid #7dd3fc;
}

ボタンデザイン9：点線ボーダー

点線の枠を使ったボタンです。通常の実線とは違い、少し軽い印象になります。

ボタン

コピペ用コード

<a href="#btn09" class="sample-btn09">ボタン</a>

<style>
.sample-btn09 {
  display: inline-block;
  padding: 14px 36px;
  background: #fff;
  color: #7c3aed;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  border: 2px dashed #a78bfa;
}
</style>

分離コード

HTML

<ahref="#"class="sample-btn09">ボタン</a>

CSS

.sample-btn09 {
  display: inline-block;
  padding: 14px 36px;
  background: #fff;
  color: #7c3aed;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  border: 2px dashed #a78bfa;
}

ボタンデザイン10：チェックアイコン付き

CSSの ::before を使って、テキストの前にチェックマークを表示したボタンです。

ボタン

コピペ用コード

<a href="#btn10" class="sample-btn10">ボタン</a>

<style>
.sample-btn10 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 34px;
  background: #16a34a;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 12px;
}

.sample-btn10::before {
  content: "✓";
}
</style>

分離コード

HTML

<ahref="#"class="sample-btn10">ボタン</a>

CSS

.sample-btn10 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 34px;
  background: #16a34a;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 12px;
}

.sample-btn10::before {
  content: "✓";
}

カスタマイズ（共通）

ボタンの文字を変えたい場合は、HTML内の ボタン の部分を書き換えます。 リンク先を変更したい場合は、href="#" の # を移動先のURLに変更します。

<ahref="https://example.com"class="sample-btn06">詳しく見る</a>

色を変えたい場合は、CSSの background を変更します。

background: #2f80ed;

文字色を変えたい場合は、color を変更します。

color: #fff;

ボタンの大きさを変えたい場合は、padding を調整します。

padding: 14px 34px;

前の数値が上下の余白、後ろの数値が左右の余白です。
枠線の種類は変更できます。

border: 2pxsolid; /* 実線 */
border: 2pxdashed; /* 点線 */
border: 2pxdotted; /* ドット */

アイコンは変更できます。

content: "✓";

この部分を「→」や「★」などに変更すると、雰囲気を変えられます。

使うときの注意点

同じページ内で複数のボタンを使う場合は、class名が重ならないように注意してください。 たとえば、.sample-btn06 のCSSを変更すると、同じ sample-btn06 が付いたボタンすべてに反映されます。 デザインを別々に管理したい場合は、sample-btn06、sample-btn07 のようにclass名を分けると管理しやすくなります。

また、コピペ用コードを複数回貼ると、同じCSSがページ内に何度も入ることがあります。 その場合は分離コードを使ってCSSを1か所にまとめるとスッキリします。

同じページ内で複数のボタンを使う場合は、class名が重ならないように注意してください。 たとえば、.sample-btn06 のCSSを変更すると、同じ sample-btn06 が付いたボタンすべてに反映されます。 デザインを別々に管理したい場合は、sample-btn06、sample-btn07 のようにclass名を分けると管理しやすくなります。

まとめ

ボタンデザイン第2弾として、5種類のボタンを紹介しました。第1弾とは違う雰囲気のデザインを中心にしているので、サイトやブログの雰囲気に合わせて使いやすいものを選んでみてください。

今後はカードや見出しなど、他のデザインパーツも順番に追加していきます。

Web制作 パーツデザイン
よかったらシェアしてね！
  • URLをコピーしました！

関連記事

目次