スポンサーリンク

【コピペで作れるボタンデザイン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タグを使ったボタンの作り方をご紹介します。
使いやすいものを厳選してお届けするので、カラーや大きさなどはご自分の制作物に合わせて自由に変えて使ってみてください!

フラットなボタン

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

四角 シンプル

Click here
[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;
}

四角 シンプルライン

Click here
[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;
}

角丸 波線

Click here
[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;
}

角丸 ダブルライン

Click here
[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;
}

円形 グラデーション

Click here
[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;
}

正方形 シンプルライン

Click here
[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;
}

立体的なボタン

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

角丸 影付き

Click here
[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;
}

角丸 立体

Click here
[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;
}

動きのあるボタン

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

ホバーで大きくなるボタン

Click here
[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);
}

グラデーションが変化するボタン

Click here
[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;
}

ピカピカ光るボタン

Click here
[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;
  }
}

プッシュ感のあるボタン

Click here
[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

参考)tamatafu(https://tamatuf.net/html-css/css-hover-button/

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

参考)(https://www.colordic.org/

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

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

Click here

上記のボタンをアレンジする場合

.button { →クラス名
background-color: #fff; →背景カラー
border: solid 2px #c71585; →ボーダーのデザイン(solid…実線/ dashed…波線/ double…二重線/ dotted…点線)・幅・カラー
color: #c71585; →文字のカラー
border-radius: 10px; →角の丸み(50%…円形・0px or なし…四角)
padding: 10px 30px; →文字と枠の間の余白
text-decoration: none; →デフォルトの文字のデコレーションを消す
font-size: 1em; →文字サイズ(em、rem、pxで指定可能)
}
.button:hover { →ホバーした時の動き
color: #c71585; →文字のカラー
background-color: #fff0f5; →背景カラー
}

その他のアレンジ

box-shadow: 0px 5px 15px -5px rgba(0,0,0,0.8); →影をつける
※ rgba を#カラーで指定すると影ではなくカラーで立体感をだせます
transform: scale(1.2); →大きさ

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

まとめ

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

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

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

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

この記事を書いた人
プロフィール
ERIKO

☆ FrankuLメンバー。(https://frankul.net/crew/koyama/) 
☆ 楽しいことが大好きなWebクリエイターです。
制作を通してたくさんの人のHAPPYが溢れるお手伝いができることが幸せです♫
☆ 開発・コーダー・ライター・デザインといろいろやってます。

フォローはこちらから
便利ツール・サービス
よかったらシェアしてね
フォローはこちらから
FrankuLOG|フリーランスのための羅針盤ブログ
タイトルとURLをコピーしました