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

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

Web制作 パーツデザイン

Webサイトやブログで使える、ボタンデザインを5種類紹介します。シンプルに使えるボタンを、コピペしやすい形でまとめています。

コードは

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

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

目次

今回紹介するボタン一覧

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

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

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

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

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

分離コードは、HTML部分とCSS部分を分けて使うためのコードです。HTMLは表示したい場所に置き、CSSは追加CSSや外部CSSファイルなどにまとめて書きます。複数ページで同じデザインを使いたい場合は、こちらの方が管理しやすくなります。

ボタンデザイン1：シンプル角丸

角を大きく丸めた、基本形のボタンです。まずはこの形をベースにして、色や余白を変えるだけでもさまざまなデザインに応用できます。

ボタン

コピペ用コード

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

<style>
.sample-btn01 {
  display: inline-block;
  padding: 14px 32px;
  background: #2f80ed;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
}
</style>

分離コード

HTML

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

CSS

.sample-btn01 {
  display: inline-block;
  padding: 14px 32px;
  background: #2f80ed;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
}

ボタンデザイン2：立体（影付き）

下方向に影を付けたボタンです。box-shadow を使うことで、平面的なボタンよりも少し立体感のある見た目になります。

ボタン

コピペ用コード

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

<style>
.sample-btn02 {
  display: inline-block;
  padding: 14px 34px;
  background: #ff8a00;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 10px;
  box-shadow: 0 5px 0 #c96a00;
}
</style>

分離コード

HTML

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

CSS

.sample-btn02 {
  display: inline-block;
  padding: 14px 34px;
  background: #ff8a00;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 10px;
  box-shadow: 0 5px 0 #c96a00;
}

ボタンデザイン3：枠線

背景色を入れず、枠線で見せるタイプのボタンです。background を白、border を指定することで、すっきりした印象になります。

ボタン

コピペ用コード

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

<style>
.sample-btn03 {
  display: inline-block;
  padding: 13px 32px;
  background: #fff;
  color: #2f80ed;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid #2f80ed;
  border-radius: 999px;
}
</style>

分離コード

HTML

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

CSS

.sample-btn03 {
  display: inline-block;
  padding: 13px 32px;
  background: #fff;
  color: #2f80ed;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid #2f80ed;
  border-radius: 999px;
}

ボタンデザイン4：グラデーション

背景にグラデーションを使ったボタンです。linear-gradient の色を変えると、同じ形でも雰囲気を大きく変えられます。

ボタン

コピペ用コード

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

<style>
.sample-btn04 {
  display: inline-block;
  padding: 14px 36px;
  background: linear-gradient(135deg, #ff7eb3, #ff758c);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
}
</style>

分離コード

HTML

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

CSS

.sample-btn04 {
  display: inline-block;
  padding: 14px 36px;
  background: linear-gradient(135deg, #ff7eb3, #ff758c);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
}

ボタンデザイン5：矢印付き

CSSの ::after を使って、テキストの後ろに矢印を表示しています。HTML側に矢印を書かなくても、CSSだけで追加できるのがポイントです。

ボタン

コピペ用コード

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

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

.sample-btn05::after {
  content: "→";
}
</style>

分離コード

HTML

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

CSS

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

.sample-btn05::after {
  content: "→";
}

カスタマイズ（共通）

ボタンの文字を変えたい場合は、HTML内の ボタン の部分を書き換えます。

リンク先を変更したい場合は、href="#" の # を移動先のURLに変更します。

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

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

background: #2f80ed;

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

color: #fff;

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

padding: 14px 32px;

前の数値が上下の余白、後ろの数値が左右の余白です。左右を大きくすると横に広いボタンになります。

角丸を調整したい場合は、border-radius を変更します。

border-radius: 999px;

999px のように大きな値を入れると、横長のボタンはカプセル型になります。少しだけ丸くしたい場合は、8px や 12px などにすると自然です。

使うときの注意点

同じページ内で複数のボタンを使う場合は、class名が重ならないように注意してください。

たとえば、.sample-btn01 のCSSを変更すると、同じ sample-btn01 が付いたボタンすべてに反映されます。デザインを別々に管理したい場合は、sample-btn01、sample-btn02 のようにclass名を分けると管理しやすくなります。

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

まとめ

ボタンデザインを5種類紹介しました。気に入ったデザインを選んで、そのままコピペして使えます。
色や余白を調整するだけでも印象は大きく変わるので、自分のサイトに合わせてカスタマイズしてみてください。

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

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

関連記事

目次