如何使按钮看起来像一个链接?

我需要使一个按钮看起来像一个链接使用CSS。更改已经完成，但当我点击它时，它显示的就像在按钮中被按下一样。有什么想法如何删除，以便按钮作为一个链接，即使点击?

当前回答

尝试使用CSS伪类:focus

input[type="button"], input[type="button"]:focus {
  /* your style goes here */
}

编辑链接和onclick事件使用(你不应该使用内联javascript事件处理程序，但为了简单起见，我将在这里使用它们):

<a href="some/page.php" title="perform some js action" onclick="callFunction(this.href);return false;">watch and learn</a>

用这个。Href甚至可以在函数中访问链接的目标。返回false只会阻止浏览器在单击该链接时跟踪该链接。

如果javascript被禁用，链接将像正常链接一样工作，只需加载一些/page.php -如果你想让你的链接在js被禁用时失效，请使用href="#"

其他回答

我认为这很容易做到，只需要几行。这是我的解决方案

.buttonToLink { 背景:无; 边界:没有; 颜色:红色｝ .buttonToLink:{徘徊背景:无; 文字修饰:下划线; ｝ <button class="buttonToLink">一个简单的链接按钮</button>

尝试使用CSS伪类:focus

input[type="button"], input[type="button"]:focus {
  /* your style goes here */
}

编辑链接和onclick事件使用(你不应该使用内联javascript事件处理程序，但为了简单起见，我将在这里使用它们):

<a href="some/page.php" title="perform some js action" onclick="callFunction(this.href);return false;">watch and learn</a>

用这个。Href甚至可以在函数中访问链接的目标。返回false只会阻止浏览器在单击该链接时跟踪该链接。

如果javascript被禁用，链接将像正常链接一样工作，只需加载一些/page.php -如果你想让你的链接在js被禁用时失效，请使用href="#"

 button {
  text-decoration: underline;
  cursor: pointer;
  }

 <button onClick="javascript:window.location.href='link'">Domain</button>

您不能在整个浏览器中可靠地将按钮样式设置为链接。我试过了，但在某些浏览器中总是有一些奇怪的填充、空白或字体问题。要么让按钮看起来像一个按钮，要么在链接上使用onClick和preventDefault。

按钮{ 背景:没有!重要; 边界:没有; 填充:0 !重要; / *可选* / 字体:arial, sans-serif; /*输入有OS特定的字体-family*/ 颜色:# 069; 文字修饰:下划线; 光标:指针; ｝ <button>你的按钮看起来像一个链接

推荐文章