【HTML】buttonタグでリンクを貼る方法

#プログラミング勉強日記
2020年10月16日
HTMLでコードを書いてるときにbuttonタグでリンクを埋め込みたいと思ったのでその方法を備忘録としてまとめる。

#方法
　buttonタグはクリックできるボタンを作るもので、基本的な書き方は以下のようになる。

基本的な書き方

<button>表示させる内容</button>

　buttonタグを使ってリンクを貼る場合はonclick属性を以下のように追加する。

buttonタグでリンクを貼る方法

<button onclick="loction.href='リンク先のURL'">->location</button>

具体例

<button onclick="location.href='https://qiita.com/mzmz__02'">Qiita マイページ(buttonタグで)</button>

#他の方法でリンク先をbutton風にする

HTMLファイル

<a href="https://qiita.com/mzmz__02">Qiita マイページ(aタグで)</a>
<br><br>
<a class="button" href="https://qiita.com/mzmz__02">Qiita マイページ(aタグでスタイルを使って)</a>
<br><br>
<input type="button" onclick="location.href='https://qiita.com/mzmz__02'" value="Qiita マイページ(input buttonで)">
<br><br>
<button onclick="location.href='https://qiita.com/mzmz__02'">Qiita マイページ(buttonタグで)</button>

CSSファイル

.button {
  display: inline-block;
  border-style: solid;
  color: black;
  background-color: rgb(225, 224, 224);
  border-width:1px;
  border-color: darkgray;
  text-decoration: none;
}