Stylepack

Buttons

The buttons on apple.com

The primary button on apple.com is #0071e3 with #ffffff text, 980px corners and 44px tall. Below: every button variant the site uses, its hover and focus states, and the CSS to make yours look the same.

Measured from apple.com 4 days ago.

Open the full design packDownload the pack

primary button

Learn more
Hover
background #0071e3 → #0076df
Focus
outline 2px solid rgb(0, 113, 227), offset 3px
Transition
all, 0s

secondary button

Shop
Hover
background transparent → #0076df, text #2997ff → #ffffff, border #2997ff → transparent
Transition
all, 0s

The CSS

One class per variant, with the measured values. The font is the one apple.com sets on its buttons.

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 11px 21px;
  background: #0071e3;
  color: #ffffff;
  border: 1px solid transparent;
  border-radius: 980px;
  font-size: 17px;
  font-weight: 400;
  font-family: "SF Pro Text", sans-serif;
  cursor: pointer;
}
​
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 11px 21px;
  background: transparent;
  color: #2997ff;
  border: 1px solid #2997ff;
  border-radius: 980px;
  font-size: 17px;
  font-weight: 400;
  font-family: "SF Pro Text", sans-serif;
  cursor: pointer;
}

For AI agents

The pack is plain text, no key: fetch DESIGN.md, or hand the whole pack to Claude Code, Cursor or Copilot with the MCP server.

curl -s https://stylepack.ai/packs/apple.com/DESIGN.md

Questions

How do I make buttons like apple.com?

Use the CSS on this page: the primary button is #0071e3 with #ffffff text, 980px corners, 44px tall. Add the hover and focus rules listed under each variant and set the button font to the one apple.com uses.

What color are the apple.com buttons?

The primary button on apple.com is #0071e3 with #ffffff text. The site uses 2 button variants in total; each one is listed on this page with its background, border, radius and size.

Can an AI coding agent copy the apple.com buttons?

Yes. The apple.com design pack from Stylepack holds every button variant with its states, the fonts, the colors and screenshots, so Claude Code, Cursor or Copilot can build buttons that match.