我被要求使网络上的地址链接看起来像默认按钮。我对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;
}

关于css - 如何设置地址链接的样式,使其看起来像CSS的输入按钮,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/6087854/

10-12 12:40
查看更多