Bagaimana cara membuat tombol seperti monzo.com?

Pakai CSS di halaman ini: tombol utamanya berwarna #091723 dengan teks #ffffff, sudut 500px, tinggi 51px. Tambahkan aturan hover dan focus yang tercantum di tiap varian, lalu atur font tombolnya ke font yang dipakai monzo.com.

Apa warna tombol monzo.com?

Tombol utama di monzo.com berwarna #091723 dengan teks #ffffff. Situs ini memakai 3 varian tombol secara keseluruhan; masing-masing tercantum di halaman ini beserta latar, border, radius, dan ukurannya.

Bisakah AI coding agent meniru tombol monzo.com?

Bisa. Paket desain monzo.com dari Stylepack memuat setiap varian tombol beserta state-nya, font, warna, dan screenshot, sehingga Claude Code, Cursor, atau Copilot bisa membuat tombol yang serupa.

CSS tombol monzo.com: buat tombol seperti miliknya

Tombol primary

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

Tombol secondary

Open a free Monzo accoun

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

Tombol ghost

Confirm Selected Country

Hover: tidak ada perubahan terlihat

CSS-nya

Satu class per varian, dengan nilai hasil pengukuran. Fontnya adalah font yang dipakai monzo.com pada tombolnya.

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}

Untuk agen AI

Paket berupa teks biasa, tanpa kunci: ambil DESIGN.md, atau serahkan seluruh paket ke Claude Code, Cursor, atau Copilot lewat server MCP.

curl -s https://stylepack.ai/packs/monzo.com/DESIGN.md

Tombol di monzo.com