リンクのように機能するHTMLボタンを作成する方法は？

リンクのように機能するHTMLボタンを作成したいと思います。したがって、ボタンをクリックすると、ページにリダイレクトされます。できるだけアクセスしやすいようにしたいと思います。

また、URLに余分な文字やパラメータが含まれないようにしたいと考えています。

どうすればこれを達成できますか？

これまでに投稿された回答に基づいて、私は現在これを行っています：

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

しかし、これの問題は、SafariとInternet Explorerでは、URLの末尾に疑問符文字が追加されることです。URLの末尾に文字を追加しないソリューションを見つける必要があります。

これを行うには他に2つの解決策があります。JavaScriptを使用するか、リンクをボタンのようにスタイリングします。

JavaScriptの使用：

<button onclick="window.location.href='/page2'">Continue</button>

ただし、これには明らかにJavaScriptが必要です。そのため、スクリーンリーダーからのアクセスは困難です。リンクのポイントは、別のページに移動することです。したがって、ボタンをリンクのように振る舞うことは、間違った解決策です。私の提案は、リンクを使用して、ボタンのように見えるようにスタイルを設定することです。

<a href="/link/to/page2">Continue</a>

HTML

プレーンHTMLの方法は<form>、action属性に目的のターゲットURLを指定するに配置することです。

<form action="https://google.com">
    <input type="submit" value="Go to Google" />
</form>

必要に応じて、CSS display: inline;をフォームに設定して、周囲のテキストとともにフロー内に保持します。<input type="submit">上記の例の代わりに、を使用することもできます<button type="submit">。唯一の違いは、<button>要素が子を許可することです。

要素<button href="https://google.com">と同様に使用できると直感的に期待できます<a>が、残念ながらできません。この属性はHTML仕様に従って存在しません。

CSS

CSSが許可されている場合は<a>、appearanceプロパティを使用してボタンのように見えるスタイルを使用します（これはInternet Explorerではサポートされていません）。

<a href="https://google.com" class="button">Go to Google</a>

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

または、Bootstrapのような多くのCSSライブラリの1つを選択します。

<a href="https://google.com" class="btn btn-primary">Go to Google</a>

JavaScript

JavaScriptが許可されてwindow.location.hrefいる場合は、を設定します。

<input type="button" onclick="location.href='https://google.com';" value="Go to Google" />

<input type="button">上記の例の代わりに、を使用することもできます<button>。唯一の違いは、<button>要素が子を許可することです。

<button onclick="location.href='http://www.example.com'" type="button">
         www.example.com</button>

欠落している値のデフォルトは[送信ボタンの状態]type="button"であるため、属性は重要です。

基本的なHTMLアンカータグで探しているボタンの外観である場合は、Twitter Bootstrapフレームワークを使用して、次の一般的なHTMLタイプのリンク/ボタンをボタンとして表示するようにフォーマットできます。フレームワークのバージョン2、3、または4の視覚的な違いに注意してください。

<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

ブートストラップ（v4）サンプルの外観：

ブートストラップ（v3）サンプルの外観：

ブートストラップ（v2）サンプルの外観：

使用する：

<a href="http://www.stackoverflow.com/">
    <button>Click me</button>
</a>

残念ながら、このマークアップはHTML5ではもはや有効ではなく、検証も常に期待どおりに機能することもありません。別のアプローチを使用してください。

HTML5以降、ボタンはこのformaction属性をサポートしています。何よりも、Javascriptやトリックは必要ありません。

<form>
  <button formaction="http://stackoverflow.com">Go to Stack Overflow!</button>
</form>

注意事項

• <form>タグで囲む必要があります。
• <button>タイプは「送信」（または指定されていない）である必要があります。タイプ「ボタン」で機能させることができませんでした。これは以下のポイントをもたらします。
• フォームのデフォルトのアクションをオーバーライドします。つまり、別のフォーム内でこれを行うと、競合が発生します。

リファレンス：https : //developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction ブラウザーサポート：https : //developer.mozilla.org/en-US/docs/Web/ HTML / Element / button＃Browser_compatibility

