Buttons in Promotions

Buttons are the default CTA for heroes and banners. They should clearly communicate what will occur when a user clicks or taps it. See also Buttons vs Links vs Carets in Promotions

Also known as: Hero Button, CTA, C2A

Design Specs

  1. Whites buttons have a background color of #FFFFFF and drop shadow color #aaaaaa. The drop shadow is 90 degrees with a 1px distance. The shadow spread and shadow distance are to be set at 0%. There is a 1pt stroke, color #aaaaaa.
  2. White button text is Open Sans, Semibold, 18px with optical tracking. The font color for Sears is #001733, while the font color for Kmart is #333333.
  3. Buttons are 40px high with 25px of padding around button text.


Not pictured:
  • The character limit is no more than 26 characters and the CTA is title case. The text should be centered in the button.
  • The corner radius of the rounded rectangle buttons are to be 3px.

  1. Stroke buttons have a transparent background and no drop shadow. There is a 2px stroke in the color #ffffff or #333333. The stroke color must match the font color.
  2. White button text is Open Sans, Semibold, 14px with optical tracking. The font color is either #ffffff or #333333.The font and stroke color against the background color should pass the AA guidelines in the ADA Color Contrast Checker.
  3. Buttons are 40px high with 25px of padding around button text.


Not pictured:
  • The character limit is no more than 26 characters and the CTA is title case. The text should be centered in the button.
  • The corner radius of the rounded rectangle buttons are to be 3px.

Production Examples

The following have been vetted to work on promotions of any kind in the colors shown. Buttons are built into the ASAP module on the homepage's rotating hero component. They are also in the CSS. View Code.

Desktop/Tablet

An example Sears rotating hero with the white button.

An example Sears rotating hero with the stroke button.

An example Kmart rotating hero with the white button.

More Production Examples

When Do I Use This?

Use buttons when:
  • Defaults for heroes and banners
  • Options for DAPs, brand showcase and other 'special pages'
  • When there is only 1-2 links
We don't use buttons when:
  • There is 3 or more links

The white button will be implemented via HTML or in images. The stroke button in black or white is an alternate option will be implemented via images only.


Note: The white button aligns to the "secondary button" (white) standard. Do not use "Primary" button (orange) in Promotions. See Buttons in UI
Similar topics

ADA Compliance

Buttons must comply to AA color contrast and text size accessibility compliance guidelines. More details about those guidelines can be found here.

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.