Buttons

A button is an object that a user interacts with to perform an action such as the OK and Cancel buttons on a dialog box.

Example

See the Pen Buttons by SHC-FED (@SHC-FED) on CodePen.0

Design Specs

Desktop/Tablet/Mobile

  1. Primary buttons have a background color of #FF4800 and drop shadow color #c23700. Primary buttons in hover state have a background color of #e44101 and drop shadow color #c23700.
  2. Primary button text is Open Sans, Semibold, in #FFFFFF.
    • For Desktop, the font size is 15px.
    • For Mobile, the font size is 16px.
  3. Buttons are 36px high with 20px of padding around button text
  4. Secondary buttons, active state, on white have a background color of #EAF6FD. Drop shadow color #B2C3D9. There is a 1pt stroke, color #B2C3D9.
  5. Secondary button text is Open Sans, Semibold, in #001733.
    • For Desktop, the font size is 15px.
    • For Mobile, the font size is 16px.
  6. Secondary buttons in hover state on white have a background color of #D9E9F2. Drop shadow color #B2C3D9. There is a 1pt stroke, color #B2C3D9.
Not pictured:
  • Secondary buttons, active state, on gray have a background color of #FFFFFF. Drop shadow color #AAAAAA. There is a 1pt stroke, color #AAAAAA.
  • Secondary buttons in hover state on gray have a background color of #EEEEEE. Drop shadow color #AAAAAA. There is a 1pt stroke, color #AAAAAA.

  • Functional Specifications:Alignment of both primary and secondary buttons is determined by context of use. For in-page forms, the primary button should be left aligned under the form fields. For modals, the primary button should be right aligned. See forms and modals for more details.

    Note: Design specs are for reference only. Developers should use classes from Global Enterprise CSS where possible - see "Code and Downloads" section on this page.

    Production Examples

    • Sears
    • Kmart

    Buttons come in one size and three colors for Sears; one primary color for all backgrounds and two secondary buttons depending on background color. See code examples above as well. Hover state is only used on the desktop site.

    Desktop/Tablet/Mobile

    Primary and secondary button as seen on the PDP buy box.

    Primary and secondary button (on grey) as seen Sears Mini Cart.

    More Production Examples

    Buttons come in one size and two colors for Kmart. Hover state is only used on the desktop site.

    Desktop/Tablet/Mobile

    Primary and secondary button (on grey) as seen on Kmart.com Mini Cart

    Primary and secondary button as seen on Kmart.com Product Detail Page (PDP)

    More Production Examples

    When Do I Use This?

    Use buttons for major calls-to-action (CTA/CTAs) or significant customer decisions such as: for form submits and in modals. Buttons are also used for process initiation such as add to cart/list, continue to next step of flow, and canceling.

    Do not use buttons when the intention is simply to point to additional information in a layer, popup, modal, or when navigating to an information page (think "learn more," "see details," etc.). Use a text link for this kind of interaction.

    Usage Guidelines

    1. Use buttons for significant decisions

    2. Not for page turns

    Do not use buttons for the pursuit of content or information only such as "learn more", "see details", or to open a layer, tooltip, or modal. Use links instead.

    3. Have one primary button

    When there are multiple buttons in a group, only the one most important action gets the primary (orange) treatment. Do not use multiple primary buttons in a group.

    4. Secondary buttons

    Secondary buttons are used for actions such as "Cancel," "No thanks," or "Back." When there is no clear primary action (e.g., the user must pick either a 1-year, 3-year, or 5-year protection agreement), all buttons receive the secondary treatment.

    5. Don't mix buttons and links

    If there's a primary button treatment, the other CTAs in the group must be secondary buttons.

    6. Button copy and capitalization

    Standard button copy should be action verbs in the present tense - unless the buttons are "Yes" or "No." Buttons should clearly communicate what action will occur when a user clicks or touches it.
    Capitalization: Title Case.

    7. Button Alignment

    • For in-page forms, the primary button should reside below the last input field and be left aligned. Secondary button(s) would then follow the primary button to its right.
    • For forms within a modal, the primary button is right aligned to the edge of the modal. Secondary button(s) would then be to the left of it.

    ADA Compliance

    For people who have difficulty using their hands or whose hand/eye co-ordination is restricted, providing buttons provide a larger touch target point for links can improve access to content. To ensure a button meets accessibility standards the element must be keyboard navigable. Additionally, the button must pass WCAG AA color standards, which can be checked here. Standardizing the appearance of buttons enhances the user's recognition of the element, so visual consistency as well as expected placement is essential.

    Where possible, it is recommended to use native HTML buttons rather than the button role, as native HTML buttons are more widely supported by older user agents and assistive technology. Native HTML buttons also support keyboard and focus requirements by default, without need for additional customization. Source: Mozilla Developer Accessibility Guidelines for Buttons.

    Do not style links or buttons with outline:0. It makes the focus indicator, the dashed lines or 'marching ants' that surround focused links and buttons, invisible. Source: http://webaim.org/articles/gonewild/.

    Useful Links:

    Rationale

    There are a large volume of internal research/tests where the previous button styling and application of these guidelines were a non-issue.

    2014 restyling: the size of the button allows for it to be touch friendly. Additionally, the combination of the color and text styling is makes it compliant with ADA standards. There is no disabled state for buttons because different treatments of disabled showed comprehension issues. Regardless of treatment, users thought the buttons were still enabled.

    Research

    Cart Redesign

    The 'Proceed to Checkout' button's different color (vs legacy primary button) was mostly perceived as either non-consequential or liked it. Note: Some shoppers perceive the 'Proceed to Checkout button' to be red. See page 31 of test results deck.

    view full study

    Mobile 6.1 Benchmark

    Disabled state of orange with opacity showed comprehension issues among users. See page 23 of test results deck.

    view full study

    Bundles Baseline Testing for HA

    Customers don't know "that button should be normally orange"; they see a large button with verbs for the copy and try to click it. Color change only = comprehension issues. See page 8 of test results deck to watch user-testing videos; there is more context to this, but the repeated CTA clicks confirm this button styling doesn't work.

    view full study

    Post a New Comment

    Your feedback will help us improve this page. If you have a comment about the content of this page, use the form below, and the Patterns Team will get back to you within a business day.

    For general questions or assistance, email the Patterns Team directly.