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

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

Web制作 パーツデザイン

Webサイトやブログで使える、ボタンデザインを5種類紹介します。今回は第3弾として、これまでと被らない「形や装飾」に特徴のあるデザインをまとめています。

コードは

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

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

目次

今回紹介するボタン一覧

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

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

コピペ用コードと分離コードの違い

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

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

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

ボタンデザイン①：左ボーダーアクセント

左側に太めのラインを入れたボタンです。シンプルながら視線を引きやすく、情報の入口として使いやすいデザインです。

ボタン

コピペ用コード

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

<style>
.sample-btn11 {
  display: inline-block;
  padding: 14px 32px;
  background: #fff;
  color: #2563eb;
  border-left: 4px solid #2563eb;
  border-radius: 8px;
  text-decoration: none;
}
</style>

分離コード

HTML

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

CSS

.sample-btn11 {
  display: inline-block;
  padding: 14px 32px;
  background: #fff;
  color: #2563eb;
  border-left: 4px solid #2563eb;
  border-radius: 8px;
  text-decoration: none;
}

ボタンデザイン②：切り込みデザイン

左右に切り込みが入った形のボタンです。通常の四角形とは違い、少し個性的な印象を出したいときに使えます。

ボタン

コピペ用コード

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

<style>
.sample-btn12 {
  display: inline-block;
  padding: 14px 32px;
  background: #2563eb;
  color: #fff;
  clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
  text-decoration: none;
}
</style>

分離コード

HTML

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

CSS

.sample-btn12 {
  display: inline-block;
  padding: 14px 32px;
  background: #2563eb;
  color: #fff;
  clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
  text-decoration: none;
}

ボタンデザイン③：上下ライン強調

上下のラインだけで装飾したボタンです。枠で囲まないことで、軽くスッキリした印象になります。

ボタン

コピペ用コード

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

<style>
.sample-btn13 {
  display: inline-block;
  padding: 14px 32px;
  background: #fff;
  color: #059669;
  border-top: 3px solid #059669;
  border-bottom: 3px solid #059669;
  border-radius: 6px;
  text-decoration: none;
}
</style>

分離コード

HTML

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

CSS

.sample-btn13 {
  display: inline-block;
  padding: 14px 32px;
  background: #fff;
  color: #059669;
  border-top: 3px solid #059669;
  border-bottom: 3px solid #059669;
  border-radius: 6px;
  text-decoration: none;
}

ボタンデザイン④：ドット枠

点線の枠を使ったボタンです。カジュアルでやわらかい雰囲気を出したいときに向いています。

ボタン

コピペ用コード

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

<style>
.sample-btn14 {
  display: inline-block;
  padding: 14px 32px;
  background: #fff;
  color: #f97316;
  border: 2px dotted #f97316;
  border-radius: 10px;
  text-decoration: none;
}
</style>

分離コード

HTML

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

CSS

.sample-btn14 {
  display: inline-block;
  padding: 14px 32px;
  background: #fff;
  color: #f97316;
  border: 2px dotted #f97316;
  border-radius: 10px;
  text-decoration: none;
}

ボタンデザイン⑤：ストライプ背景

斜めのストライプを背景にしたボタンです。単色とは違い、少し遊びのあるデザインになります。

ボタン

コピペ用コード

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

<style>
.sample-btn15 {
  display: inline-block;
  padding: 14px 32px;
  background: repeating-linear-gradient(
    45deg,
    #6366f1,
    #6366f1 10px,
    #818cf8 10px,
    #818cf8 20px
  );
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
}
</style>

分離コード

HTML

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

CSS

.sample-btn15 {
  display: inline-block;
  padding: 14px 32px;
  background: repeating-linear-gradient(
    45deg,
    #6366f1,
    #6366f1 10px,
    #818cf8 10px,
    #818cf8 20px
  );
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
}

カスタマイズ（共通）

ボタンの文字はHTML内のテキストを書き換えることで変更できます。リンク先は href を変更してください。

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

色を変えたい場合は background や color を変更します。

background: #2563eb;
color: #fff;

サイズは padding で調整できます。

padding: 14px 32px;

枠線の種類も変更可能です。

border: 2px solid;
border: 2px dotted;
border: 2px dashed;

使うときの注意点

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

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

まとめ

第3弾では、形や装飾に特徴のあるデザインを中心に紹介しました。これまでの第1弾・第2弾と合わせることで、シンプルなボタンから少し個性的なデザインまで幅広く揃ってきています。実際に使うときは、まず今回のような「形や装飾」でベースを決めてから、色やサイズを調整していくと、自分のサイトに合ったボタンが作りやすくなります。

また、コピペ用コードで手軽に試しつつ、よく使うデザインは分離コードで管理することで、効率よく使い回すこともできます。今後もボタンデザインや他のパーツを順番に追加していくので、用途に合わせて使えるパターンを増やしていってください。

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

関連記事

目次