style - html w3school button




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

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

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

我怎樣才能做到這一點?

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

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

但問題在於,在SafariInternet 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-formactionhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction瀏覽器支持: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Browser_compatibilityhttps://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>




htmlbutton