web-dev-qa-db-ja.com

リンクのように機能する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>
htmlbuttonhyperlinkanchorhtmlbutton
1615
Andrew

HTML

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

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

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

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

CSS

CSSが許可されている場合は、単に appearance プロパティを使用するボタンのようなスタイルの<a>を使用します（ 現在のところ（2015年7月）はまだ不十分 ）。

<a href="http://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ライブラリの中から一つを選んでください。

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

JavaScript

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

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

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

475
Adam

基本的な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） サンプルの外観：

Sample output of Boostrap v4 buttons

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

Sample output of Boostrap v3 buttons

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

Sample output of Boostrap v2 buttons

421
Bern

つかいます：

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

残念ながら、このマークアップはHTML 5では有効ではなくなったため、有効性が検証されることも、期待されるとおりに機能することもありません。別の方法を使用してください。

137
RedFilter

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

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

警告

  • <form>タグで囲む必要があります。
  • <button>タイプは「送信」（または未指定）にする必要があります。「button」タイプでは動作させることができませんでした。これにより、以下の点が明らかになります。
  • フォーム内のデフォルトのアクションをオーバーライドします。言い換えれば、あなたが他のフォームの中でこれをすると、それは衝突を引き起こすことになるでしょう。

参照： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction ブラウザのサポート： https：//developer.mozilla .org/ja-jp/docs/Web/HTML/Element/button＃ブラウザの互換性

110
EternalHour

それは実際には非常に単純で、フォーム要素を使用しません。 <a>タグの内側にボタンを付けて使用することができます。

このような：

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

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

48
Lucian Minea

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

<button type="reset" onclick="location.href='http://www.example.com'">
    www.example.com
</button>
36
saravanabawa
<form>
    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'"> 
</form>
25
ghoppe

単純に要素の周りにタグをつけることができます：

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

https://jsfiddle.net/hj6gob8b/ /

22
Uriahs Victor

この問題には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：アンカー（リンク）はボタンのようなスタイルです。

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

長所：

  1. シンプル（基本的な要件のために）そしてよいクロスブラウザサポート。
  2. 動作するのに<form>を必要としません。
  3. 動作するのにJavaScriptを必要としません。

短所：

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

結論

解決策＃1（ フォーム内のボタン ）は、最小限の作業でユーザーにとって最も透過的に見えるようです。レイアウトがこの選択に影響されず、サーバーサイドのTweakが実行可能な場合は、アクセシビリティが最優先事項である場合（エラーページ上のリンクやエラーメッセージなど）にはこれは良い選択肢です。

JavaScriptがあなたのアクセシビリティの要件を妨げないのであれば、解決策＃2（ JavaScript ）が＃1と＃3よりも好まれるでしょう。

何らかの理由でアクセシビリティが重要です（JavaScriptはオプションではありません）が、デザインやサーバー構成によってオプション＃1の使用が妨げられている状況では、ソリューション＃3（ アンカースタイル）ボタン ）は、ユーザビリティへの影響を最小限に抑えてこの問題を解決するための優れた選択肢です。

21
Nicolas Bouvrette

次のようなことをすることの欠点はありますか？

<a class='nostyle' href='http://www.google.com/'>
    <span class='button'>Schedule</span>
</a>

ここでa.nostyleはあなたのリンクスタイルを持つクラス（標準のリンクスタイルを取り除くことができる）で、span.buttonはあなたの "ボタン"（背景、境界線、グラデーションなど）のスタイルを持つクラスです。

18
MuffinTheMan

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

ボタンのように通常のリンクをスタイルすることを検討しましたか。あなたはそのようなやり方でOS特有のボタンを達成することはできませんが、それでもIMOの最善の方法です。

16
Pekka 웃

他の少数の人が追加したものと一緒に進むと、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>

それだ。それはとても簡単で、あなたが望むのと同じくらい創造的になれるようにします。あなたは色、大きさ、形（半径）などを制御します。詳しくは 私がこれを見つけた場所 をご覧ください。

15
artie

ボタンを参照タグの内側に配置しないでください。 

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

これは私には完璧に機能しているようで、リンクに％20タグを追加していません。説明するために、Googleへのリンクを使用しました。

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

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

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

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

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

..はフォルダを表し、ファイルを表します。親フォルダ内のサブディレクトリまたはファイルを示す

