[英]How do I create an HTML button that acts like a link?
如何創建一個像鏈接一樣的 HTML 按鈕？ 因此，單擊該按鈕會將用戶重定向到一個頁面。
我希望它易於訪問，並且在 URL 中具有最少的額外字符或參數。
純 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，只需使用一個<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;
}
或者從眾多 CSS 庫中選擇一個，比如Bootstrap 。
<a href="https://google.com" class="btn btn-primary">Go to Google</a>
如果允許使用 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"屬性很重要，因為它的缺失值默認是 Submit Button state 。
如果它是您在基本 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">
Bootstrap (v4)示例外觀：
Bootstrap (v3)示例外觀：
Bootstrap (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>類型必須是“提交”（或未指定） - 我無法使用“按鈕”類型來處理它。 這提出了以下觀點。參考： formaction
瀏覽器支持： <button>：Button 元素
它實際上非常簡單並且不使用任何表單元素。 您可以使用帶有按鈕的 <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>
這個問題似乎有三種解決方案（各有利弊）。
<form method="get" action="/page2">
<button type="submit">Continue</button>
</form>
但問題在於，在某些版本的流行瀏覽器（例如 Chrome、Safari 和 Internet Explorer）中，它會在 URL 末尾添加一個問號字符。 因此，換句話說，對於上面的代碼，您的 URL 最終將如下所示：
http://someserver/pages2?
有一種方法可以解決這個問題，但它需要服務器端配置。 使用Apache Mod_rewrite 的一個示例是重定向所有帶有尾隨? 到他們相應的 URL 沒有? . 下面是使用的.htaccess的例子，但有一個完整的線程在這里：
RewriteCond %{THE_REQUEST} \?\ HTTP [NC]
RewriteRule ^/?(index\.cfm)? /? [R=301,L]
類似的配置可能會因所使用的網絡服務器和堆棧而異。 所以總結一下這個方法：
優點：
缺點：
? 在某些瀏覽器中看起來很難看。 這可以通過使用 POST 而不是 GET 的 hack（在某些情況下）來修復，但干凈的方法是使用服務器端重定向。 服務器端重定向的缺點是，由於 304 重定向，它會導致對這些鏈接的額外 HTTP 調用。<form>元素您可以使用 JavaScript 觸發 onclick 和其他事件來模擬使用按鈕的鏈接的行為。 下面的示例可以改進並從 HTML 中刪除，但它只是為了說明這個想法：
<button onclick="window.location.href='/page2'">Continue</button>
優點：
缺點：
將鏈接設計成按鈕樣式相對容易，並且可以在不同瀏覽器中提供類似的體驗。 Bootstrap 可以做到這一點，但您也可以使用簡單的樣式輕松實現。
優點：
<form>即可工作。缺點：
keypress事件方面不一致。解決方案#1（表單中的按鈕）對於需要最少工作的用戶來說似乎是最透明的。 如果您的布局不受此選擇的影響並且服務器端調整是可行的，那么對於可訪問性是最優先考慮的情況（例如錯誤頁面上的鏈接或錯誤消息），這是一個不錯的選擇。
如果 JavaScript 不是您的可訪問性要求的障礙，那么解決方案 #2 ( JavaScript ) 將優於 #1 和 #3。
如果由於某種原因，可訪問性很重要（JavaScript 不是一個選項），但您的設計和/或服務器配置阻止您使用選項 #1，那么解決方案 #3（錨樣式類似於按鈕）是一個很好的替代方案，以最小的可用性影響解決這個問題。
只需將您的按鈕放在參考標簽內，例如，
<a href="https://www.google.com/"><button>Next</button></a>
這對我來說似乎很完美，並且不會在鏈接中添加任何 %20 標簽，就像你想要的那樣。 我使用了一個指向谷歌的鏈接來演示。
您當然可以將其包裝在表單標簽中，但這不是必需的。
鏈接另一個本地文件時，只需將其放在同一文件夾中並添加文件名作為引用。 或者如果 in 不在同一文件夾中，請指定文件的位置。
<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 末尾不包含特殊字符。
順便說一句 - （%20 表示 URL 中的一個空格，它編碼並插入它們的位置。）
注意： localhost:0000顯然不會是 0000。您將在那里擁有自己的端口號。
另外， main.html URL末尾的?_ijt=xxxxxxxxxxxxxxx ， x是你自己的連接決定的，所以顯然不會等於我的。
看起來我在陳述一些非常基本的觀點，但我只想盡可能地解釋。
如果您想避免使用表單或輸入，並且您正在尋找一個看起來像按鈕的鏈接，您可以使用一個 div 包裝器、一個錨點和一個h1標簽創建漂亮的按鈕鏈接。 您可能想要這樣，以便您可以在頁面周圍自由放置鏈接按鈕。 這對於水平居中的按鈕和其中有垂直居中的文本特別有用。 就是這樣：
您的按鈕將由三個嵌套部分組成：一個 div 包裝器、一個錨點和一個 h1，如下所示：
.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>
此設置的好處： 1. 使 div 包裝器 display: block 使其易於居中（使用 margin: 0 auto）和定位（而 <a> 是內聯的且難以定位且不可能居中）。
你可以讓 <a> 顯示：塊，移動它，並將它的樣式設置為按鈕，但是垂直對齊它內部的文本變得很困難。
這允許您制作 <a> display: inline-table 和 <h1> display: table-cell，這允許您在 <h1> 上使用 vertical-align: middle 並垂直居中（這總是很好一個按鈕）。 是的，您可以使用填充，但是如果您希望您的按鈕動態調整大小，那將不會那么干凈。
有時，當您在 div 中嵌入 <a> 時，只有文本可點擊，此設置使整個按鈕可點擊。
如果您只是想移動到另一個頁面，則不必處理表單。 表格是用來輸入信息的，應該為此保留。
允許您干凈地將按鈕樣式和文本樣式彼此分開（拉伸優勢？當然，但是 CSS 看起來很糟糕，所以分解它很好）。
它確實讓我的生活更輕松，為可變大小的屏幕設計移動網站。
您可以簡單地在元素周圍放置一個 a 標簽：
<a href="http://google.com" target="_blank">
<button>My Button</button>
</a>
進行以下操作是否有不利之處？
<a class='nostyle' href='http://www.google.com/'>
<span class='button'>Schedule</span>
</a>
其中a.nostyle是具有鏈接樣式（可以擺脫標准鏈接樣式）的類，而span.button是具有“按鈕”樣式（背景，邊框，漸變等）的類。 。
結合其他一些人添加的內容，您可以只使用一個簡單的 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>
這就對了。 這很容易做到，讓您隨心所欲地發揮創意。 您可以控制顏色、大小、形狀（半徑）等。有關更多詳細信息，請參閱我在 上找到的站點。
要做到這一點，唯一的方法（除了 BalusC 巧妙的表單創意！）是向按鈕添加 JavaScript onclick事件，這對可訪問性不利。
你有沒有考慮過像按鈕一樣設計一個普通的鏈接？ 您無法通過這種方式實現特定於操作系統的按鈕，但它仍然是 IMO 的最佳方式。
對於Nicolas 的回答，以下內容對我有用，因為該答案沒有type="button" ，因此它開始表現為提交類型......因為我已經有了一種提交類型。 它對我不起作用......現在您可以向按鈕或<a>添加一個類以獲得所需的布局：
<a href="http://www.google.com/">
<button type="button">Click here</button>
</a>
七種方法來做到這一點：
window.location.href = 'URL'window.location.replace('URL')window.location = 'URL'window.open('URL')window.location.assign('URL') <!-- 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>
如果您想創建一個用於任何地方的 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;
}
我知道已經提交了很多答案，但似乎沒有一個能真正解決問題。 這是我對解決方案的看法：
<form method="get">方法。 這非常有效，但有時會附加一個? 到網址。 ? 是主要問題。? 到 URL 的末尾。? 最終不會附加到 URL。 對於極少數未啟用 JavaScript 的用戶，它將無縫回退到<form>方法。<form>或<button>甚至存在之前附加事件偵聽器。 我在這個例子中使用了 jQuery，因為它既快速又簡單，但它也可以在“vanilla”JavaScript 中完成。<form> action屬性中給出的鏈接。 // Listen for any clicks on an element in the document with the `link` class $(document).on('click', '.link', function(e) { // Prevent the default action (eg 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>
對於 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>
使用<a>標簽和適當的 css 創建按鈕
.abutton { background: #bada55; padding: 5px; border-radius: 5px; transition: 1s; text-decoration: none; color: black; } .abutton:hover { background: #2a2; }
<a href="https://example.com" class="abutton">Continue</a>
使用<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 Button Generator
然后使用以您創建的 CSS 樣式命名的class標記創建您的鏈接：
<a href='link.php' class='btn-style'>Link</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>
我將它用於我目前正在開發的網站，效果很好！ 如果你也想要一些很酷的樣式，我會把 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>
這樣第一個按鈕重定向用戶，而第二個按鈕提交表單。
小心確保按鈕不會觸發任何操作，因為這會導致沖突。 同樣正如Arius 指出的那樣，您應該意識到，由於上述原因，根據標准，嚴格來說這並不是有效的 HTML。 然而，它確實在 Firefox 和 Chrome 中按預期工作，但我尚未針對 Internet Explorer 對其進行測試。
bootstrap 方法也適用於 bulma。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css"> <a href="https://www.stackoverflow.com" class="button is-primary">Stack Overflow</a>
這里沒有一個解決方案對我有用，所以在嘗試了所有這些之后，我最終得到了一些微不足道的東西：僅 HTML（沒有提交表單），沒有 CSS，沒有 JS：
<a href="/link"><button>Link</button></a>
您可以使用 JavaScript：
<html> <button onclick='window.location = "http://www.google.com"'> Google </button> </html>
將http://www.google.com替換為您的網站，並確保在 URL 前包含http:// 。
在 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: "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>
如果您使用的是 CSS 庫或主題，只需將按鈕的類應用到錨點/鏈接標簽即可。
下面是一個帶有One UI的示例：
<a class="btn-block-option" href="">
<i class="si si-reload"></i>
</a>
HTML 答案：如果您想創建一個像鏈接一樣的 HTML 按鈕，請為其使用兩個常用屬性： <a>和/或action="" ：
<form action="stackoverflow.com"/>
<button type="submit" value="Submit Form"
或者...
“href”是<a>屬性的一部分。 它有助於直接鏈接：
<a href="stackoverflow.com">Href</a>
我想創建一個像鏈接一樣的 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>
如果要重定向到網站中的頁面，則這是我的方法-我將屬性href添加到了按鈕，然后onclick將this.getAttribute（'href'）分配給document.location.href
**如果您由於“ X-Frame-Options”到“ sameorigin”而引用域外的網址，則無法使用。
樣例代碼：
<button onclick="document.location.href=this.getAttribute('href');" href="/">Home</button>
如果您想創建一個用作鏈接的按鈕，有多種方法可以做到這一點。 選擇最適合您情況的一種。 下面的代碼在按鈕內創建一個鏈接。
<button> <a href="www.google.com">Go to Google</a> </button>
第二種方式是點擊按鈕時打開一個新窗口
<button onclick="open('www.google.com')">Google</button>
或者添加事件監聽器
document.querySelector("#btn").addEventListener('click', open('www.google.com'))
<button id="btn">Go to Google</button>
有很多方法可以做到這一點，但這只是充當鏈接的按鈕的三個小例子。 換句話說，就是打開鏈接的按鈕。
好的，最簡單的方法是
<button><a href="add here the link"> text for button</a></button>
最簡單的方法：
<button>
<a href=" link "> text that will be pressed </a>
</button>
這對你有用
<button><a href=" "></a></button>
您可以使用<a>標記並在樣式display:block或display: inline-block
<a href="https://www.google.com" style="display:block;align:left; text-decoration:none; font-family:helvetica; color:#203140; background-color:#F37056; border:2px solid #F37056; border-radius:5px; font-size:15px; line-height:1; font-weight:700; text-align:center; text-transform:uppercase; padding:10px 12px; margin:20px 0 0 0; width:312px"> SUBSCRIBE </a>
創建一個充當鏈接的按鈕是 HTML 設計師需要考慮的一項要求。 最被接受的答案使用表單內的按鈕，不幸的是，它有時只是在當前 window 內加載新鏈接 -如果這是在 email 中，情況很糟糕。
其他人提出 JS、Bootstraps、CSS Styles 等可能不可用或不允許。 假設像email 中的鏈接這樣的用例來確認它，並且您沒有經過徹底設計的基於 html 的 email 模板。 您可以簡單地使用鏈接，但添加一些內聯樣式，如下所示：
$htmlLink = 'https://stackoverflow.com/questions/2906582/';
"<a target='_blank' href='". $htmlLink ."' style='color: purple; font-size: 24px; font-weight: bold; border:2px purple solid; text-decoration: none;'>View This Answer</a>"
引號已經設置好，如果要在 email 標記中作為一行放置，則可以在兩端用點(.)連接起來。 這只會使文本變大並在其周圍加上邊框； 不是很好，但保證不會如前所述加載頁面。 在解析文本和變量時假設 Php。
最簡單的方法是創建一個超鏈接：
<a href="https://google.com">Test</a>
然后添加按鈕元素：
<button><a href="https://google.com">Test</a></button>
大功告成！ 我建議你在開始之前參加 HTML 課程
如何創建一個 HTML 按鈕，它的作用類似於指向同一頁面上的項目的鏈接？
[英]How to create an HTML button that acts like a link to an item on the same page?
當在html中按下按鈕時，如何創建一個重定向到鏈接的下拉列表？
[英]How do I create a drop down list that redirects to a link when a button is pressed in html?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.