style - html w3school button




如何創建一個像鏈接一樣的HTML按鈕? (18)

我想創建一個類似鏈接的HTML按鈕。 所以，當你點擊按鈕時，它會重定向到一個頁面。 我希望它盡可能地可以訪問。

我也喜歡它，所以URL中沒有任何額外的字符或參數。

我怎樣才能做到這一點？

根據迄今發布的答案，我目前正在這樣做： 

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

但問題在於，在Safari和Internet Explorer ，它在URL的末尾添加了一個問號字符。 我需要找到一個解決方案，不會在URL的末尾添加任何字符。

還有其他兩種解決方案可以做到這一點：使用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="http://google.com">
    <input type="submit" value="Go to Google" />
</form>

如有必要，請設置CSS display: inline; 在形式上保持與周圍文本的流動。 在上面的例子中，不是<input type="submit"> ，你也可以使用<button type="submit"> 。 唯一的區別是<button>元素允許孩子。

您可以直觀地預期能夠使用類似於<a>元素的<button href="http://google.com"> ，但不幸的是，根據HTML規範 ，該屬性不存在。

CSS

如果允許使用CSS，只需使用樣式為<a>外觀類似按鈕的appearance屬性（ 目前僅支持Internet Explorer（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" />

@尼古拉斯，下面為我工作，因為你沒有type="button"因為它開始表現為提交類型..因為我已經有一個提交type.it沒有為我工作....現在您可以將類添加到按鈕或<a>以獲取所需的佈局： 

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

Also you can use a button:

For example, in ASP.NET Core syntax : 

// 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>

If what you need is that it will look like a button, with emphasis on the gradient image , you can do this: 

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

你可以簡單地在元素周圍添加一個標籤： 

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

https://jsfiddle.net/hj6gob8b/

使用： 

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

不幸的是，這種標記在HTML5中不再有效，並且既不會驗證，也不會像預期的那樣工作。 使用另一種方​​法。

做到這一點的唯一方式（除了BalusC的巧妙形式的想法！）是通過添加JavaScript onclick事件到按鈕，這不利於可訪問性。

你有沒有考慮像一個按鈕樣式的正常鏈接？ 您無法以這種方式實現操作系統特定的按鈕，但它仍然是IMO的最佳方式。

另一種選擇是在按鈕中創建一個鏈接： 

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

我在這裡創建了一個演示 。

在<button></button>上使用<a></a>屬性回答的人很有幫助。

但是最近，我在<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小提琴

在button標籤內使用它作為data-href="index.html" 。

如果您想創建一個用於任何地方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;
}

如果您想避免使用表單或輸入，並且您正在尋找按鈕式鏈接，則可以使用div包裝器，錨點和h1標籤創建外觀漂亮的按鈕鏈接。 你可能會想要這個，所以你可以自由地在你的頁面上放置鏈接按鈕。 這對於水平居中按鈕和垂直居中的文本在其中很有用。 就是這樣：

您的按鈕將由三個嵌套部分組成：div封裝器，錨點和h1，如下所示： 

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

Here's有一個jsFiddle來檢查它並玩弄它。

此設置的好處：1.使div包裝顯示：塊可以很容易地居中（使用margin：0 auto）和位置（而<a>是內聯且難以定位且不可能居中）。

  1. 您可以製作<a> display：塊，將其移動，並將其設置為按鈕，但是垂直對齊文本內部的文字會變得很困難。

  2. 這使您可以製作<a> display：inline-table和<h1> display：table-cell，它允許您在<h1>上使用vertical-align：middle並垂直居中（這總是很棒一個按鈕）。 是的，你可以使用填充，但如果你想讓你的按鈕動態調整大小，那就不會那麼乾淨。

  3. 有時當你在div中嵌入<a>時，只有文本是可點擊的，這個設置使得整個按鈕可點擊。

  4. 如果您只是想轉到其他頁面，則不必處理表單。 表單用於輸入信息，它們應該保留。

  5. 允許你乾淨地將按鈕樣式和文本樣式彼此分開（伸展優勢？當然，但是CSS可能會變得很討厭，所以很好分解它）。

這絕對讓我的生活更輕鬆地為可變大小的屏幕設計一個移動網站。

從HTML5開始，按鈕支持formaction屬性。 最重要的是，不需要Javascript或詭計。 

<form>
  <button formaction="http://.com">Go to !</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#attr-formaction瀏覽器支持： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Browser_compatibility ： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Browser_compatibility

您也可以將按鈕的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>

這樣第一個按鈕重定向用戶，而第二個按鈕提交表單。

小心確保按鈕不會觸發任何操作，因為這會導致衝突。 正如Arius指出的那樣，根據標準，您應該意識到，出於上述原因，這並非嚴格地被認為是有效的HTML。 然而，它在Firefox和Chrome中仍然可以正常工作，但我還沒有針對Internet Explorer進行測試。

這實際上非常簡單，並且不使用任何表單元素。 你可以在裡面用一個按鈕來使用<a>標籤:)。

喜歡這個： 

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

它會將href加載到同一頁面。 想要一個新的頁面？ 只需使用target="_blank" 。

關於BalusC的回复 ， 

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

我需要添加變量到按鈕，並不知道如何。 我最終使用隱藏的輸入類型 。 我認為這可能有助於其他像我一樣發現此頁面的人。 

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

我將它用於我目前正在研究的網站，它效果很好！ 如果你想要一些很酷的樣式，我會把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;
}

here工作JSFiddle 

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



w3school   style   link   button連結   bootstrap   attribute   html   button   hyperlink   anchor   htmlbutton  


htmlbutton