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