実際には非常にシンプルで、フォーム要素を使用していません。内側のボタンで<a>タグを使用するだけです:)。

このような：

<a href="http://www.google.com" target="_parent"><button>Click me !</button></a>

そして、同じページにhrefをロードします。新しいページが欲しいですか？だけを使用してくださいtarget="_blank"。

編集する

数年後、私のソリューションはまだ機能していますが、多くのCSSを使用して好きなように表示できることに注意してください。これはただの速い方法でした。

内部フォームを使用している場合は、ボタンの要素とともにtype = "reset"属性を追加します。フォームアクションを防止します。

<button type="reset" onclick="location.href='http://www.example.com'">
    www.example.com
</button>

<form>
    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'"> 
</form>

この問題には3つの解決策があるようです（すべて長所と短所があります）。

解決策1：フォームのボタン。

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

しかし、この問題は、Chrome、Safari、Internet Explorerなどの一般的なブラウザの一部のバージョンでは、URLの末尾に疑問符文字が追加されることです。つまり、上のコードの場合、URLは次のようになります。

http://someserver/pages2?

これを修正する方法は1つありますが、サーバー側の構成が必要になります。Apache Mod_rewriteの使用例の1つは、末尾のあるすべてのリクエストを、?なしで対応するURLにリダイレクトすること?です。これは.htaccessの使用例ですが、ここには完全なスレッドがあります。

RewriteCond %{THE_REQUEST} \?\ HTTP [NC]
RewriteRule ^/?(index\.cfm)? /? [R=301,L]

同様の構成は、使用するWebサーバーとスタックによって異なります。このアプローチの要約：

長所：

1. これは実際のボタンであり、意味的には意味があります。
2. これは実際のボタンなので、実際のボタンのように動作します（たとえば、ドラッグ可能な動作やアクティブなときにスペースバーを押すときのクリックを模倣します）。
3. JavaScript、複雑なスタイルは必要ありません。

短所：

1. ?一部のブラウザでは、末尾が醜く見えます。これは、GETの代わりにPOSTを使用して（場合によっては）ハックすることで修正できますが、クリーンな方法はサーバー側のリダイレクトを使用することです。サーバー側リダイレクトの欠点は、304リダイレクトが原因で、これらのリンクに対して追加のHTTP呼び出しが発生することです。
2. <form>要素を追加します
3. 複数のフォームを使用する場合の要素の配置は扱いにくい場合があり、レスポンシブデザインを扱う場合はさらに悪化します。要素の順序によっては、このソリューションでは一部のレイアウトが実現できなくなる場合があります。デザインがこの課題の影響を受ける場合、これはユーザビリティに影響を与える可能性があります。

解決策2：JavaScriptを使用する。

JavaScriptを使用してonclickおよびその他のイベントをトリガーし、ボタンを使用してリンクの動作を模倣できます。以下の例は、HTMLから改善および削除することができますが、単にアイデアを説明するためにあります。

<button onclick="window.location.href='/page2'">Continue</button>

長所：

1. シンプル（基本的な要件の場合）で、追加のフォームを必要とせずにセマンティックを維持します。
2. これは実際のボタンなので、実際のボタンのように動作します（たとえば、ドラッグ可能な動作やアクティブなときにスペースバーを押すときのクリックを模倣します）。

短所：

1. アクセシビリティが低いことを意味するJavaScriptが必要です。これは、リンクなどの基本（コア）要素には理想的ではありません。

解決策3：ボタンのようなスタイルのアンカー（リンク）。

リンクをボタンのようにスタイリングすることは比較的簡単で、さまざまなブラウザーで同様のエクスペリエンスを提供できます。ブートストラップはこれを行いますが、シンプルなスタイルを使用して自分で達成することも簡単です。

長所：

1. シンプル（基本的な要件）であり、クロスブラウザーのサポートが良好です。
2. <form>動作する必要はありません。
3. 動作にJavaScriptは必要ありません。

短所：

