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

后端未结

关注

 22  798

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 c

相关标签:

22条回答

被撕碎了的回忆

2020-11-22 14:54
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
日久生厌

2020-11-22 14:55
How about using asp:LinkButton?

You can do that - I made a linkbutton look like a standard button, using TStamper's entry. Underlining showed under the text when I hovered, though, in spite of the text-decoration: none setting.

I was able to stop the hover-underlining by adding style="text-decoration: none" within the linkbutton:
```
<asp:LinkButton 
id="btnUpdate" 
CssClass="btnStyleTStamper" 
style="text-decoration: none" 
Text="Update Items"   
Onclick="UpdateGrid"  
runat="server"
/>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
温柔的废话

2020-11-22 14:56
The CSS3 appearance property provides a simple way to style any element (including an anchor) with a browser's built-in <button> styles:
```
a.btn {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}
```
```
<body>
  <a class="btn">CSS Button</a>
</body>
```
CSS Tricks has a nice outline with more details on this. Keep in mind that no version of Internet Explorer currently supports this according to caniuse.com.
0 讨论(0)
发布评论:

提交评论
- 加载中...

无人共我

2020-11-22 14:56

Use this class. It will make your link look the same as a button when applied using the button class on an a tag.

HERE IS ANOTHER DEMO JSFIDDLE

.button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    border: solid 1px #da7c0c;
    background: #478dad;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em;
    border-radius: .3em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
    background: -moz-linear-gradient(top,  #f88e11,  #f06015);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.button:active {
    position: relative;
    top: 1px;
}

0 讨论(0)

上一页 1 2 3 4