• HOME
  • HTML/CSS
  • HTMLでのボタンの作成方法(よくあるデザインの特徴5選も紹介)
  • HTML/CSS
  • button
  • css
  • html

HTMLでのボタンの作成方法(よくあるデザインの特徴5選も紹介)

HTMLでのボタンの作成方法(よくあるデザインの特徴5選も紹介)

「HTMLでボタンをどう作ればいいか分からない…。」そんなお悩みはありませんか？

この記事では、HTML、CSSを用いたボタンの基本的な作り方、ボタンのデザインについて解説していきます。

それでは、まずHTMLのボタンの基本的な作り方を見ていきましょう。

HTMLのボタンの基本的な作り方

HTMLでボタンを作るパターンは大きく分けて３つあります。

  1. ボタンタグでつくる
  2. aタグとCSSでつくる
  3. inputタグでつくる

それぞれ解説していきます。

buttonタグでつくる

HTMLにはbuttonタグが存在します。

buttonタグを使うときのコードは以下のようになります。

<button type="button" onclick="location.href='URL'">ボタン</button>

これだと多少味気ないので、CSSでデザインを加えるをおすすめします。

「onclick属性」をもたせることで、クリックすると指定したURLに飛べるようにしています（このあたりはJavaScriptに関係してくるので詳しくは割愛します）。

「type」には、「button」「submit」「reset」のいずれかが入ります。

buttonは普通のボタンをつくるときに使います。

submitはお問い合わせフォームなどの情報を送る送信ボタンをつくるときに使います。

最後にresetはフォームの中に書かれた内容を消すボタンをつくるときに使われます。

用途に合わせてtypeを使い分けましょう。

aタグとCSSでつくる

先ほど紹介したボタンタグを使わない方法です。

aタグでボタンをつくるので1番シンプルな方法といえるでしょう。

例えば下のようにコードを書きます。

<a href="#" class="btn">ボタン</a>
.btn {
  width: 70px;
  height: 30px;
  text-align: center;
  padding: 10px 30px;
  background-color: gray;
  display: block;
  text-decoration: none;
  color: black;
}

このコードを出力すると以下のようになります。

inputタグでつくる

buttonタグと同様、お問い合わせフォームなどの、フォーム内にボタンをつくるときにinputタグを使います（もちろん普通につくる場合も使えます。)

コードは以下のようになります。

<input type="button" value="ボタン" onclick="location.href='URL'" />

「value」にボタンの中の文字を入れます。

このコードを出力すると以下のようになります。

次に、ボタンのデザインについて見ていきましょう。

よくあるボタンデザインの特徴5選

さて、ここからはよくあるボタンデザインの特徴を5つ紹介していきます。

紹介するのは下の5つになります。

  1. 丸みをつける
  2. 影をつける
  3. 浮き出して見せる
  4. 色にグラデーションをつける
  5. 円形にする

それぞれ例を示して解説していきます。

丸みつける

角に丸みをつけたボタンです。

コードは以下の通りです。

<a href="#" class="btn">ボタン</a>
.btn {
  width: 70px;
  height: 30px;
  text-align: center;
  padding: 10px 30px;
  background-color: PaleTurquoise;
  display: block;
  text-decoration: none;
  color: black;
  border-radius: 7px;
}

ボタンは角に丸みを帯びさせることは多いです。

丸みをつけるには「border-radius」プロパティを用います。

「radius」は「半径」という意味です。

border-raidusは円や楕円の半径を指定して、丸みを調節します

※指定する値が一つのときは円、二つのときは楕円の半径になります。二つ指定するときはスラッシュで分けてください。

また、このプロパティでは「px」の絶対指定と、「%」などの相対指定の両方ができます。

そのときに伝えたい印象によって丸み具合を調整しましょう。

影をつける

ボタンの周りに影がついています。

コードは以下の通りです。

<a href="#" class="btn">ボタン</a>
.btn {
  width: 70px;
  height: 30px;
  text-align: center;
  padding: 10px 30px;
  background-color: PaleTurquoise;
  display: block;
  text-decoration: none;
  color: black;
  box-shadow: 2px 2px gray;
}

ボタンに影をつけることもよくあります。

影をつけるためには、「box-shadow」プロパティを使います。

影をつける方向は、下+右が多い印象です。

box-shadow: 〇〇px  △△px  black;

というコードがあった場合、〇〇に普通に正の数字を入れると右へ、負(マイナス)の数字を入れると左へ影が伸びます。

また、△△に正の数字を入れると下へ、負(マイナス)の数字を入れると上へ影が伸びます。

浮き出して見せる

ボタンが少し浮き出して見えています。

コードは以下の通りです。

<a href="#" class="btn">ボタン</a>
.btn {
  width: 70px;
  height: 30px;
  text-align: center;
  padding: 10px 30px;
  background-color: PaleTurquoise;
  display: block;
  text-decoration: none;
  color: black;
  border-bottom: 3px solid CadetBlue;
}

borderプロパティを使うことで、ボタンが浮き出して見えるようにします。

下方向の線を太くして立体感を出しています。

浮き出して見せることで、ボタンが強調されます。

色にグラデーションをつける

色にグラデーションがついているボタンです。

コードは以下の通りです。

<a href="#" class="btn">ボタン</a>
.btn {
  width: 70px;
  height: 30px;
  text-align: center;
  padding: 10px 30px;
  background-color: PaleTurquoise;
  display: block;
  text-decoration: none;
  color: black;
  background: linear-gradient(LightPink, LightSkyBlue);
}

色にグラデーションをつけるには、backgroundプロパティを使います。

backgroundプロパティで、linear-gradient()という関数を用います。

()内には好きなだけ色を入れることができます。

グラデーションをつけるとおしゃれでスタイリッシュな印象を与えることができますね。

円形にする

きれいに丸の形をしたボタンです。

コードは以下の通りです。

<a href="#btn">ボタン</a>
#btn {
  width: 50px;
  height: 50px;
  text-align: center;
  padding: 50px;
  line-height: 50px;
  background-color: PaleTurquoise;
  display: block;
  text-decoration: none;
  color: black;
  border-radius: 50%;
}

円をつくる場合は、まず、円のheight(高さ)とwidth(横幅)を同じにします。

次に、border-radiusを50%に指定します。これで完成です。

ポップな印象や、ふわっとした柔らかさを表現したい場合は、円形にするのもいいですね。

まとめ

いかがでしたでしょうか。

ボタンのつくり方と、デザインについて理解が深まったのではないでしょうか。

ボタンをつくる際は、ユーザーが使いやすいように設計する事が良いでしょう。

今回の知識をもとに、ぜひ実践してみてください。