Question

我被要求让网页上的地址链接看起来像默认按钮。我对CSS不太熟悉。有没人试过这个？我只是希望它们看起来像普通的普通按钮，有渐变和类似的东西。我需要在周围使用吗？

Answer 1

以下是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;
}

Answer 2

如果您使用图片，它将看起来像那张图片。操作系统和浏览器的每种组合中的按钮看起来都不同，因此选择固定按钮图像可能会使用户感到困惑。

我认为更好的解决方案是插入链接并将其显示为链接，或应用最小样式来为其提供按钮外观。然后，使用Javascript / JQuery来真正插入按钮而不是链接，并为其分配一个onclick事件，使其行为类似于链接。

这样，您将拥有一个真实的按钮，其行为类似于按钮，看起来像当前浏览器中的按钮。如果用户没有Javascript（也适用于抓取工具），他们仍然可以使用链接，您可以在任何地方设置样式，从非完全按钮到非常类似按钮。

Answer 3

你需要做的第一件事是给它一个display：block或inline-block属性，这样它就可以获取你想要的所有margin / padding设置。然后，您可能想要查看这个令人敬畏的css3样式应用程序：

http://www.css3.me/

Answer 4

我不明白你为什么要用CSS做这个。你可以插入一张图片（类似于按钮）并在其HTML标签中创建一个链接。如果您不熟悉CSS或HTML标记，可以使用www.w3schools.com。该网站对于创建网站非常有用。我希望我能解决你的问题。

Answer 5

<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>

如何设置地址链接的样式，使其看起来像一个带CSS的输入按钮

5 个答案: