【コピペで作れるボタンデザイン12選】HTMLとCSSでボタンデザインを作ってみよう！

今回は、HTMLとCSSを使って作るボタンデザインをご紹介します。

突然ですが、↓どちらをクリックしますか？？

Webサイトやホームページ内でクリックしてほしいところが一目瞭然でわかる、ボタンデザイン。
ボタンデザインを用いることでユーザビリティーも格段にアップします！

ボタンデザインとは？

ボタンデザインはWebサイトやホームページ内でクリックしてほしい場所をわかりやすくするために用いられます。

HTMLとCSSを使わずに、デザイン画像を使ってボタンを作ることもできます。
では、なぜHTMLとCSSでボタンデザインを作るのでしょう？？

それは…
画像を使うより、HTMLとCSSを使ってボタンデザインを作った方が軽い、解像度が高い、汎用性が高いからです。

HTMLとCSSの組み合わせで作ることによって、Webサイトを作成しながら色味や文字の大きさなど細かい仕様チェンジが簡単にできます。

画像を使ってしまうと「文字がはっきりしない」「思った色と違う」「目立たなかった」「イメージと違った」といったときにデザイン画像から作り直さなければなりません。
しかし、HTMLとCSSの組み合わせならカラー番号や文字サイズ、幅などの大きさをCSSで簡単に変更できます。

HTMLで作るボタンには、3つの作成方法があります。用途によって使い分けましょう！
・ボタンタグ<button>
・インプットタグ<input>
・アンカータグ<a>

HTMLの buttonタグ

HTML5には、ボタン属性を使用したボタンタグがあります。

<button type="button" name="button">Click here</button>

ボタン属性は、＜submit＞＜reset＞＜button＞として使用することができます。
それぞれの役割に合わせて使い分けてください。
JavaScriptの機能、onclick=”飛ばしたいページ” を使用することで、ページの遷移が可能です。

HTMLの inputタグ

inputタグをボタンとして使う場合は用途に合わせ、submit / reset / button を使いましょう。

<input type="button" name="button" value="Click here">

type に submit を指定すると、フォームの入力内容をアクション先へ送信できます。
type に reset を指定すると、フォームの入力内容をリセットすることができます。
しかし、type に button を指定した場合は、そのままでは何も動作しません。buttonタグと同じく onclick イベントを用いて、ボタンクリック後の動作を指定することができます。

aタグを使ってボタンデザインを作ってみよう

aタグはアンカーリンクですが、CSSで装飾をし、ボタンのように見せることができます。
クリックしたら別のページへ遷移するためのボタンであれば、aタグが使いやすいですね！

今回は、aタグを使ったボタンの作り方をご紹介します。
使いやすいものを厳選してお届けするので、カラーや大きさなどはご自分の制作物に合わせて自由に変えて使ってみてください！

フラットなボタン

とってもシンプルな定番ボタン

[HTML]
<a href="#" class="button01">Click here</a>

[CSS]
.button01 {
  background-color: #2f4f4f;
  color: #fff;
  padding: 10px 30px;
  text-decoration: none;
  font-size: 1em;
}
.button01:hover {
  color: #fff;
  opacity: 0.8;
}

[HTML]
<a href="#" class="button02">Click here</a>

[CSS]
 .button02 {
  background-color: #fff;
  border: solid 2px #2f4f4f;
  color: #2f4f4f;
  padding: 10px 30px;
  text-decoration: none;
  font-size: 1em;
}
.button02:hover {
  color: #2f4f4f;
  background-color: #b0e0e6;
}

[HTML]
<a href="#" class="button03">Click here</a>

[CSS]
.button03 {
  background-color: #fff;
  border: dashed 2px #c71585;
  color: #c71585;
  border-radius: 10px;
  padding: 10px 30px;
  text-decoration: none;
  font-size: 1em;
}
.button03:hover {
  color: #c71585;
  background-color: #fff0f5;
}

[HTML]
<a href="#" class="button04">Click here</a>

[CSS]
.button04 {
  background-color: #fff;
  border: double 6px #3cb371;
  color: #3cb371;
  border-radius: 10px;
  padding: 10px 30px;
  text-decoration: none;
  font-size: 1em;
}
.button04:hover {
  color: #3cb371;
  background-color: #f0fff0;
}

[HTML]
<a href="#" class="button05">Click here</a>