1. ボタンのように機能するリンクではなく、リンクのように機能するボタンが必要なため、セマンティックはちょっと壊れています。
2. ソリューション＃1のすべての動作を再現するわけではありません。ボタンと同じ動作はサポートされません。たとえば、リンクはドラッグしたときの反応が異なります。また、「スペースバー」リンクトリガーは、追加のJavaScriptコードがないと機能しません。ブラウザはkeypressボタンのイベントをどのようにサポートするかについて一貫性がないため、これは多くの複雑さを追加します。

結論

ソリューション＃1（フォーム内のボタン）は、最小限の作業でユーザーにとって最も透過的に見えます。レイアウトがこの選択の影響を受けず、サーバー側の調整が可能である場合、これはアクセシビリティが最優先事項である場合（たとえば、エラーページまたはエラーメッセージのリンク）に適したオプションです。

JavaScriptがアクセシビリティ要件の障害にならない場合は、ソリューション＃2（JavaScript）が＃1および＃3よりも優先されます。

何らかの理由でアクセシビリティが不可欠である（JavaScriptはオプションではない）が、設計やサーバー構成によりオプション＃1の使用が妨げられている状況にある場合は、ソリューション＃3（ボタンのようなスタイルのアンカー）ユーザビリティへの影響を最小限に抑えてこの問題を解決する優れた代替手段です。

なぜボタンを参照タグの中に配置しないのですか？

<a href="https://www.google.com/"><button>Next</button></a>

これは私にとっては完璧に機能するようで、リンクに％20タグを追加しません。私は実証するためにグーグルへのリンクを使用しました。

もちろん、これをformタグでラップすることもできますが、必須ではありません。

別のローカルファイルをリンクする場合は、同じフォルダーに配置し、参照としてファイル名を追加します。または、同じフォルダーにない場合は、ファイルの場所を指定します。

<a href="myOtherFile"><button>Next</button></a>

これによってURLの末尾に文字が追加されることはありませんが、ファイル名で終わる前に、URLとしてファイルプロジェクトパスが含まれます。例えば

私のプロジェクト構造が...

..はフォルダを示します-4つのファイルを示します| 親フォルダ内のサブディレクトリまたはファイルを示します

..public
|||| ..html
|||| |||| -main.html
|||| |||| -secondary.html

main.htmlを開くと、URLは次のようになります。

http://localhost:0000/public/html/main.html?_ijt=i7ms4v9oa7blahblahblah

しかし、main.html内のボタンをクリックしてsecondary.htmlに変更すると、URLは次のようになります。

http://localhost:0000/public/html/secondary.html 

URLの末尾に特殊文字は含まれていません。これがお役に立てば幸いです。ちなみに-（％20は、エンコードされ、URLの代わりに挿入されたURLのスペースを示します。）

注：localhost：0000は明らかに0000ではなく、独自のポート番号を持っています。

さらに、main.html URLの最後の？_ijt = xxxxxxxxxxxxxx、xは独自の接続によって決定されるため、明らかに私のものとは異なります。

本当に基本的なことを言っているように見えるかもしれませんが、できるだけ説明したいだけです。読んでいただきありがとうございます。これが少なくとも誰かに役立つことを願っています。幸せなプログラミング。

要素の周りにタグを置くだけです：

<a href="http://google.com" target="_blank">
<button>My Button</button>
</a>

https://jsfiddle.net/hj6gob8b/

これを行う唯一の方法（BalusCの独創的なフォームのアイデアを除いて！）はonclick、ボタンにJavaScript イベントを追加することです。これは、アクセシビリティには適していません。

通常のリンクをボタンのようにスタイリングすることを検討しましたか？そのようにOS固有のボタンを実現することはできませんが、それでもIMOの最良の方法です。

他のいくつかの人が追加したものに合わせて、PHPもjQueryコードもなく、単純なHTMLとCSSだけの単純なCSSクラスを使用するだけで、思い切って行動できます。

CSSクラスを作成し、アンカーに追加します。コードは以下のとおりです。

