How do I make buttons like stripe.com?

Use the CSS on this page: the primary button is #533afd with #ffffff text, 4px corners, 40px tall. Add the hover and focus rules listed under each variant and set the button font to the one stripe.com uses.

What color are the stripe.com buttons?

The primary button on stripe.com is #533afd with #ffffff text. The site uses 3 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 stripe.com buttons?

Yes. The stripe.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.

stripe.com button CSS: make buttons like theirs

primary button

Contact sales

Hover: background #533afd → #4032c8
Focus: outline 3px solid rgba(84, 82, 251, 0.75), offset 1px
Transition: color, background-color, border-color, 0.24s, 0.24s, 0.24s

secondary button

Hover: background transparent → #ffffff, text #533afd → #2e2b8c, border #ffffff → #4032c8, icon/inner colour → #2e2b8c
Transition: color, background-color, border-color, 0.24s, 0.24s, 0.24s

ghost button

Products

Hover: no visible change

The CSS

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

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 40px;
6  padding: 11.5px 20px;
7  background: #533afd;
8  color: #ffffff;
9  border: none;
10  border-radius: 4px;
11  font-size: 14px;
12  font-weight: 400;
13  font-family: "sohne-var", sans-serif;
14  cursor: pointer;
15}
16
17.btn-secondary {
18  display: inline-flex;
19  align-items: center;
20  justify-content: center;
21  height: 40px;
22  padding: 10.5px 20px;
23  background: transparent;
24  color: #533afd;
25  border: 1px solid #ffffff;
26  border-radius: 4px;
27  font-size: 14px;
28  font-weight: 400;
29  font-family: "sohne-var", sans-serif;
30  cursor: pointer;
31}
32
33.btn-ghost {
34  display: inline-flex;
35  align-items: center;
36  justify-content: center;
37  height: 40px;
38  padding: 12px 0px;
39  background: transparent;
40  color: #061b31;
41  border: none;
42  border-radius: 4px;
43  font-size: 14px;
44  font-weight: 400;
45  font-family: "sohne-var", sans-serif;
46  cursor: pointer;
47}

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/stripe.com/DESIGN.md

The buttons on stripe.com