..パブリック
|||| ..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の末尾に特殊文字は含まれていません。これが役立つことを願っています。

注意：localhost：0000は明らかに0000ではありません。あなた自身のポート番号があるでしょう。 

さらにmain.html URLの最後の？_ijt = xxxxxxxxxxxxxxはあなた自身の接続によって決定されるので明らかに私のものと等しくないでしょう。


本当に基本的なことをいくつか述べているように思われるかもしれませんが、できる限り説明したいと思います。読んでくれてありがとう、そしてこれが少なくとも誰かに役立つことを願っています。ハッピープログラミング.

15
C.Gadd

@ Nicolas、あなたのものはtype="button"を持っていなかったので私のために働きました。必要なレイアウトを取得するためのボタンまたは<a>へのクラス：

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

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

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

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

CSSでは、スタイルは次のようになります。

.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;
}

ここに a jsFiddle を付けて、試してみてください。

この設定の利点： 1。 divラッパーを表示：ブロックにすると、中央揃え（マージン：0 autoを使用）と位置設定（<a>がインラインで位置合わせが困難で中央揃えが不可能）が簡単になります。

  1. <a> display：ブロックを作成し、移動してボタンのようにスタイルを設定するだけで、その中のテキストを垂直方向に揃えるのが難しくなります。

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

  3. Divに<a>を埋め込むと、テキストだけがクリック可能になり、この設定によってボタン全体がクリック可能になることがあります。

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

  5. ボタンのスタイルとテキストのスタイルを明確に区別することができます（長所はありますか？もちろん、CSSは見栄えが悪くなるため、分解するのがいいでしょう）。

それは間違いなく私の人生を可変サイズの画面用の携帯サイトのスタイリングをより簡単にしました。

13
MoMo

もう1つの選択肢は、ボタンにリンクを作成することです。

<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;}

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

12
lukeocom

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;
}
8
Maarek

たくさんの回答が寄せられていることを私は知っていますが、それらのどれも本当に問題を解決するようには見えませんでした。これが私の解決策です。

  1. OPが開始している<form method="get">メソッドを使用してください。これは本当にうまくいきますが、時々URLに?を追加します。 ?が主な問題です。
  2. ?がURLに追加されないように、jQuery/JavaScriptを使用してJavaScriptが有効になっているときにリンクをたどるようにします。 JavaScriptが有効になっていないごく一部のユーザーには、<form>メソッドにシームレスにフォールバックします。
  3. JavaScriptコードはイベントの委任を使用するので、<form>または<button>が存在する前にイベントリスナーを添付することができます。この例ではjQueryを使用しています。これは、迅速で簡単なためですが、 'Vanilla' 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
pseudosavant

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>

5
Anees Hameed

それをする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を使う form
  7. HTMLを使う anchor tag
<!-- 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>
3
Adnan Toky

ボタンも使えます。

たとえば、 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>
3
Elnaz

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

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

私が現在取り組んでいるウェブサイトのためにこれを使いました、そして、それは素晴らしい働きをします！あなたもクールなスタイリングをしたいなら、私はここに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'">

Working JSFiddle ここ .

2
Jasch1

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

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

</html>

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

1
Hayz

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

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

例：

<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用にはまだテストされていません。

1
Anders Martini

<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 Button Generator

そして、作成したCSSスタイルに基づいて名前が付けられたclassタグを使用してリンクを作成します。

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

これがいじめです。

JS Fiddle

1
Logan Wayne

ブラウザコンソールでwindow.locationと入力し、enterを押します。そうすれば、locationに含まれるものが明確にわかります

   hash: ""
   Host: "stackoverflow.com"
   hostname: "stackoverflow.com"
   href: "https://stackoverflow.com/questions/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>
0
Nasir Khan

あなたがそれがボタンのように見えるということであるならば、 グラデーション画像を強調して 、あなたはこれをすることができます：

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

あなたがあなたのウェブサイト内にあるページにリダイレクトしたいなら、それからここに私の方法があります - 私は属性 href をボタンに加えて、onclickが割り当てられた this.getAttribute（ 'href） '） document.location.hrefへ

** 'X-Frame-Options'から 'sameorigin'のためにドメインの外部のURLを参照しても機能しません。

サンプルコード

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

JavaScriptで

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

HTMLで

<button onclick="setLocation('/<whatever>')>GO</button>"
0
Joshua Michael Waggoner