我被要求让网络上的地址链接看起来像默认按钮。我对 CSS 不是很熟悉。有没有人试过这个？我只是希望它们看起来像普通的普通按钮，带有渐变和类似的东西。我需要在它周围使用 a 吗？
【问题讨论】：
<a> 元素吗？
标签： css
这是 Google Chrome 中选项页面中按钮的 CSS。他们使用button 标签，但我只是用a 标签替换它，它也可以工作。这仅适用于 webkit 浏览器，但它应该很容易找到其他浏览器的相应/替代声明。有关演示，请参阅此 fiddle。
HTML
<a>Click me</a>
CSS
a {
-webkit-border-radius: 2px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-user-select: none;
background: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
border: 1px solid #aaa;
color: #444;
font-size: inherit;
margin-bottom: 0px;
min-width: 4em;
padding: 3px 12px 3px 12px;
font-family: sans-serif;
}
a:hover {
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
background: #ebebeb -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);
border-color: #999;
color: #222;
}
a:active {
-webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
background: #ebebeb -webkit-linear-gradient(#f4f4f4, #efefef 40%, #dcdcdc);
color: #333;
}
【讨论】：
如果您使用图片，它将看起来像那张图片。按钮在操作系统和浏览器的每种组合中看起来都不同，因此选择固定的按钮图像可能会使用户感到困惑。
我认为更好的解决方案是插入链接并将其显示为链接，或者应用最小的样式以使其具有按钮外观。 然后，使用 Javascript/JQuery 真正插入一个按钮而不是链接，并为其分配一个 onclick 事件，使其行为类似于链接。
这样，您将拥有一个真正的按钮，其行为类似于按钮，并且看起来就像当前浏览器中的按钮。如果用户没有 Javascript（这也适用于爬虫），他们仍然可以使用该链接，您可以在任何地方设置样式，从完全没有到类似漂亮的按钮。
【讨论】：
您必须做的第一件事是给它一个 display: block 或 inline-block 属性，以便它可以采用您希望它拥有的所有边距/填充设置。然后，您可能想看看这个很棒的 css3 样式应用程序：
【讨论】：
我不明白您为什么要尝试使用 CSS。您可以插入图片（类似于按钮）并使用 HTML 标记在其中创建链接。 如果您不熟悉 CSS 或 HTML 标签，可以使用 www.w3schools.com。该站点对于创建网站非常有用。 我希望我能解决你的问题。
【讨论】：
<html>
<head>
<style type="text/css">
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<a href="default.asp" target="_blank">This is a link</a>
</body>
</html>
【讨论】：