Question

可能重复：
How do I make an html link look like a button?

我环顾四周。找到一些链接到非常多彩的按钮，看起来根本不像按钮:-)

有没有人有他们找到或想出的一些CSS可以帮助我使我的链接看起来像我在表单中使用“提交”类型按钮时看到的“真实”按钮。

我不介意CSS是否使用图形背景。只是寻找尽可能接近模拟按钮的东西。我也可以在我的页面上使用jQuery。

非常感谢

Answer 1

例如：

a {
    background:#eee;
    text-decoration:none;
    color:#333;
    font-family:Arial, sans-serif;
    font-size:11px;
    font-weight:bold;
    padding:3px 5px;
    border:1px solid #aaa;
    border-radius:3px;
    cursor:default;
}

a:hover {
    background-color:#f2f2f2;
    border-color:#888;
    box-shadow:0 0 2px #ccc;
}

a:active {
    vertical-align:-1px;
}

现场演示： http://jsfiddle.net/QTRpb/1/show/

Answer 2

在webkit和gecko中，有-webkit-appearance和-moz-appearance属性可以执行您想要的操作。我不确定是否支持其他浏览器 - 您需要检查。这是一个演示：

http://jsfiddle.net/kZ2WE/2/

在CSS3 there is a standard property appearance，但是，截至2013年6月，任何浏览器都不支持。

专有扩展程序适用于Chrome，Safari（webkit）和Firefox（mozilla）。完全不支持它，也不支持IE中的IE浏览器。

Answer 3

您可以使用按钮代替锚元素。不要将按钮放在表单中，单击时页面不会更改。为按钮提供唯一ID，并将jquery附加事件处理程序添加到打开新网页的按钮单击事件。

$(document).ready(function(){
    $("#mybutton").click(function(){
        window.open("mypage.html");
    });
});

Answer 4

这可能对您有用：22 CSS Button Styling Tutorials and Techniques。

Answer 5

尝试以下链接中的简要教程，它显示了如何使用按钮作为超链接。不确定如果你在同一页面上加载了这些表格会发生什么呢！

http://www.htmlgoodies.com/tutorials/buttons/article.php/3478871/So-You-Want-A-Link-Button-Huh.htm

Answer 6

来自Zurb的

Super Awesome Buttons。需要一些CSS3

Answer 7

你看起来有多难？我用Google搜索了

“如何使用css制作按钮”

并获得了很好的链接。

我过去使用的是：

http://www.thesitewizard.com/css/3d-buttons.shtml

http://www.brainjar.com/dhtml/menubar/

如果你谷歌“css按钮生成器”你也会得到有趣的网站：

http://www.iwebtoolsonline.com/html-and-css-rounded-corner-button-generator

http://css-tricks.com/examples/ButtonMaker/

寻找一些CSS，使我的链接看起来像按钮

7 个答案: