...
- General observations
- They use a 3-D effect (a bevel, emboss, or shadow), but it's very minimal, just a pixel or two.
- Stack Overflow
- There's no difference between :hover and :active.
- I could be wrong, but they may have just based its styling and positioning on the Gmail 'Compose' button, because it is styled and positioned very similarly, except on the opposite side of the page, and it's blue instead of red.
- It's also not all caps, whereas the 'Compose' button is in all-caps ('COMPOSE').
- The text is not bold, whereas a lot of button text seems to be in bold (see Google / Facebook below).
- This may be because the text is longer than most buttons, and having it in bold might make it harder to read or too prominent. Or it might be an oversight, or just a stylistic difference of opinion. I tried switching the font-weight to bold and it felt like more like "Hey look at me, this is what you should do next" than "this is an important button to be aware of" (which is how I feel the current button comes across).
- The cursor changing on click seems like a bug to me. I can't think of any reason to do that beyond indicating to the user that they have done something, and I think the color-change already does that much more effectively.
- Google Search
- With the transition to the :hover state I get the vibe of an assistant standing along the wall who steps forward when you motion for him. The idea is to get out of the way and avoid distracting the user if their attention is focused elsewhere, but to "step forward" and make it clear to the user that it is a button if that is where there attention is.
- It doesn't change the tool-tip. My guess is that the button's styling already makes it absolutely clear that it is a button, so a change of tool-tip would just be more noise. Maybe a custom tool-tip is more useful when something acts like a button but doesn't look like a button, just to make it clear to the user.
- Bold text.
- It's not a bright color (blue, red). It seems likely that this is because it is in an obvious location, and so it doesn't need the bright color to draw attention to itself.
- Bold text
- Bright color (because the button is in a corner and needs to draw attention to itself).
- It has a very thin light blue border, and when you click it seems to add to the effect of the center of the button being pressed down.
- Facebook
- Facebook seems to be using an even-flatter design than Google (i.e. no or extremely-subtle shadow effects).
- It uses the short "Friends" to make it easier to scan, but uses the more-explicit "Your friends" in the pop-up to remove any ambiguity for new users.
- The pop-up is still present in the :click state but I didn't bother showing it.
- I also didn't bother showing the drop-down for the last image, since it doesn't seem directly relevant to the button.
(No change for :active)
(No change for :active)