带有 CSS 的 Facebook 样式按钮 [关闭]答案

【问题标题】：Facebook Style Buttons with CSS [closed]带有 CSS 的 Facebook 样式按钮 [关闭]
【发布时间】：2011-09-12 22:07:50
【问题描述】：

我有一个网站，我希望使用 Facebook 样式的按钮来增强，但我不想使用标签来这样做。如果我可以使用 CSS 来设置按钮样式，这样我就可以得到 Facebook 样式按钮的结果。如果需要，愿意使用 Javascript。谁能帮帮我？

【问题讨论】：

这是一个非常糟糕的问题。你想创建什么样的按钮——Facebook 可嵌入的“喜欢”按钮，还是 Facebook 网站本身的那种？
这是我整理的一个基本示例。虽然图像不会在 JSfiddle 中加载，但在实际页面上时可以使用。 jsfiddle.net/wfkPm

标签： css facebook button styling

【解决方案1】：

使用边框、小填充和box-shadow: inset 属性真的很容易。有一个JSFiddle demonstrating this here。这不会像 Facebook 那样使用额外的 divs，尽管我不会触及 Facebook 源。为单个墙帖尝试约 7 个嵌套元素。

这是 CSS：

a {
    -moz-user-select: none;
    background: #2A49A5;
    border: 1px solid #082783;
    box-shadow: 0 1px #4C6BC7 inset;
    color: white;
    padding: 3px 5px;
    text-decoration: none;
    text-shadow: 0 -1px 0 #082783;
    font: 12px Verdana, sans-serif;
}

我添加了一个文字阴影，以给人以雕刻文字的印象，但您可以将其移除。如果你想在 IE 中获得 box 和 text shadow，使用this project 来实现。

【讨论】：

一个非常糟糕的问题的非常好的答案！ +1
非常感谢 :-) 我看到了，然后去了“my site 做到了，而且做得很好！”
抱歉，我不常上论坛。我在询问共享按钮样式。我会尽我所能。
@Nicholas 分享按钮的设计非常相似。我认为您需要从我的回答中获得的要点是box-shadow 和比您的background-color 深一些阴影的边框颜色，从而提供了不错的按钮效果。