如何建立充當連接的HTML按鈕？

時間 2019-12-18

標籤如何建立充當連接 html 按鈕欄目 HTML 简体版

原文原文鏈接

我想建立一個相似於連接的HTML按鈕。所以，當您單擊按鈕時，它將重定向到頁面。我但願它儘量地易於訪問。 css

我也但願這樣作，所以URL中沒有任何多餘的字符或參數。 html

我該如何實現？ css3

根據到目前爲止發佈的答案，我目前正在這樣作： web

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

但這是在Safari和Internet Explorer中，它在URL的末尾添加了問號字符。我須要找到一種不會在URL末尾添加任何字符的解決方案。 bootstrap

還有其餘兩種解決方案：使用JavaScript或設置連接的樣式以使其看起來像按鈕。框架

使用JavaScript： post

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

但這顯然須要JavaScript，所以，屏幕閱讀器沒法訪問它。連接的重點是轉到另外一個頁面。所以，試圖使按鈕像連接同樣工做是錯誤的解決方案。個人建議是，您應該使用連接並設置其樣式以使其看起來像一個按鈕。網站

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

#1樓

若是這是您在基本HTML錨標記中尋找的按鈕的外觀，則可使用Twitter Bootstrap框架格式化如下任何常見的HTML類型連接/按鈕，使其顯示爲按鈕。請注意該框架的版本二、3或4之間的視覺差別： google

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

Bootstrap（v4）示例外觀： url

Bootstrap（v3）示例外觀：

Bootstrap（v2）示例外觀：

#2樓

進行如下操做是否有不利之處？

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

其中a.nostyle是具備連接樣式（能夠擺脫標準連接樣式）的類，而span.button是具備「按鈕」樣式（背景，邊框，漸變等）的類。。

#3樓

若是要在任何地方建立用於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;
}

#4樓

再加上其餘一些功能，只需使用一個簡單的CSS類（沒有PHP，沒有jQuery代碼，只有簡單的HTML和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>

這就對了。這很容易作到，而且可讓您發揮本身的創造力。您能夠控制顏色，大小，形狀（半徑）等。有關更多詳細信息，請參見我在上找到的網站。

#5樓

另外一個選擇是在按鈕中建立一個連接：

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

我在這裏建立了一個演示。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。