How do I make buttons like github.com?

Use the CSS on this page: the primary button is #08872b with #ffffff text, 6px corners, 48px tall. Add the hover and focus rules listed under each variant and set the button font to the one github.com uses.

What color are the github.com buttons?

The primary button on github.com is #08872b 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 github.com buttons?

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

github.com button CSS: make buttons like theirs

primary button

Hover: background transparent → #ffffff29, border #262c28 → #ffffff1f
Focus: outline 2px solid rgb(48, 148, 255)
Transition: background-color, border-color, 0.2s, 0.2s

secondary button

Search/

Hover: background transparent → #ffffff29, border #262c28 → #ffffff1f
Transition: background-color, border-color, 0.2s, 0.2s

ghost button

Hover: no visible change

The CSS

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

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 48px;
6  padding: 6px 20px;
7  background: #08872b;
8  color: #ffffff;
9  border: 1px solid transparent;
10  border-radius: 6px;
11  font-size: 14px;
12  font-weight: 400;
13  font-family: "Mona Sans", sans-serif;
14  cursor: pointer;
15}
16
17.btn-secondary {
18  display: inline-flex;
19  align-items: center;
20  justify-content: center;
21  height: 32px;
22  padding: 1px 12px;
23  background: transparent;
24  color: #ffffff;
25  border: 1px solid #262c28;
26  border-radius: 6px;
27  font-size: 16px;
28  font-weight: 400;
29  font-family: "Mona Sans", sans-serif;
30  cursor: pointer;
31}
32
33.btn-ghost {
34  display: inline-flex;
35  align-items: center;
36  justify-content: center;
37  height: 42px;
38  padding: 5px 5px;
39  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
40  color: #000000;
41  border: none;
42  border-radius: 0px;
43  font-size: 14px;
44  font-weight: 600;
45  font-family: "Mona Sans", 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/github.com/DESIGN.md

The buttons on github.com