添加链接到按钮 HTML答案

【问题标题】：Add link to button HTML添加链接到按钮 HTML
【发布时间】：2019-12-22 06:09:22
【问题描述】：

我正在尝试为我的按钮添加链接。

我当前的 HTML 代码如下

<td>
  <button style="background: url('images/button1.png') no-repeat; background-size:155px; left: 200px; width: 155px; height: 50px; border: 0;">Get Support</button>

  <td>
    <button style="background: url('images/button2.png') no-repeat; background-size:155px; left: 200px; width: 155px; height: 50px; border: 0;">Shop Bike</button>
  </td>
  <td>
    <button style="background: url('images/button2.png') no-repeat; background-size:155px; left: 200px; width: 155px; height: 50px; border: 200px;">Button Three</button>
  </td>

如何为每个按钮添加指向其他页面的链接例如...如果我点击：获取支持按钮，它会将我重定向到我已经创建的支持页面。

【问题讨论】：

标签： html css

【解决方案1】：

<a> 是用于创建链接的 HTML 元素，而不是 <button>，因此请使用带有 href 属性的 <a> 元素代替 <button>。

然后，您可以随意设置它的样式，使其看起来更像一个按钮（尽管我注意到您应用于 <button> 元素的大部分 CSS 都是为了使它看起来不像一个按钮。您可能需要对它做的唯一事情就是display: inline-block; text-decoration: none; color: black)。

【讨论】：

+1 如果 OP 想要与 <button> 相同的样式，也许您可以添加它可以使用 JavaScript 完成，或者添加带有 <input type="submit"> 的 <form action="link"> 标签。跨度>

【解决方案2】：

如果您愿意，可以使用此方法创建可链接按钮。

<form method="get" action="test.html">
    <input type="submit" value="Clickable Button">
</form>

这不是样式

【讨论】：

您似乎创建了一个新的 HTTP 方法！将方法更改为 GET，这是一个合理的答案
好吧，他确实提到了“html”并没有指定他是想使用 CSS 来设置样式还是使用 JavaScript 来触发它，所以这是一个简单的方法。不需要被动攻击性评论
我的意思是表单上的方法属性应该是 GET 或 POST，就像在 HTTP 方法中一样。 LINK 无效
我打错字了，抱歉，已修复
是的，我匆匆忙忙，在审查时简直发疯了......不过还是谢谢

【解决方案3】：

<a href="page.html"><button type="button" class="add your class">Link Name</button></a>

您可以使用 CSS 设置按钮的样式，使用图像按钮往往没有响应。

【讨论】：

【解决方案4】：

您应该使用<a></a> 标签：

<a href="support.html">Get support</a>

如果您想要<button></button> 标签的唯一原因是样式，您可以轻松设置<a></a> 标签的样式

a {
    display: inline-block;
    text-decoration: none;
    background-color: #eee;
    border: 2px outset #ccc;
    color: #000;
    padding: 5px 8px;
    margin: 5px;
}

如果你绝对想使用 <button></button> 标签，你可以使用 javascript 来做到这一点：

<button onclick="document.location.href='support.html';">Get support</button>

不过，请记住，使用按钮不是正确的代码，它们并非专用于链接

【讨论】：

【解决方案5】：

对链接使用 a 标签。例如：

<a href="/support">Get support</a>

另外，如果您使用的是 a 标签而不是按钮标签，请在 css 中添加 display:inline-block。

【讨论】：

【解决方案6】：

显然，您的按钮用于表格元素中，以组合预期的样式并使其充当链接，您可能希望将 [按钮] 包装为“锚”标签 () 内的 DIV。下面表示一个名为“bikes.html”的页面作为链接元素。

<td>
<a href="bikes.html">
<button style="background: url('images/button2.png') 
no-repeat;     background-size:155px; left: 200px; width: 155px; height: 50px; 
border: 0;">Shop Bike
</button>    
</a>
</td>

虽然有一些关于使用

【讨论】：

HTML 禁止 button 元素内的 a 元素。
很有趣，我对其进行了测试，尽管光标仍然是箭头，而不是指针，但它似乎确实可以工作，这就是我建议使用 div 的原因。那它实际上是“禁止”的呢？
感谢您的回答，我刚刚搜索了 HTML 规则，您可以将
很高兴认识佩斌。我因试图帮助这里的人而不断被扣分而感到恶心。似乎有这么多人很快降级，而 IMO 他们正在滥用权力。如果某人的回答是题外话或燃烧的仇恨是一回事，但因为技术问题而被赶走并不像堆栈精神那样让我感到震惊。我需要一些积极的观点！我查看了 w3 并在元素中找不到任何明确的禁止按钮元素，甚至在我的回答中建议这不是我对这个解决方案的偏好。
很抱歉您觉得反对票很苛刻，但它的标记无效：stackoverflow.com/a/6393863/2312574