如何让HTML链接看起来像一个按钮？

2018-05-31 04:04:37

我使用ASP.NET，我的一些按钮只是重定向。我宁愿他们是普通的链接，但我不希望我的用户注意到外观上的很多不同。我考虑了由锚点（即标签）包裹的图像，但我不想每次更改按钮上的文本时都必须启动图像编辑器。

将这个类应用到它

.button {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}

<a href="#" class="button">Example</a>

尽管我认为这是愚蠢的，但我会发布这个古老的问题。

为什么不只是围绕一个按钮元素包装一个锚标签。

<a href="somepage.html"><button type="button">Text of Some Page</button></a>

在阅读这篇文章并尝试接受的答案没有我期待的结果时，我尝试了上面的内容，得到了我想要的结果。

注意

这只适用于IE9 +，Chrome，Safari，Firefox和Opera。

恕我直言，有一个更好，更优雅的解决方案。如果你的链接是这样的：

<a href="http://www.example.com">Click me!!!</a>

相应的按钮应该是这样的：

<form method="GET" action="http://www.example.com">
<input type="submit" value="Click me!!!">
</form>

这种方法更简单，因为它使用简单的html元素，所以它可以在所有浏览器中工作而不会改变任何东西。此外，如果您的按钮具有样式，则此解决方案将免费为您的新按钮应用相同的样式。

链接地址: http://www.djcxy.com/p/6215.html

上一篇: How do I make an html link look like a button?

下一篇: Embed PDF in HTML