如何让我的网页按钮看起来像facebook按钮？

Question

有人可以在这里分享一个脚本，让我的网页按钮看起来像Facebook的那些，或者至少在某种程度上。提前致谢。我很想知道这一点，因为在css的帮助下，这已经有7天了，但没有成功。请帮我。

Answer 1

我建议使用Chrome开发工具或Firefox开发工具等工具，只需检查您想要模仿的样式按钮。 我刚刚在Facebook上找到了一个按钮，似乎他们正在使用带有此样式表的标签容器：

webkit-box-shadow: rgba(0, 0, 0, 0.046875) 0px 1px 0px 0px;
background-attachment: scroll;
background-clip: border-box;
background-color: #DDD;
background-image: none;
background-origin: padding-box;
border-bottom-color: #999;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: #999;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #999;
border-right-style: solid;
border-right-width: 1px;
border-top-color: #999;
border-top-style: solid;
border-top-width: 1px;
color: #666;
cursor: pointer;
direction: ltr;
display: inline-block;
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
font-size: 11px;
font-weight: bold;
height: 16px;
line-height: normal;
margin-bottom: 5px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-y: visible;
padding-bottom: 2px;
padding-left: 6px;
padding-right: 6px;
padding-top: 2px;
text-align: center;
text-decoration: none;
unicode-bidi: normal;
vertical-align: top;
white-space: nowrap;
width: 67px;

看看那些有用的插件可以告诉你如何制作他们的CSS。

干杯！

Answer 2

您需要做的就是使用CSS为按钮指定一些样式。 为了给按钮指定样式，需要将一些样式设置为INPUT [type =“submit”]。这是一个例子：

INPUT[type="submit"]
 {
     */ put your styles here */
 }

Answer 3

欢迎阿米特，

我同意蒂姆的观点，如果不知道你的代码就很难帮助你。不过，如果您想向其他网站学习，您可能还需要查看Firebug。它是firefox的插件，可以帮助您分析几乎任何给定的非Flash网站的代码。 安装它并右键单击并选择inspect元素。

如果你使用谷歌浏览器，就可以在盒子外面使用这样的功能，就像brafales所说的那样。 但是，我发现Firebug更舒适一些，特别是对新手来说。

您可以通过浏览任何网站和在线编辑来学到很多东西。您将立即看到结果，并能够分辨出不同的CSS样式。

Answer 4

对于完整的跨浏览器解决方案，你可以通过这种方式使用css sprites来实现这一点（我现在有紫色精灵图像：D）：

精灵图像（浅色渐变）：

标记

<input value="Share" type="button" />
<br /><br />
<input value="Comment" type="button" />

CSS

input[type="button"]{
    background: url(spriteImgUrl) repeat-x scroll;
    padding: 6px 10px;
    color:#FFFFFF;
    padding:4px 6px;
    font-size:12px;
    font-weight:bold;
    border:1px solid #3D197C;
    cursor:pointer;
}
input[type="button"]:hover{
    background-position: 0 -48px;
}
input[type="button"]:active{
    background-position: 0 -96px;
}

小提琴：http://www.jsfiddle.net/steweb/WxCmB/