寻找一些能让我的链接看起来像按钮的 CSS [重复]答案

【问题标题】：Looking for some CSS that will make my links look like buttons [duplicate]寻找一些能让我的链接看起来像按钮的 CSS [重复]
【发布时间】：2011-09-27 08:09:07
【问题描述】：

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

我在网上四处张望。找到了一些链接到非常彩色的按钮，这些按钮看起来根本不像按钮 :-)

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

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

非常感谢

【问题讨论】：

你为什么不直接使用一个实际的按钮？
我同意 CrazyJugglerDrummer 的观点，只需使用普通的buttons。如果它必须看起来像一个按钮，它可能应该是一个按钮，而不是一个链接。

标签： html css

【解决方案1】：

在 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)。 Opera 的 IE 和 IE 都不支持它。

【讨论】：

谢谢。我肯定会为这两个浏览器使用这些。为我节省了很多工作。

【解决方案2】：

你看起来有多努力？我用谷歌搜索了

"如何使用 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/

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

Super Awesome Buttons 来自 Zurb。需要一些 CSS3

【讨论】：

【解决方案5】：

例如：

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/

【讨论】：

【解决方案6】：

试试下面链接中的简短教程，它展示了如何使用按钮作为超链接。如果您在同一页面上加载这些表单，不确定所有这些表单会发生什么！

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

【讨论】：

请不要这样做。这在语义上很可怕。

【解决方案7】：

也许这对你有用：22 CSS Button Styling Tutorials and Techniques。

【讨论】：