我正在使用ASP.NET,我的一些按钮只是重定向.我宁愿他们是普通的链接,但我不希望我的用户注意到外观上的差异.我认为用锚点包装的图像,即标签,但我不想每次更改按钮上的文本时都要启动图像编辑器.
TSt*_*per 201
将此课程应用于此课程
.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>gua*_*ome 123
我觉得这很愚蠢,我将发布这个古老的问题.
为什么不在按钮元素周围包装锚标记.
<a href="somepage.html"><button type="button">Text of Some Page</button></a>
阅读完这篇文章并尝试接受的答案而没有我想要的预期结果,我尝试了上述内容并得到了我想要的内容.
这仅适用于IE9 +,Chrome,Safari,Firefox和Opera.
Rau*_*una 34
恕我直言,有一个更好,更优雅的解决方案.如果您的链接是这样的:
<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元素,因此它可以在所有浏览器中使用而无需更改任何内容.此外,如果您的按钮有样式,此解决方案将免费为您的新按钮应用相同的样式.
Kev*_*ary 25
CSS3 appearance属性提供了一种使用浏览器内置样式设置任何元素(包括锚点)样式的简单方法<button>:
a.btn {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
}<body>
<a class="btn">CSS Button</a>
</body>CSS Tricks有一个很好的大纲,有关于此的更多细节.请记住,根据caniuse.com,目前没有任何版本的Internet Explorer支持此功能.
Óla*_*age 21
a {
display: block;
height: 20px;
width: auto;
border: 1px solid #000;
}
<a>如果你给它们块显示,你可以使用这样的标签.您可以调整边框以产生类似阴影效果和该按钮的背景颜色感觉:)
rup*_*ray 17
如果你想要带圆角的漂亮按钮,那么使用这个类:
.link_button {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: solid 1px #20538D;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
background: #4479BA;
color: #FFF;
padding: 8px 12px;
text-decoration: none;
}<a href="#" class="link_button">Example</a>超文本标记语言
<a class="btn">Button</a>
CSS
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;