HTMLとCSSによるボタン作成の方法|buttonタグやsubmit、linkでの作り方も

「ボタンってどうやってつくるの?」
「どうやったらいいボタンができるの?」

Webサイトでも、スマートフォンアプリでもよく見かけるボタンは、簡単に作成が可能です。そのため、制作に慣れた人も、「ボタン」について更に学ぶ知識はあるのかと思うのですが、答えは「あります」。学習を始めたばかりの人は尚更知っておいて欲しい知識です。

Webやアプリ制作では、難易度の高い技術の習得に目が行き、改めて、「ボタン」の作り方を詳しく調べたりしません。なんとなくわかっている、それがボタン機能なのです。実は、状況に応じてボタンの使い方は変えます。今回は、情報を整理し、ボタンについての正しい知識を提供します。学び出したばかりの人は、制作に役立つ「気づき」を得られるはずです。逆に、既に何度もWeb制作やアプリ制作で繰り返し作っている中級者、上級者には向かない記事です。

【初心者向け】CSS(スタイルシート)の書き方を丁寧に解説



ボタンの種類

ボタンはいろいろな場面で見ます。ボタンタグを使ったり、CSSの装飾でボタンの作成もできます。

【別のページへ飛ぶ用のボタン】

【ログイン/新規登録用のボタン】

フォームのボタンは、上記のボタンとは違っています。それを押せば、入力情報をが別のファイルに渡されます。つまり、そのための処理をボタンに施します。これが他のボタンとの違いです。

【フォーム用ボタン】

全て同じように見えるボタンですが、作り方は大きく3つに分けられます。

使う場面 使い方
CSSで作成する一般的なボタン 「ベージネーション」、「特定のページ」への移動ボタン、元の画面に「戻る」ボタンなどに使う。 class=”btn btn-defaultなどclass名とCSS、aタグを組み合わせてボタンを作成
ボタンタグを使う一般的ボタン 「ベージネーション」、「特定のページ」への移動ボタン、元の画面に「戻る」ボタンなどに使う。 button type=”button”など専用タグを用いて作成
form内のボタン 「ログイン」、「新規登録」、「フォーム内容の送信」など入力情報のデータを別ファイルに送る場合に専用ボタンを作成する。 input type=”submit”
button type=”submit”を用いて作成

HTMLとCSSで作るボタンの作り方

では、まず簡単なボタンを作ってみましょう。便利なボタンタグがありますが、ここでは一旦使わずに作ります。以下のようにコードを書いてみましょう。
ボタンを押すことでなんらかのアクションに繋がります。以下ではボタンを押すことで別のページ移動するように、「aタグ」の中に書きます。

<a href="/contact.html" class="btn">これはボタンです。</a>

CSSでは次のように設定しましょう。

.btn{
  border: 1px solid green;
  border-radius: 5px;
  background-color: green;
  padding: 20px;
  text-align: center;
  color: white;
  width: 150px;
}

すると、以下のように表示されます。ボタンの表示としてはなんら問題ありません。ただ、インライン要素なので、制限が出てきます。幅の設定はできますが、marginでの高さの設定などはできませんので、それを設定したければ、「div」タグで囲んで、別途の設定が必要です。

中に、アイコン表示もできます。

<a href="/contact.html" class="btn">これはボタンです。<i class="fas fa-angle-right"></i></a>

これで、ボタンはタグを使わなくても、容易に作ることができることが分かったと思います。

divタグやaタグでボタンを作る場合の注意点

この場合、注意点があります。つまり、作成自体はできますが、音声を読み取るブラウザはそれをボタンとは認識してくれません。aタグで作った場合は、「リンク」として認識されます。そこで、ボタンとして認識されたいのであれば、以下のように「role=”button”」を入れる必要があります。

<a href="/contact.html" class="btn" role="button">これはボタンです。<i class="fas fa-angle-right"></i></a>

