How do I make an html link look like a button?

2018-05-31 04:04:38

I'm using ASP.NET, some of my buttons just do redirects. I'd rather they were ordinary links, but I don't want my users to notice much difference in the appearance. I considered images wrapped by anchors, ie tags, but I don't want to have to fire up an image editor every time I change the text on a button.

将这个类应用到它

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

As silly as I think this is I'm going to post this ancient question.

Why not just wrap an anchor tag around a button element.

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

After reading this post and trying the accepted answer without the desired result I was looking for, I tried the above and got exactly what I wanted.

NOTE

This will only work for IE9+, Chrome, Safari, Firefox, and probably Opera.

IMHO, there is a better and more elegant solution. If your link is this:

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

The corresponding button should be this:

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

This approach is simpler because it uses simple html elements, so it will work in all the browsers without changing anything. Moreover, if you have styles for your buttons, this solution will apply the same styles to your new button for free.

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

上一篇: IE9 window.location.href错误

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