How do I make buttons like monzo.com?

Use the CSS on this page: the primary button is #091723 with #ffffff text, 500px corners, 51px tall. Add the hover and focus rules listed under each variant and set the button font to the one monzo.com uses.

What color are the monzo.com buttons?

The primary button on monzo.com is #091723 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 monzo.com buttons?

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

monzo.com button CSS: make buttons like theirs

primary button

Hover: background #091723 → #2c3a43, border #091723 → #2c3a43
Focus: outline 1px solid rgb(33, 143, 183), offset 2px
Transition: background-color, color, 0.3s, 0.3s

secondary button

Open a free Monzo accoun

Hover: background #ffffff → #ffffffcc, border #ffffff → #ffffffcc
Transition: background-color, 0.2s

ghost button

Confirm Selected Country

Hover: no visible change

The CSS

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

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 51px;
6  padding: 12px 24px;
7  background: #091723;
8  color: #ffffff;
9  border: 1px solid #091723;
10  border-radius: 500px;
11  font-size: 16px;
12  font-weight: 600;
13  font-family: "MonzoSansText", sans-serif;
14  cursor: pointer;
15}
16
17.btn-secondary {
18  display: inline-flex;
19  align-items: center;
20  justify-content: center;
21  height: 48px;
22  padding: 12px 24px;
23  background: #ffffff;
24  color: #091723;
25  border: 1px solid #ffffff;
26  border-radius: 500px;
27  font-size: 16px;
28  font-weight: 600;
29  font-family: "MonzoSansText", 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: 0px 0px;
39  background: transparent;
40  color: #000000;
41  border: none;
42  border-radius: 0px;
43  font-size: 0px;
44  font-weight: 400;
45  font-family: "MonzoSansText", 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/monzo.com/DESIGN.md

The buttons on monzo.com