ボタンを作成する場合は、やはり専用のボタンタグで作った方が無難です。

ボタンタグを用いたボタンの作成

HTMLにはボタンを表示させる「ボタンタグ」が用意されています。一般的にはCSSによる装飾でデザインするよりも、こちらを使うケースが多いです。ボタンタグには開始タグと終了タグの二つがあるので、忘れないでください。

<button>これはボタンです。</button>

これだけで、ボタンとして表示がされます。

もちろん、これだけではデザインも不十分ですので、CSSでの設定が必要です。ボタンタグにtype属性「button」とclassを設定し、CSSを設定します。

<button type="button" class="btn" autofocus="true">これはボタンです。</button>
.btn{
  border-radius: 5px;
  background-color: green;
  padding: 20px;
  text-align: center;
  color: white;
}

以下のように表示されますね。以前CSSで書いたコードよりも少なくなりましたね。また、「autofocus属性」が効いて、フォーカス表示もされています。更に、もっといい利点があります。

例えば、「height」や「margin」を指定してください。わかりやすいように、「height」は100pxと指定しています。

.btn{
  border-radius: 5px;
  background-color: green;
  padding: 20px;
  text-align: center;
  color: white;
  height: 100px;
  margin: 50px;
}

すると、ブロック要素として認識され、高さやmarginの設定が一気にできるようになりました。aタグでボタンを作った場合は、divタグで囲む必要がありましたが、今はその必要がありません。

さて、リンクを設定したい場合は、ボタンタグの中に設定すればよいのでしょうか?以下のようなコードを作りましょう。

<button class="btn" type="button"><a href="index.html">これはボタンです。</a></button>

結果は、文字をクリックすればページは移動しますが、ボタンのクリックで移動はしません。そもそもですが、このボタンタグは、「a要素を子孫にすることはできない」仕様となっています。そこで、ボタン内で「onclick属性」を利用した便利な方法を次に説明します。

Jsと一緒にbuttonタグを使う場合

さて、form以外の、ページ移動用に使うボタンですが、簡単なJavascript構文と一緒に使うことで便利な機能ができてしまいます。Javascriptと聞いて、拒否感を覚えた人もいるかもしれませんが、基本的にはコピー&ペーストで簡単に設置できる機能を紹介します。

リンクボタンの設置

まず、タグ内に「onclick」を設定し、その中に「location.href」を設定してください。この「href」にパスを設定します。さて、この「onclick」ですが、Javascript構文の一つで、ボタンがクリックされた後の処理を設定できます。

<button class="btn" type="button" onclick="location.href='移動先のファイルのパスを書く'">これはボタンです。</button>

変わらず、ボタンが表示され、設定するページに移動できることがわかります。

「戻る」ボタンの設置

例えば、予約機能をつける時、なんらかの情報を入力した時、「確認ボタン」以外にも前のページに「戻る」ボタンを設定したい時があります。もちろん、前のページのパスを書けばそれで解決なのですが、毎回設定するのは手間がかかります。

そこで、以下の構文を「onclick」内に入れてください。

<button class="btn" type="button" onclick="history.back()">これはボタンです。</button>

これで、自動的に前のページに戻るようになりました。

フォーム内に設置するボタン

これは、お問い合わせフォームやログインボタンを想定して作りますが、以下の2つの理解が必要となります。つまり、フォーム内で使うボタンは決まっており、以下二つです。結論から言えば、どちらもフォーム内で使えますが、CSSでの使い勝手が良い分、後者の「button type=”submit”」がよいでしょう。

  • input type=”submit”
  • button type=”submit”

input type=”submit”

この場合、以下のように「input要素」を使います。この場合は、終了タグを用いず、value属性を使って、文字を表示させることができます。

<form action="./mailbox/post.cgi" method="post">
  <input type="submit" value="送信">
</form>

以下のように、デフォルトのボタンは非常に簡素なものです。

