Question

我正在查看twitter主页上使用的按钮，特别是大橙色“注册”按钮。我看到它定义如下：

<p id="signup-btn">
    <a id="signup_submit" href="/signup">
        <span>Sign Up</span>
    </a>
</p>

他们只是使用css给出橙色按钮外观（可能只是一个jpg），还使用css指定翻转外观（另一个jpg），最后是鼠标点击的第三个状态（另一个jpg）给人一种真正的可点击按钮的印象？

如果它是如何工作的，我应该寻找什么来做同样的事情？在我的情况下，我只想制作一个按钮，如：

<div class='mybutton'>Hello!</div>
.mybutton {
   bgcolor: red;
   bgcolor-mouseover: yellow;
   bgcolor-mousedown: green;
}

是的，那样的事情会很棒，

由于

Answer 1

看看他们的CSS：

background: #FA2 url(http://s.twimg.com/a/1275412898/images/fronts/bg-btn-signup.png) repeat-x 0px 0px;
border: 1px solid #FA2;
border-bottom-left-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-top-right-radius: 5px 5px;
color: #333;
display: block;
font: normal normal bold 18px/normal Arial, sans-serif;
padding: 8px 10px;
text-align: center;
text-decoration: none;
text-shadow: #FE6 0px 1px 0px;

Answer 2

没有具体看过它，但CSS完全有可能;他们可能在CSS中使用＃signup-btn指定了一个命名样式。要找到答案，您可以使用IE或FireFox与FireBug一起检查CSS并确切了解它们对按钮样式的作用。我强烈推荐。

HTH。

Answer 3

我使用BUTTON元素和CSS sprites。这样，您可以根据自己的喜好设置样式，而不必使用JS中的click（）事件。只要在表格中使用常规按钮，就可以使用它。

编辑：Coronatus，你应该读一读：Rediscovering the Button Element。使用一点CSS，它们非常容易在浏览器中实现视觉上的一致性。

如何使用<div>？</div>给出按钮的外观

3 个答案: