How do I make buttons like wise.com?

Use the CSS on this page: the primary button is #163300 with #9fe870 text, 9999px corners, 32px tall. Add the hover and focus rules listed under each variant and set the button font to the one wise.com uses.

What color are the wise.com buttons?

The primary button on wise.com is #163300 with #9fe870 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 wise.com buttons?

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

wise.com button CSS: make buttons like theirs

primary button

Hover: background #163300 → #0d1f00, text #9fe870 → #bbef9a, border #9fe870 → #bbef9a, icon/inner colour → #bbef9a
Focus: outline 2px solid rgb(22, 51, 0), offset 2px
Transition: color, background-color, border-color, 0.35s

secondary button

Send money

Hover: background #163300 → #0d1f00, border #163300 → #0d1f00
Transition: color, background-color, 0s, 0.15s

ghost button

Personal

Hover: no visible change

The CSS

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

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 32px;
6  padding: 8px 12px;
7  background: #163300;
8  color: #9fe870;
9  border: none;
10  border-radius: 9999px;
11  font-size: 18px;
12  font-weight: 600;
13  font-family: "Inter", 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 16px;
23  background: #9fe870;
24  color: #163300;
25  border: none;
26  border-radius: 9999px;
27  font-size: 14px;
28  font-weight: 400;
29  font-family: "Inter", sans-serif;
30  cursor: pointer;
31}
32
33.btn-ghost {
34  display: inline-flex;
35  align-items: center;
36  justify-content: center;
37  height: 32px;
38  padding: 8px 12px;
39  background: transparent;
40  color: #163300;
41  border: none;
42  border-radius: 9999px;
43  font-size: 18px;
44  font-weight: 400;
45  font-family: "Inter", 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/wise.com/DESIGN.md

The buttons on wise.com