How do I make buttons like sweetgreen.com?

Use the CSS on this page: the primary button is #00473c with #e6ff55 text, 9999px corners, 30px tall. Add the hover and focus rules listed under each variant and set the button font to the one sweetgreen.com uses.

What color are the sweetgreen.com buttons?

The primary button on sweetgreen.com is #00473c with #e6ff55 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 sweetgreen.com buttons?

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

sweetgreen.com button CSS: make buttons like theirs

primary button

Order

Hover: background #00473c → transparent, text #e6ff55 → #0e150e, border transparent → #0e150e
Focus: border → #0e150e50
Transition: all, 0.3s

secondary button

Order now

Hover: background #e6ff55 → #00473c, text #00473c → #f4f3e7, border transparent → #00473c, icon/inner colour → #f4f3e7
Transition: all, 0.3s

ghost button

Salads

Hover: no visible change

The CSS

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

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 30px;
6  padding: 7px 16px;
7  background: #00473c;
8  color: #e6ff55;
9  border: 1px solid transparent;
10  border-radius: 9999px;
11  font-size: 16px;
12  font-weight: 400;
13  font-family: "Grenette", sans-serif;
14  text-transform: uppercase;
15  cursor: pointer;
16}
17
18.btn-secondary {
19  display: inline-flex;
20  align-items: center;
21  justify-content: center;
22  height: 46px;
23  padding: 15px 60px;
24  background: #e6ff55;
25  color: #00473c;
26  border: 1px solid transparent;
27  border-radius: 9999px;
28  font-size: 16px;
29  font-weight: 400;
30  font-family: "Grenette", sans-serif;
31  text-transform: uppercase;
32  cursor: pointer;
33}
34
35.btn-ghost {
36  display: inline-flex;
37  align-items: center;
38  justify-content: center;
39  height: 48px;
40  padding: 0px 0px;
41  background: transparent;
42  color: #0e150e;
43  border: none;
44  border-radius: 4px;
45  font-size: 48px;
46  font-weight: 200;
47  font-family: "Grenette", sans-serif;
48  text-transform: capitalize;
49  cursor: pointer;
50}

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

The buttons on sweetgreen.com