HTMLにおける画面遷移の方法には、formタグを使うものとaタグの属性でhref=””を設定する方法があるが、用途の違いを調べました。

formタグを使う場合

<form action="http//yamamoto.arkoak.com" method="get">
  次のページ
</form>

このように記述することで、formタグでくくった中にあるinputタグの値を次のページに引き渡すことができます。また、method属性の値をpostに設定することで、URLに引き渡す値を表示させずに渡すことが可能です。

Aタグ（アンカータグ）を使う場合

<a href="http//yamamoto.arkoak.com">
  次のページ
</a>

アンカータグを使う場合このように記述します。値をリンク先に渡したい場合は、URLの最後に?a=1&b=100などと変数名と値を書くことで、formタグ同様に値を渡すことはできます。

ここで本題であるが、訳あってinputタグのsubmitを使わずにアンカータグにクラス設定をすることで、ボタンにリンクを貼らなくてはいけなくなりました。そのままアンカータグにクラスを指定すれば、同じようなボタンができると考えていたが、なかなか上手くいかなかったので、その解決手法を調べました。

・HTML

<a href="http//yamamoto.arkoak.com" class="btn-link">
  ページ先頭へ
</a>

・CSS

.btn-link {
  text-align: center;
  background: #ccc;
  border:2px solid #333;
  width: 120px;
  height: 50px;
  font-size: 18px;
  color: #000;
}

このようなスタイルシートで示したボタンにリンクを張りたい場合、アンカータグを使うと下のボタンのように下線が出てきたり、文字が上によってしまいます。下線はスタイルシートでtext-decorationプロパティにnoneを設定することで、解消されます。
ページ先頭へ

まず、paddingを使って余白を調節することを考えました。

  padding-top: 20px;

ページ先頭へ

一見上手く行ったように見えるが、ボタンが縦にのびてしまっています。どうすればいいか悩んだあげくマージンを負に設定して隙間を埋めることにしました。上下中央はとりあえずあきらめます。

.btn-link {
  display: block;
  text-decoration: none;
  padding-top: 20px;
  margin-top: -20px;
}

上手く表示されていないかも知れませんが、chromeではちゃんと表示されることを確認しました。とりあえず、このボタンで妥協します。