この場合は、クラス名を振り、そのクラス名によってCSSでボタンのデザインを行うことで、「送信ボタン」や「リセット」ボタン(この場合は、「submit」を「reset」へ変更する)を作成します。

.btn{
  display: inline-block;
  border-radius: 5px;
  background-color: green;
  padding: 10px;
  text-align: center;
  color: white;
  width: 80px;
}

以下のように表示されます。

input要素とアイコンを組み合わせてボタンを作る。

さて、この場合、例えば、送信やリセットボタンにアイコンを入れたいというニーズにどう応えればよいのでしょうか?実は、これは非常に面倒なのです。結論としては、現在では、このようなニーズがあることからフォーム内では「buttonタグ」を使う方が一般的です。

ただ、一旦は、「input type=”submit”」でアイコン表示の方法をお伝えします。htmlを以下のように書き換えてください。アイコンは任意のものを使っています。ポイントは、「input要素」の部分を隠し、アイコン表示だけを行っている点です。
Font Awesome

<label>
  <!-- この部分を表示させる -->
  <span class="filelabel" title="送信">
     <i class="fab fa-adn"></i>送信
  </span>
  <!-- この部分は表示上から隠す -->
  <input type="submit" id="send">
</label>

次に、CSSで以下を以下のように設定します。

.filelabel {
   display: inline-block;
   border: 1px solid green;
   background-color: green;
   color: white;
   border-radius: 5px;
   padding: 15px;
}
#send {
   display: none;
}

以下のように、アイコンと文字が表示されました。

フォーム内でbuttonタグでボタンを作る。

input要素とアイコンを組み合わせてボタンを作る方法が少し難しい、という人は迷わず、「button type=”submit”」を使ってください。非常にシンプルに上記と同じ効果が出せます。

<button type="submit" class="btn">
 <i class="fab fa-adn"></i>送信
</button>
.btn{
  display: inline-block;
  border-radius: 5px;
  background-color: green;
  padding: 15px;
  text-align: center;
  color: white;
  width: 100px;
  font-size: 15px;
}

結果は同じですが、こちらの方がコードが非常にシンプルです。

さて、「input type=”submit”」の大きな違いの一つとして、inputは:before:afterといった擬似要素が使えないですが、buttonはそれらが使えるので、CSSで比較的自由な表現ができるという点です。例えば、以下のようなCSSを書いてみましょう。

  <button type="submit" class="btn">送信</button>

以下、CSSですが、擬似要素を使っています。

.btn{
  position: relative;
  display: inline-block;
  border-radius: 5px;
  background-color: green;
  padding: 15px;
  text-align: center;
  color: white;
  width: 100px;
  font-size: 15px;
}
.btn:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 6px;
  height: 6px;
  margin: -4px 0 0 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

すると、擬似要素が表示されました。このようなこともボタンタグは可能となります。CSSでの装飾を考えた場合は、「button type=”submit”」の方が都合がよいことは知っておいてください。

うまくいかないときは…

思ったようにいかないときは、無料でエンジニアに質問ができるteratail(テラテイル)を利用しましょう。Yahoo!知恵袋のように気軽に質問でき、多くの過去質問も見ることができるので基本的なことであればこちらのサイトだけで解決します。

公式サイト:https://teratail.com

まとめ

簡単に作成できる「ボタン」だからこそ、理解が浅くなりがちになります。ボタンを作成する場合は、buttonタグを使う方が良いでしょう。また、フォーム内での「input type=”submit”」と「button type=”submit”」の違いなどは普段気にすることも少なく、この機会に理解しておきましょう。

【コピペ改変OK】CSSだけで作れるボタンデザイン10選









この記事をかいた人

田中 陽介

ベトナムで起業し、HR関連のコンサルティング業務をやっています。日本を離れて8年が経ちますが、日本ではあり得ないハプニングを楽しんでいます。最近はRuby on RailsでWebサービスを作っています。