.button-link {
    height:60px;
    padding: 10px 15px;
    background: #4479BA;
    color: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-link:hover {
    background: #356094;
    border: solid 1px #2A4E77;
    text-decoration: none;
}

<HTML>
    <a class="button-link" href="http://www.go-some-where.com"
       target="_blank">Press Here to Go</a>

それだ。それはとても簡単で、好きなだけクリエイティブにできます。あなたは色、サイズ、形（半径）などを制御します。詳細については、私がこれを見つけたサイトを参照してください。

フォームや入力を使用する必要がなく、ボタンのようなリンクを探している場合は、divラッパー、アンカー、h1タグを使用して見栄えの良いボタンのリンクを作成できます。リンクボタンをページの周りに自由に配置できるように、これが必要になる可能性があります。これは、ボタンを水平方向に中央揃えし、その中にテキストを垂直方向中央揃えにする場合に特に便利です。方法は次のとおりです。

ボタンは次のように、divラッパー、アンカー、h1の3つのネストされた部分で構成されます。

.link-button-wrapper {
    width: 200px;
    height: 40px;
    box-shadow: inset 0px 1px 0px 0px #ffffff;
    border-radius: 4px;
    background-color: #097BC0;
    box-shadow: 0px 2px 4px gray;
    display: block;
    border:1px solid #094BC0;
}
.link-button-wrapper > a {
    display: inline-table;
    cursor: pointer;
    text-decoration: none;
    height: 100%;
    width:100%;
}
.link-button-wrapper > a > h1 {
    margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
    color: #f7f8f8;
    font-size: 18px;
    font-family: cabinregular;
    text-align: center;
}

<div class="link-button-wrapper">
    <a href="your/link/here">
        <h1>Button!</h1>
    </a>
</div>

ここだjsFiddleはそれをチェックアウトし、それで遊んします。

この設定の利点：1. divラッパーを表示する：ブロックを作成すると、中央揃え（マージン：0 autoを使用）と配置（<a>がインラインで配置が難しく、中央揃えができない場合）が容易になります。

2. <a>のdisplay：blockを作成して移動し、ボタンとしてスタイル設定することもできますが、その中のテキストを垂直方向に揃えるのは難しくなります。

3. これにより、<a> display：inline-tableと<h1> display：table-cellを作成できます。これにより、<h1>でvertical-align：middleを使用して垂直方向に中央揃えにできます（これは常に便利です）ボタン）。はい、パディングを使用できますが、ボタンのサイズを動的に変更したい場合は、それほどきれいではありません。

4. <a>をdiv内に埋め込むと、テキストのみがクリック可能になる場合があります。この設定により、ボタン全体がクリック可能になります。

5. 別のページに移動しようとしているだけであれば、フォームを処理する必要はありません。フォームは情報を入力するためのものであり、そのために予約しておく必要があります。

6. ボタンのスタイルとテキストのスタイルを明確に分離できます（ストレッチの利点はありますか？確かに、CSSは見栄えが悪いので、分解すると便利です）。

それは間違いなく私の人生を可変サイズのスクリーンのためにモバイルウェブサイトをスタイリングすることを容易にしました。

type="button"@Nicolas 、次のように機能しました。送信タイプとして動作するようになったため、あなたにはありませんでした。すでに1つの送信タイプがあるためです。ボタンまたは<a>必要なレイアウトを取得するには：

<a href="http://www.google.com/">
    <button type="button">Click here</button>
</a>

別のオプションは、ボタンにリンクを作成することです：

<button type="button"><a href="yourlink.com">Link link</a></button>

次に、CSSを使用してリンクとボタンのスタイルを設定し、リンクがボタン内のスペース全体を占めるようにします（ユーザーが誤ってクリックしないようにします）。

button, button a{position:relative;}
button a{top:0;left:0;bottom:0;right:0;}

ここでデモを作成しました。

どこでもURLに使用されるボタンを作成する場合は、アンカーのボタンクラスを作成します。

a.button {
    background-color: #999999;
    color: #FFFFFF !important;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    padding: 5px 8px;
    text-align: center;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.button:hover {
    text-decoration: none;
}

多くの回答が寄せられていることは承知していますが、どれも実際に問題を解決しているようには見えませんでした。これが私の解決策です：

1. <form method="get">OPの開始方法を使用します。これは非常にうまく機能?しますが、URLにa が追加されることがあります。?主な問題です。
2. JavaScriptが有効になっているときにjQuery / JavaScriptを使用して次のリンクを実行?し、URLに追加されないようにします。<form>JavaScriptを有効にしていないユーザーのごく一部に対して、シームレスにメソッドにフォールバックします。
3. JavaScriptコードはイベント委譲を使用するため、イベントリスナーをの前<form>または<button>存在する前にアタッチできます。この例では、jQueryを使用しています。これは迅速で簡単ですが、「バニラ」JavaScriptでも実行できます。
4. JavaScriptコードは、デフォルトのアクションの発生を防止し、<form> action属性で指定されたリンクをたどります。

JSBinの例（コードスニペットがリンクを追跡できない）

// Listen for any clicks on an element in the document with the `link` class
$(document).on('click', '.link', function(e) {
    // Prevent the default action (e.g. submit the form)
    e.preventDefault();

    // Get the URL specified in the form
    var url = e.target.parentElement.action;
    window.location = url;
});

<!DOCTYPE html>
<html>

    <head>
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <meta charset="utf-8">
        <title>Form buttons as links</title>
    </head>

    <body>
        <!-- Set `action` to the URL you want the button to go to -->
        <form method="get" action="http://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link">
            <!-- Add the class `link` to the button for the event listener -->
            <button type="submit" class="link">Link</button>
        </form>
    </body>

</html>

それを行う7つの方法：

1. 使用する window.location.href = 'URL'
2. 使用する window.location.replace('URL')
3. 使用する window.location = 'URL'
4. 使用する window.open('URL')
5. 使用する window.location.assign('URL')
6. HTML フォームの使用
7. HTML アンカータグの使用

<!-- Using window.location.href = 'URL' -->
<button onclick='window.location.href = "https://stackoverflow.com"'>
  Click Me
</button>

<!-- Using window.location.replace('URL') -->
<button onclick='window.location.replace("https://stackoverflow.com")'>
  Click Me
</button>

<!-- Using window.location = 'URL' -->
<button onclick='window.location = "https://stackoverflow.com"'>
  Click Me
</button>

<!-- Using window.open('URL') -->
<button onclick='window.open("https://stackoverflow.com","_self","","")'>
  Click Me
</button>

<!-- Using window.location.assign('URL') -->
<button onclick='window.location.assign("http://www.stackoverflow.com")'>
  Click Me
</button>

<!-- Using HTML form -->
<form action='https://stackoverflow.com' method='get'>
  <input type='submit' value='Click Me'/>
</form>

<!-- Using HTML anchor tag -->
<a href='https://stackoverflow.com'>
  <button>Click Me</button>
</a>

HTML 5とスタイル付きボタンと画像の背景

<a id="Navigate" href="http://www.google.com">
  <input 
    type="button"
    id="NavigateButton"
    style="
      background-image: url(http://cdn3.blogsdna.com/wp-content/uploads/2010/03/Windows-Phone-7-Series-Icons-Pack.png);
      background-repeat: no-repeat;
      background-position: -272px -112px;
      cursor:pointer;
      height: 40px;
      width: 40px;
      border-radius: 26px;
      border-style: solid;
      border-color:#000;
      border-width: 3px;" title="Navigate"
    />
</a>

また、ボタンを使用することもできます：

たとえば、ASP.NET Core構文では次のようになります。

// Some other tags
 <form method="post">
      <input asp-for="YourModelPropertyOrYourMethodInputName"
      value="@TheValue" type="hidden" />
      <button type="submit" class="link-button" formaction="/TheDestinationController/TheDestinationActionMethod">
      @(TextValue)
      </button>
  </form>
// Other tags...


<style>
       .link-button {
        background: none !important;
        border: none;
        padding: 0 !important;
        color: #20a8d8;
        cursor: pointer;
    }
</style>

SSL証明書を使用している場合

<a href="https://www.google.com" target="_blank"><button>Click me !</button></a>

の<a></a>属性を使用して回答した人<button></button>は役に立ちました。

しかし、最近、内でリンクを使用したときに問題が発生しました<form></form>。

ボタンは送信ボタン（HTML5）のように見なされます。私は回避策を試してみましたが、この方法を見つけました。

以下のようなCSSスタイルボタンを作成します。

.btn-style{
    border : solid 1px #0088cc;
    border-radius : 6px;
    moz-border-radius : 6px;
    -webkit-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    -moz-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    font-size : 18px;
    color : #696869;
    padding : 1px 17px;
    background : #eeeeee;
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(49%,#eeeeee), color-stop(72%,#cccccc), color-stop(100%,#eeeeee));
    background : -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -webkit-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -o-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -ms-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );

}

または、ここで新しいものを作成します：CSSボタンジェネレーター

次に、作成したCSSスタイルにちなんだ名前のクラスタグを使用してリンクを作成します。

<a href='link.php' class='btn-style'>Link</a>

ここにフィドルがあります：

JSフィドル

私が現在取り組んでいるWebサイトにこれを使用しましたが、うまく機能します！。クールなスタイリングも必要な場合は、CSSをここに配置します。

input[type="submit"] {
  background-color: white;
  width: 200px;
  border: 3px solid #c9c9c9;
  font-size: 24pt;
  margin: 5px;
  color: #969696;
}

input[type="submit"]:hover {
  color: white;
  background-color: #969696;
  transition: color 0.2s 0.05s ease;
  transition: background-color 0.2s 0.05s ease;
  cursor: pointer;
}

<input type="submit" name="submit" onClick="window.location= 'http://example.com'">

ここで JSFiddleを動作させます。

ボタンtype-propertyを「ボタン」に設定して（フォームを送信しないようにする）、リンク内にネストすることもできます（ユーザーをリダイレクトします）。

これにより、必要に応じて、フォームを送信する同じフォームに別のボタンを配置できます。また、フォームのメソッドとアクションをリンクに設定するよりも、これがほとんどの場合に望ましいと思います（検索フォームである場合を除いて...）

例：

<form method="POST" action="/SomePath">
  <input type="text" name="somefield" />
  <a href="www.target.com"><button type="button">Go to Target!</button></a>
  <button type="submit">submit form</button>
</form>

このようにして、最初のボタンはユーザーをリダイレクトし、2番目のボタンはフォームを送信します。

競合が発生するため、ボタンがアクションをトリガーしないように注意してください。また、Ariusが指摘したように、標準によれば、上記の理由から、これは厳密には有効なHTMLとは見なされないことに注意してください。ただし、FirefoxとChromeでは期待どおりに機能しますが、まだInternet Explorerでテストしていません。

あなたはjavascriptを使うことができます：

<html>
<button onclick='window.location = "http://www.google.com"'>
            Google
        </button>

</html>

http://www.google.comあなたのウェブサイトに置き換えてhttp://、URLの前に必ず含めてください。

JavaScriptで

setLocation(base: string) {
  window.location.href = base;
}

HTMLで

<button onclick="setLocation('/<whatever>')>GO</button>"

ブラウザコンソールに入力window.locationして押しenterます。次に、何locationが含まれているのか明確なアイデアを得ることができます

   hash: ""
   host: "stackoverflow.com"
   hostname: "stackoverflow.com"
   href: "/programming/2906582/how-to-create-an-html-button- 
   that-acts-like-a-link"
   origin: "https://stackoverflow.com"
   pathname: "/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link"
   port: ""
   protocol: "https:"

ここから任意の値を設定できます。

したがって、別のページをリダイレクトhrefするには、リンクに値を設定できます。

   window.location.href = your link

あなたの場合-

   <button onclick="window.location.href='www.google.com'">Google</button>

グラデーション画像に重点を置いてボタンのように見えることが必要な場合は、次のようにすることができます。

<a href="www.yourlink.com" class="btn btn-gradient"><i class="fa fa-home"> Button Text</i></a>

あなたのウェブサイト内にあるページにリダイレクトしたい場合は、ここに私のメソッドがあります-私はボタンに属性hrefを追加し、onclickはthis.getAttribute（ 'href'）をdocument.location.hrefに割り当てました

** 'X-Frame-Options'が 'sameorigin'であるため、ドメインのサイト外のURLを参照する場合は機能しません。

サンプルコード：

<button onclick="document.location.href=this.getAttribute('href');" href="/">Home</button>