Bagaimana cara membuat tombol seperti wise.com?

Pakai CSS di halaman ini: tombol utamanya berwarna #163300 dengan teks #9fe870, sudut 9999px, tinggi 32px. Tambahkan aturan hover dan focus yang tercantum di tiap varian, lalu atur font tombolnya ke font yang dipakai wise.com.

Apa warna tombol wise.com?

Tombol utama di wise.com berwarna #163300 dengan teks #9fe870. 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 wise.com?

Bisa. Paket desain wise.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 wise.com: buat tombol seperti miliknya

Tombol primary

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

Tombol secondary

Send money

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

Tombol ghost

Personal

Hover: tidak ada perubahan terlihat

CSS-nya

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

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}

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

Tombol di wise.com