Page Comparison

...

• Undated - UserSnap - The evolution of buttons in web design
• Undated - Vizlly - Where to Position Your Book Now Button to Boost Clicks
• 2011.07.07 - UX Movement - Visual Weight of Primary and Secondary Action Buttons
• 2012.05.07 - UX Matters - 7 Basic Best Practices for Buttons
• 2012.06.12 - CSS Tricks - Crafting Minimal Circular 3D Buttons with CSS
• 2013.02.13 - TutsPlus - Principles for Successful Button Design
• 2014.01.07 - CSS Tricks - When To Use The Button Element
• 2014.11.10 - WebDesign.org - Ghost Buttons - The Most Anticipated Web Design Trend for 2015
• 2015.03.08 - Nielsen Norman Group - Beyond Blue Links: Making Clickable Elements Recognizable
• 2015.07.09 - UX Movement - How Button Placement Conventions Reinforce User Habits
• 2015.07.17 - DesignModo - The Ultimate UX Design of the Perfect CTA Button
• 2015.08.24 - Web Designer Depot - The UX Case Against the Home Button
  • Summary:
    • It makes it easier for users to navigate (they have to look at one less option).
    • Users can easily navigate the average website without it.
    • It has become standard to make the company’s logo clickable.
  2015.09.29 - UserTesting - 11 Characteristics of Persuasive Call-to-Action Buttons
• 2015.10.19 - Adobe - The Evolution of Buttons in UX Design
• 2016.11.02 - Smashing Magazine - The Golden Rules Of Bottom Navigation Design
• 2016.11.09 - Smashing Magazine - How To Design Better Buttons
  • Summary
    • Make buttons look like buttons.
      • Shape 
        • The safest shape is square or square with rounded corners.
        • Maintain consistency of shape throughout your interface controls.
      • Shadows and highlights
        • A subtle shadow serves as a clue to the user that the element is interactive.
    • Clearly label buttons.
      • Each button in your UI should have a label or icon.
      • Make sure the user will understand from the label what the button does.
        
        • Prefer context-specific labels like "Create Account" over context-agnostic labels like "Submit".
        • Use action verbs (e.g. "Create").
        • The label should state what the outcome will be after pressing the button.
    • Put buttons where users can find them.
      • Applying consistent design that follows user expectations saves people time.
      • If you’re designing a native app, you should follow platform GUI guidelines when choosing a proper location and order for buttons.
      • Within the boundaries of best-practice guidelines, use testing to determine the best locations for buttons.
    • Make it easy for users to interact with buttons.
      
      • Ensure the buttons are large enough for people to interact with.
      • Touch: 10mm x 10mm is a good minimum size. (Source: MIT Touch Lab)
      • Mouse: button measurements can be slightly reduced (from 10mmx10mm).  (Source: MIT Touch Lab)
      • Ensure you have enough padding between clickable elements to avoid mis-clicks.
      • Provide visual indications of the button's different states (disabled, normal, focused, pressed)
    • Visually highlight the most important buttons.
      • Ensure the design puts emphasis on the primary or most prominent action.
        • Use color and contrast to keep user focus on the action.
        • Place the button in prominent locations where users are most likely to notice it.
      • Secondary actions should have weaker visual weight.
        
        • Explanation: Reducing the visual prominence of secondary actions minimizes the risk for potential errors, and further directs people toward a successful outcome.
        • Examples: options like ‘Cancel’ or ‘Go Back’.
• 2016.12.03 - 1st Web Designer - How to Use Ghost Buttons Effectively
• 2017.05.29 - ElegantThemes - Button Design Guide: How to Design Buttons that Convert

...

• 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)