[CSS]
.button05 {
  display: inline-block;
  background-image: linear-gradient(45deg, #ff1493 0%, #dda0dd 100%);
  color: #fff;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  line-height: 100px;
  text-align: center;
  font-size: 1em;
  text-decoration: none;
}
.button05:hover {
  color: #fff;
  opacity: 0.6;
}

[HTML]
<a href="#" class="button06">Click here</a>

[CSS]
.button06 {
  display: inline-block;
  background-color: #fff;
  border: solid 2px #00bfff;
  color: #00bfff;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  line-height: 100px;
  text-align: center;
  font-size: 1em;
  text-decoration: none;
}
.button06:hover {
  background-color: #e0ffff;
  color: #00bfff;
}

立体的なボタン

浮き出た感じで立体感があるデザイン

[HTML]
<a href="#" class="button07">Click here</a>

[CSS]
.button07 {
  background-color: #ffa500;
  color: #fff;
  border-radius: 10px;
  padding: 10px 30px;
  text-decoration: none;
  font-size: 1em;
  box-shadow: 0px 5px 15px -5px rgba(0,0,0,0.8);
}
.button07:hover {
  color: #fff;
  opacity: 0.6;
}

[HTML]
<a href="#" class="button08">Click here</a>

[CSS]
.button08 {
  background-color: #ffd700;
  color: #000;
  border-radius: 10px;
  padding: 10px 30px;
  text-decoration: none;
  font-size: 1em;
  box-shadow: 0 5px 0 #b8860b;
}
.button08:hover {
  color: #000;
  opacity: 0.6;
}

動きのあるボタン

ボタンをクリックするときに動きがあるちょっと遊び心のあるデザイン

[HTML]
<a href="#" class="button09">Click here</a>

[CSS]
.button09 {
  display: inline-block;
  background-color: #fff;
  border: solid 2px #0000ff;
  color: #0000ff;
  border-radius: 10px;
  padding: 10px 30px;
  text-decoration: none;
  font-size: 1em;     
  transition: all .3s ease 0s;
} 
.button09:hover {
  color: #0000ff;
  background-color: #fff;
  transform: scale(1.2);
}

[HTML]
<a href="#" class="button10">Click here</a>

[CSS]
.button10 {
  display: inline-block;
  background: linear-gradient(to right, #00bfff 0%, #7fffd4 45%, #fffacd 100%);
  background-size: 200% auto;  
  color: #fff;
  border-radius: 20px;
  padding: 10px 30px;
  text-decoration: none;
  font-size: 1em;
  transition: .5s;
}
.button10:hover {
  color: #fff;
  background-position: right center;
}

[HTML]
<a href="#" class="button11">Click here</a>

[CSS]
.button11 {
  background-color: #ffd700;
  color: #fff;
  padding: 10px 30px;
  text-decoration: none;
  font-size: 1em;
  outline: 1px solid;
  outline-color: #ffd700;
  outline-offset: 0px;
  display: inline-block;
  transition: .3s;
}
.button11:hover {
  color: #fff;
  animation: light .8s infinite;
}
@keyframes light {
  100% { 
    outline-color: transparent;
    outline-offset: 10px;
  }
}

[HTML]
<a href="#" class="button12">Click here</a>

[CSS]
.button12 {
  background-color: #fff;
  border: solid 2px #191970;
  color: #191970;
  border-radius: 20px;
  padding: 10px 30px;
  text-decoration: none;
  font-size: 1em;
  box-shadow: 0 5px 0 #191970;
  display: inline-block;
  transition: .3s;
}
.button12:hover {
  color: #191970;
  transform: translateY(5px);
  box-shadow: 0 0 0 #191970;
}

参考サイト

ボタンデザインの参考にさせていただきました。

https://fujikoblog0309.com/css-background-transition

fujikoblog0309.com

参考）ゆるくがんばる海外生活ブログ（https://fujikoblog0309.com/css-background-transition）

CSSで実装するボタンのホバーエフェクトまとめ|tamatuf

CSSで作成したボタンにカーソルをマウスオーバーした際に、色が変わる、大きさが変わるなど様々な効果を付けるホバーエフェクトのサンプルをまとめてみました。 色を変える ホバーするとボ

tamatuf.net

参考）tamatafu（https://tamatuf.net/html-css/css-hover-button/）

カラーを選ぶときにはこちらのサイトが便利です。

WEB色見本 原色大辞典 - HTMLカラーコード

色の名前とカラーコードが一目でわかるWEB色見本

www.colordic.org

参考）（https://www.colordic.org/）

ボタンデザインのアレンジ

ボタンデザインのアレンジ方法を簡単に解説します。

今回ご紹介しているものを組み合わせて、いろいろなアレンジができます。
ぜひ、試してみてください！

まとめ

ボタンデザインは、見やすくクリックしやすいWebサイトやホームページにつながる便利ツールです。

WordPressにはボタンデザインが付属されているテーマやプラグインもありますが、作れるものに限りがあります。カスタムHTMLとカスタムCSSを使って、オリジナルのボタンを作成することもできます！

今回ご紹介しているボタンデザインのアレンジは、buttonタグやinputタグにも応用可能です。

カラーやサイズをアレンジしながらWebサイトに合わせたボタンデザインを楽しんでください！